The most failed JavaScript interview questions

Try yourself and read the explanation.

True story — you don’t need to know JavaScript well to pass any JavaScript interview.

If you do interviews as a JavaScript developer from time to time, then you know that the questions in such interviews are always similar (more or less, okay!). Under different phrases, interviewers test you for knowledge of the same topics. And despite this, as you will see, the statistics of correct answers to such questions is quite low.

How to change the situation? Piece of cake — to do as many exercises as possible across these topics — and most importantly, to understand the result. Start with the ones we have selected for this article.

Below we give typical interview questions broken down by topic and the percentage of correct answers from our telegram channel. To give you more insight regarding these numbers, we should note that stats for other quizzes from our channel show a high level of JavaScript proficiency in our audience.

And now running to the questions.

Event loop.

It’s hard to imagine a JavaScript interview that doesn’t mention the event loop. And it’s not in vain. The theme is really fundamental and is used daily by every React, Angular, *substitute your framework* developer.

Quiz №1. 18% of correct answers

As an example, we have chosen a quiz that seems to cover all aspects of this topic.

Try yourself and read the explanation.

Explanation.

In the example, we see setTimeout, Promise, and some synchronous code.

The internal dialogue of a developer who answered this quiz correctly might look like this.

• Given zero delay, will the function we passed to setTimeout be called synchronously or asynchronously?
• Despite the fact that the setTimeout function has zero delay, the callback function is called asynchronously. The engine will place the callback function in the callback queue (macrotask queue) and move it to the call stack when it is empty. Therefore, the number 1 will be skipped and number 2 will be displayed first in the console.
• Will the function we passed as an argument to the Promise constructor be called synchronously or asynchronously?
• The function that the Promise constructor takes as an argument is executed synchronously. Therefore, the next number to be displayed in the console is 3.
• Given zero delay, will the function we passed as an argument to the promise’s then handler be called synchronously or asynchronously?
• The callback in the then method is executed asynchronously, even though the promise resolves without delay. The difference with setTimeout is that the engine will place the promise callback in another queue — the job queue (microtask queue), where it will wait for its turn to be executed. Therefore, the next number that enters the console is 5.
• What has more priority — microtask queue or macrotask queue or in other words — promises or setTimeout?
• Microtasks (promises) have a higher priority than macrotasks (setTimeout), so the next number in the console will be 4 and the last — 1.

Analyzing the responses, we can conclude that the majority of respondents were mistaken in their assumption that the executor function, which was passed to the Promise constructor as an argument, is called asynchronously (44% voted for this option).

It was the simplest challenge that can be found in an interview on the Event Loop topic. In another blog post, we give examples of more complex challenges that even experienced seniors cannot cope with:

Understanding the browser’s Event Loop for building high-performance web applications. Part 1.

Context.

Questions about context can catch up even experienced developers. For example, only 29% of developers solved this knotty but essentially simple task.

Quiz №1. 29% of correct answers

Try yourself and read the explanation.

Explanation.

The value of this is set at the time the function is called.

In the example, the obj.foo function is passed as an argument to another callFoo function, which calls it without context.

In normal mode, when there is no execution context and the code is running in the browser environment, this refers to the window object, in strict mode it is undefined.

The correct answer is undefined.

Quiz №2. 28% of correct answers

Another common interview question is the value of this inside an arrow function.

Try yourself and read the explanation.

Explanation.

Arrow functions don’t have their own this. Instead this inside an arrow function’s body points to the this value into the scope the arrow function is defined within.

Our function is defined in the global scope.

this in global scope refers to the global object (even in strict mode). Therefore the answer is 10.

Arrow functions.

An experienced interviewer (aka devil) might ask about arrow functions in a different context as well. For example, only 28% answered the following question.

Quiz №1. 28% of correct answers

Try yourself and read the explanation.

Explanation.

Arrow functions do not have their own arguments object. Instead, the arguments is a reference to the arguments of the enclosing scope.

Therefore arguments[0] refers to the coef argument and the result of the quiz is 0.2.

Quiz №2. 39% of correct answers

Another question about arrow functions may look the following way.

Try yourself and read the explanation.

Explanation.

Arrow functions cannot be used as constructors and will throw an error when called with new. They also do not have a prototype property:

TypeError: Cannot set properties of undefined (setting ‘getNum’)

Such questions are rare, but you should be ready for them. View more information about arrow functions on MDN.

Variable scope.

A topic is worth exploring not only because of the popularity across the interviews, but also for practical reasons. If you understand variable scope well, you’ll save a lot of time from debugging code.

Let’s look at some common examples.

Quiz №1. 38% of correct answers

Try yourself and read the explanation.

Explanation.

The place in the scope before the let / const variable’s definition is called a temporary dead zone.

