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.