interviews

interviews.md

JS

1. What is the output of this function ?

class ExampleA {

  constructor(name: string) {
    this.name = name;
  }
  onClick() {
    console.log(this);
    console.log(this.name);
  }
  triggerOnClick(f: Function) {
    f();
  }
}

const exampleA = new ExampleA('Bind Example');
exampleA.triggerOnClick(exampleA.onClick);

2. After switchColor run, what is the value of "this.styles"?

  switchColor = () => {
    setTimeout(() => {
      this.styles = { color: "bg-danger" };
    }, 0);
    Promise.resolve().then((_) => {
      this.styles =  { color: "bg-primary" };
    });
  };

3. What's happpend when we call randomData;

const randomNumber = (n: number = 100): number => {
  return Math.floor(Math.random() * n);
};
const randomLetter = (): string => {
  const possible =
    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  const randomIndex = randomNumber(possible.length);
  return possible[randomIndex];
};
// Generator
function* randomData(n: number): Generator {
  for (let i = 0; i < n; i++) {
    if (i % 3 === 0) {
      yield randomNumber();
    } else {
      yield randomLetter();
    }
  }
}

Typescript

import React from 'react';
import PropTypes from 'prop-types';

export const COLORS = [
  'gray',
  'red',
  'orange',
  'amber',
  'yellow',
  'lime',
  'green',
  'emerald',
  'teal',
  'cyan',
  'sky',
  'blue',
  'indigo',
  'violet',
  'purple'
] as const;

Tag.propTypes = {
  color: PropTypes.oneOf(COLORS)
};

// please define a coressponded type for Color
type Color = ?;

function Tag(props: { color: Color; children: React.ReactNode }) {
  const { color, children } = props;
  return <span className={`bg-${color}-400 p-4`}>{children || ''}</span>;
}

export default Tag;

class Archer {
    fire() {
      console.log('fire');
    }
  }
  class Guardian {
    defend() {
      console.log('defend');
    }
  }
  class Knight {
    attack() {
      console.log('attack');
    }
  }
  
  const heros: [any];
  const heroA: Hero<Archer> = {
    character: new Archer(),
    health: 100,
    stamina: 100,
  };
  const heroB: Hero<Guardian> = {
    character: new Guardian(),
    health: 100,
    stamina: 100,
  };
  const heroC: Hero<Knight> = {
    character: new Knight(),
    health: 100,
    stamina: 100,
  };
  heros.push(heroA, heroB, heroC);
  for (const hero of heros) {
    // how do we call the approriate hero action for each type of hero
    // eg: Archer hero can only fire
  }

Form Input

document.querySelector("#text").value = JSON.stringify({a:1,b:1})
const changeDetection = (e) => {
 console.log(e.target.value);
 console.log(JSON.parse(e.target.value));
 console.log(JSON.stringify(JSON.parse(e.target.value)));
 console.log(JSON.stringify(e.target.value));
 document.querySelector("#viewinput").value = JSON.stringify(e.target.value);
}
document.querySelector("#text").addEventListener("change", changeDetection);
```

```html
<textarea id="text"></textarea>
<textarea id="viewinput"></textarea>
```