JavaScript Interview Coding Questions - 5
Tags: javascript, career, webdev, tutorial
Published: 2020-01-22 20:24:17

In this article, I will add questions about JavaScript Classes. Let's begin:

1. This one is about converting constructor function to class. It is a beneficial coding exercise to understand JavaScript class knowledge.
    ```
    // Rewrite the following consturctor function as a Class
    function Animal(name) {
      this.name = name;
    }
    Animal.prototype.duck = function () {
      console.log(this.name, 'duck');
    };

    const animal = new Animal('daffy');
    animal.duck();
    ```

    The answer will be below:

    ```
    // The answer is below
    class Animal {
      constructor(name) {
        this.name = name;
      }

      duck() {
        console.log(this.name, 'duck');
      }
    }
    const animal = new Animal('daffy'); // new keyword is mandatory
    animal.duck();
    ```

    And one more related question after converting to class.

    ```
    // 3. What will be the following console output?
    console.log(typeof Animal);
    ```

    The answer is:
    ```
    function
    ```

    You can test it in below:
    {% replit @hco/Classes %}

2. This one is about differences in declaration of class and functions.
    ```
    // 1. What will be the output?
    const car = new Car('Clio');

    function Car(model) {
      this.model = model;
    }
    Car.prototype.getModel = function () {
      return this.model;
    };

    console.log('car model:', car.getModel());

    // 2. What will be the output?
    const bike = new Bike('Bianchi');

    class Bike {
      constructor(model) {
        this.model = model;
      }

      getModel() {
        return this.model;
      }
    }

    console.log('bike model:', bike.getModel());
    ```

    The console output will be below:
    ```
    car model: Clio
    ReferenceError: Bike is not defined
    ```

    function definitions are hoisted so we can create an instance before declaration. However, __class definitions are not initialized until their definition is evaluated__ so it gives `Bike is not defined` error. You can read [This stackoverflow answer](https://stackoverflow.com/questions/31219420/are-variables-declared-with-let-or-const-not-hoisted-in-es6/31222689#31222689) for more detailed information.

    You can test it in below:
    {% replit @hco/Declaration-Class-vs-Function %}

3. Next question is about inheritance in JavaScript classes.
    ```
    // 1. What will be the console outputs?
    class Parent {
      constructor(name) {
        this.name = name;
      }

      getName() {
        return this.name;
      }
    }

    class Child extends Parent {
      constructor(name) {
        super(name);
      }

      getMessage() {
        return `My name is ${super.getName()}`;
      }
    }

    const child = new Child('Halil');

    console.log(child.getMessage());
    console.log(child.getName());
    ```

    The outputs will be as below:
    ```
    My name is Halil
    Halil
    ```
    So, although there is no `getName()` method in `Child` class it is inherited from `Parent` class.

    You can test it below:
    {% replit @hco/Class-Inheritance %}

4. Write a generator function which takes an array and returns its every member in each call.
   The answer can be as below:
    ```
    function* sendNumber(list) {
      for (let item of list) {
        yield item;
      }
    }

    const iterator = sendNumber([1, 2, 3]);

    // What will be written?
    console.log(iterator.next());
    // What will be written?
    console.log(iterator.next());
    // What will be written?
    console.log(iterator.next());
    // What will be written?
    console.log(iterator.next());
    ```

    And the console outputs will be:
    ```
    { value: 1, done: false }
    { value: 2, done: false }
    { value: 3, done: false }
    { value: undefined, done: true }
    ```

    You can test it in below:
    {% replit @hco/Generator-Functions %}

__You can read the previous articles of this series from the links below:__
{% link https://dev.to/halilcanozcelik/javascript-interview-coding-questions-1-4alk %}
{% link https://dev.to/halilcanozcelik/javascript-interview-coding-questions-2-3o0i %}
{% link https://dev.to/halilcanozcelik/javascript-interview-coding-questions-3-13gn %}
{% link https://dev.to/halilcanozcelik/javascript-interview-coding-questions-4-1fo7 %}