JavaScript Interview Questions — Tricky Questions
Tags: webdev, programming, beginners, javascript
Published: 2021-01-24 02:02:14

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


To get a job as a front end developer, we need to nail the coding interview.

In this article, we’ll look at various kinds of questions that may throw anyone off.

### Accidental Global Variable Creation

What are the values that are logged in the console log in the code snippet below?

```
function foo() {
  let a = b = 0;
  a++;
  return a;
}

foo();

console.log(typeof a);
console.log(typeof b);
```

`typeof a` should return `'undefined'` so the first `console.log` is `'undefined'` .

However, the second `console.log` logs `'number'` since `b` is a global variable.

Don’t let the `let` keyword fool us, `b` is still a global variable since it has no keyword before it.

`b = 0` is the same as `window.b = 0` .

To avoid this tricky situation, use strict mode by adding `'use strict'` to the top of out code. Then we’ll get the error ‘`b` is not defined’.

Modules always use strict mode so this is not an issue with them.

### Array Length Property

What does the console log on the last line display in the code below?

```
const fruits = ['apple', 'orange'];
fruits.length = 0;

fruits[0];
console.log(fruits[0])
```

The `console.log` should show `undefined` since we set the `fruits` ‘s `length` property to 0, which empties the array.

Therefore, `fruits` becomes an empty array set setting its `length` to 0.

Then we display `undefined` .

### Tricky Numbers Array

What does the console log in the code snippet below log?

```
const length = 4;
const numbers = [];
for (var i = 0; i < length; i++); {
  numbers.push(i + 1);
}

console.log(numbers);
```

The `numbers` array should be `[5]` since `i` is incremented without running anything since we have:

```
for (var i = 0; i < length; i++);
```

and then we have:

```
{
  numbers.push(i + 1);
}
```

So we have a `for` loop that did nothing but increment `i` and a block that pushes `i + 1` to `numbers` .

The `var` keyword makes `i` available outside the `for` loop. Therefore, we can push `i + 1` , which is 5, since `i` is 4.

Therefore, `numbers` is `[5]` .

If we replace `var` with `let` , then we won’t have this issue since we’ll get an error when we push as `i` won’t be available outside the `for` loop.

### Automatic Semicolon Insertion

What does the console log on the last line display?

```
function foo(item) {
  return
    [item];
}

console.log(foo(5));
```

It should display `undefined` since we ran `return` with nothing returned since a semicolon is automatically inserted on the last line in JavaScript.

`[item]` is therefore never ran.

To make sure that we don’t make this mistake, we should put whatever we return on the same line as the `return` keyword.

### Tricky Closure

What does the following code display in the console?

```
let i;
for (i = 0; i < 5; i++) {
  const log = () => {
    console.log(i);
  }
  setTimeout(log, 100);
}
```

The code above should log `5` five times since `setTimeout` runs the `log` function after the `for` loop is done.

`setTimeout` is async, so it’s queued in the event loop and runs when all the synchronous code is done running.

Therefore, first the `for` loop runs and creates a new `log` function, which captures the variable `i` .

Then the `setTimeout` schedules it to be run after the `for` loop is done.

Then the `log` function runs after the loop is done when `i` is 5.

After 100 milliseconds, the 5scheduled `log` callbacks are called by `setTimeout` .

`log` reads the current value of `i` , which is 5 and runs `log` with that value.

We can fix this by passing in `i` to `log` so that the value of `i` that’s currently being loop through is preserved in `log` as follows:

```
let i;
for (i = 0; i < 5; i++) {
  const log = (i) => {
    console.log(i);
  }
  setTimeout(log, 100, i);
}
```

All arguments after the 2nd argument are passed into `setTimeout` are passed into the callback and are accessible via the parameters.

### Conclusion

We should be aware of accidentally creating global variables in scripts. Any variables that don’t have a keyword before it is a global variable.

Also, we can create loops that have no blocks below it in JavaScript, so should be careful of not to insert a semicolon between the closing parentheses and the opening curly brackets.

When we want to return a value, we should put whatever it is right after the `return` keyword.

Finally, if we want a value inside a `setTimeout` callback when `setTimeout` is called inside a loop, then we should pass it into the callback so the current loop value is preserved.