JavaScript Interview Coding Questions — 1
Tags: javascript, career, webdev, tutorial
Published: 2020-01-04 20:48:27

Online coding is a crucial part of software developer job interviews. In this article, I will try to add several coding questions. These will be evaluation focused code snippets instead of task based coding questions. Additionally, I will share online code links at the end of every question.

Let’s start with one of the most well-known one:

1. In this question, closure and asynchronous code handling knowledge is assessed.
    ```
    // What will be the console log of the code below?
    for (var i = 0; i < 4; i++) {
      setTimeout(() => console.log(i), 0);
    }
    ```
    It will write 4, 4, 4, 4 in console because `setTimeout()` is a 
asynchronous function and it will be executed after `for` cycle is completed. `i` is defined outside scope of `for` loop and it will be equal to 4 when `console.log()` starts to write.
    How can you fix it to write 0, 1, 2, 3? Here is the possible solutions:
    ```
    // Solution 1:
    for (let i = 0; i < 4; i++) {
      setTimeout(() => console.log(i), 0);
    }

    // Solution 2:
    for (var i = 0; i < 4; i++) {
      (function (i) {
        setTimeout(() => console.log(i), 0);
      })(i);
    }
    ```
    __Solution 1:__ You can change declaration of `i` from `var` to `let` 
because `let` is block scoped variable but `var` is function scoped variable.
    __Solution 2:__ You can wrap `setTimeout()` with a function to limit 
the scope of `i` variable. But you should pass `i` as parameter to your IIFE (Immediately-invoked Function Expression).

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

2. This one is about scope of this.
    ```
    // What will be the logs in console?
    function nameLogger() {
      this.name = 'halil';
      console.log('first:', this.name);
    }

    console.log('second:', this.name);
    nameLogger();
    console.log('third:', this.name);
    ```
    Console output will be following:
    ```
    second: undefined
    first: halil
    third: halil
    ```
    While “second” is executed `this.name` is undefined but after `nameLogger()` function is executed it will be defined. __Because, `this` refers to the global object in a function.__ So the others log "halil" as expected.
    __!! It will not work with `'use strict'` because in a function, in strict mode, `this` equals `undefined` instead of global object.__
 
    You can test it in below:
    {% replit @hco/Scope-this %}

3. The last one is about `this` and `bind`
    ```
    // What will be written?
    const module = {
      x: 55,
      getX: function () {
        console.log('x:', this.x);
      }
    };
    const unboundX = module.getX;
    unboundX();
    ```
    Console output will be `x: undefined` because `this` refers to current owner object. So when you assign only `getX` method to a new object `unboundX`, `this` will refers to it. And it has no `x` property, that’s why `this.x` equals to `undefined`.
    You can fix it by using `bind()` as below:
    ```
    const boundX = unboundX.bind(module);
    boundX();
    ```
    Now you bind module object to `unboundX` function. Then it can reach the `x` property of module.

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

__You can read some of my other articles from the links below:__
{% 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/chrome-devtool-tips-2eb %}