If we try to access let / const variables before they are defined, a reference error will be thrown.

To easily remember how a language works, it’s helpful to understand why it works the way it does (so simple, ha?!).

This behavior was chosen because of the const variables. When accessing a var variable before it is defined, we get undefined. This would be unacceptable for const variables, because then it would not be a constant.

The behavior for let variables was done in an analogous way so that you can easily switch between these two types of variables.

Returning to our example.

Because the function call is above the definition of the bar variable, the variable is in a temporary dead zone.

The code throws an error:

ReferenceError: Cannot access ‘bar’ before initialization

Quiz №2. 33% of correct answers

Try yourself and read the explanation.

Explanation.

In named function expressions, the name is local only to the function body and is not available from outside. So foo doesn’t exist in the global scope.

The typeof operator returns undefined for not defined variables.

Quiz №3. 36% of correct answers

The following example is not recommended for use in real life, but you should know how this code will work at least in order to satisfy the interest of the interviewer.

Try yourself and read the explanation.

Explanation.

For a function that has complex parameters (destructuring, default values), the list of parameters is enclosed in its own scope.

Therefore, creating the bar variable in the function body does not affect the variable of the same name in the parameter list, and the getBar() function gets bar from its parameters via a closure.

Generally speaking, we have noticed despite the fact that ES6 has been released for more than 7 years ago, its features remain poorly understood by developers. Of course, everyone knows the syntax of features in this release, but only a few understand it deeper.

Don’t miss our next article on ES6 features.

ES6 modules.

If you are an interviewer and for some reason you don’t like the candidate, the modules will definitely help you to fail anybody.

For the purposes of this article, we have chosen one of the easiest tasks on this topic. But trust us, ES6 modules are way more complex.

We have collected 13 quizzes on the topic of modules that cover all the most complex and little-known aspects of this topic. If you can correctly answer (and explain your answer to) at least half of these quizzes, you are already a superhero. Check yourself:

50 shades of ES6 modules

Quiz №1. 41% of correct answers

index.js

helper.js

Try yourself and read the explanation.

Explanation.

Imports are hoisted.

Hoisting is a mechanism in JS where variables and function declarations are moved to the top of their scope before the code is executed.

All dependencies will be loaded before the code runs.

So, the answer is: helper.js index.js 3

Hoisting.

Another popular interview topic is hoisting.

Quiz №1. 40% of correct answers

Despite the fact that the chosen quiz is out of touch with reality, it perfectly explains the mechanism of hoisting. If you understand how this code works, you shouldn’t have any problems with almost all other hoisting questions.

Try yourself and read the explanation.

Explanation.

Function and variable declarations are placed at the top of their scope, and the initialization of variables occurs at the time of script execution.

Repeated declarations of a variable with the same name are skipped.

Functions are always hoisted first. In whatever order the declarations of a function and a variable with the same name occur in your code, the function takes precedence, because it rises higher.

Example 1.

function num() {}
var num;
console.log(typeof num); // function

Example 2.

var num;
function num() {}
console.log(typeof num); // function

Variables are always initialized at the very end.

var num = 8;
function num() {}

will be transformed into:

function num() {}
var num; // repeated declaration is ignored
num = 8;

As a result, num = 8.

Quiz №2. 12% of correct answers

Do you remember we said that modules are hard? Modules plus hosting can blow the mind of any programmer.

index.mjs

module.mjs

Try yourself and read the explanation.

Explanation.

export default function foo() {}

is equal to

function foo() {}
export { foo as default }

And it’s time to remember that functions are hoisted and variable initialization always happens after the function/variable declaration.

After the engine is processed the module code you can imagine it in the following form:

function foo() {}
foo = 25;
export { foo as default }

So the correct answer is number.

Promises

Surprisingly, programmers know the topic of promises better than they think. Interview questions on this topic are usually the most fundamental and most part can handle them. But we still could not bypass it, because neither do the interviewers.

Quiz №1. 46% of correct answers

Try yourself and read the explanation.

Explanation.

Let’s see how this code will be executed step by step.

1. The first then handler throws an error (means — returns rejected promise).

2. The next then handler does not fire because an error was thrown, instead execution moves on to the next catch.

3. The catch handler prints an error and returns an empty promise. The catch handler, like the then handler, always returns a promise.

4. Because the catch handler returned a promise, the next then handler is called and returns a promise with a value of 2.

5. The last then handler is called and prints 2.

In conclusion.

As always, we want to encourage you to keep learning the language you write every day and let’s make IT better!

Subscribe to the telegram-channel to easily pass any JavaScript interview.

Follow us on Medium to not miss new stuff.

Pop into our LinkedIn for other cool things we do.

Share in comments — what was your most difficult JavaScript interview question?