JavaScript Interview Coding Questions — 1

#javascript #career #tutorial #webdev

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:

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:
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:
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: