JavaScript Interview Questions and Answers to Help you Land Your Next Role

After facing many JavaScript developer job interviews, I gathered the following most asked JavaScript interview questions from all of the interviews. Here I will list out all the questions and their answers with explanations. All of these questions are based on my personal interview experiences. I hope it will also help you to crack your interviews.

JavaScript Interview Questions and Answers for Experienced Candidates

What is hoisting in JavaScript? Explain it with a code snippet.

Hoisting is the default nature of JavaScript in which declarations of the variables get moved to the top. That means if we are using a variable near the top of our code, but it is declared at the bottom, then the JS engine will not give an error. For example:

console.log(a);
//some code
//some code
//some code
var a = 1;

The output of the code will be “undefined.” That means it will not show any error because the declaration of variable “a” is moved to the top. One of the most important things to remember is that let and const don’t support hoisting. Only variables declared with keyword var support hoisting.

Why were let and const introduced in ES6? Differentiate var vs let vs const.

Before the introduction of let and const, there was only var. It had some constraints because of its functional scope. But after the introduction of let and const, which both have block scope, those constraints were removed. That’s why they were introduced.

Let’s explain the differences between let and const:

const

1. It is a block-scoped static variable.
2. While declaring some variables with const, initialization is necessary.
3. We can’t change its value after initialization.
4. It can’t be re-declared.

let

1. It is also a block-scoped variable.
2. Initialization is not necessary in this case.
3. We can change the value of the variable declared with let.
4. Also, we can’t re-declare variables in this case.

var

1. var has a functional scope by default.
2. In this case, initialization is not necessary.
3. We can change the value of the variable declared with var.
4. We can re-declare the variables in this case.

So these are the main 4 differences between var, let and const.

What is a temporal dead zone?

This question is also related to the hoisting and scope of variables. It is related to let and const. If we want to initialize a variable but it is not yet declared yet but instead in the code below. Then it will give a reference error and that is called a temporal dead zone.

In this zone, the variable is dead temporarily. For example:

a = 4; // here JavaScript engine will give a reference error
// some code
// some code
let a;

What will be the console output of the following code, and why?

const a = []; //empty array assigned to static variable a
const b = []; //empty array assigned to static variable b
console.log(a === b);
console.log(a == b);

Output:

false

false

This is because the memory allocation to both of the empty arrays (a and b) is different. In the case of an array, JavaScript doesn’t match the values, but it matches the references (memory locations). This is the reason why the output is false in both cases.

What will be the console output of the following code, and why?

setTimeout(() => {
console.log('1');
}, 0); 

console.log('2');

setTimeout(() => {
console.log('3');
}, 100);

Promise.resolve().then(() => {
console.log('4');
});

2

4

1

3

The reason behind this output is the task queue for the JavaScript runtime. The meaning of 0 milliseconds in setTimeout() doesn’t mean that callbacks will be executed after 0 milliseconds.

It depends on the total waiting tasks. So the value “2” will be consoled first, then Promise and then the setTimeout() callbacks will run.

Write down the output of the following code and explain.

let x = 10;
function a() {
let x = 20;
b();
}
function b() {
console.log(x);
}
a();

10

Yes, the answer will be 10. Here we are calling the a(). Which is executing b(). This b() is consoling the value of x, which is 10 because it is getting the global value of x.

In b(),  x is defined but its scope is only inside the block. That’s why in b() the global value of x will be taken.

Write the output of the following code:

for(var j = 0; j <=2; j++){ setTimeout(()=>{
console.log(j);
},100)
}

3

3

3

This output is due to the functional scope of var. If we use let here instead of var, the output will be:

0

1

2

This is because, in the case of var, the complete loop runs 3 times before setTimeout() calls the callback. So when setTimeout() runs the callback, it gets the value of i=3 every time because var has the scope all over the function. Hence it prints the value 3, three times.

But in the case of let, every time, there will be a new value of let due to its block scope. Hence, it prints the output as 0,1,2. This is also a reason why let and const were introduced in ES6. Prior to ES6, such tasks were resolved with the help of Closures.

What are Closures? Write a simple example of closure.

With the help of closure, we can make a global variable => local or private. In other words, you can say that closures are the ability of a function to remember the variables (or functions) declared in the outer scope.

So closures give the ability to a function to remember the outside variables even after the execution of the function. Let us explain with an example.

function closureExample() {
  var count = 1;
  function checkValue() { 
    console.log(count);
  }
  count++;
  return checkValue;
}

var counter = closureExample();
counter(); // result will be 2

So in the above example, you can see that value of the outer variable count is available to the inner function checkValue() even after the execution of the outer function. This is all due to closure.

What is IIFE in JavaScript, and where is it used?

IIFE (pronounced as iffee) means immediately invoked function expression. This is a function expression that is executed as soon as it is created. That means we don’t need to call it after creation, it will be executed by default. The syntax is:

(function(){
// some code
// some code
// some code
})();

Or with an arrow function

(()=>{
// some code
// some code
// some code
})();

Main use cases of IIFEs:

• We can use them if we want to restrict the scope of a variable to local and don’t want to populate the global environment.
• When we use timer functions like setTimeout() in a for loop, then they may give us unexpected results. To solve such issues we enclosed the timer functions in IIFE.

How are arrow functions different from regular functions? (one of the most asked JavaScript interview questions)

Arrow functions were introduced in ES6 and are different from the regular functions in many ways, let us discuss:

1. Different Syntax:

Yes, the first visual difference is their syntax, which is, of course, different.

Regular function:

function example() {
//some code
}

Arrow function:

const example = () => {
//some code
}

Here we created example() in both cases and can see the syntax for both.

2. Implicit Return

Regular functions:

In the case of a regular function, if we want to return from a single statement, the syntax will be:

function example(value) {
return value + 1;
}

So, this is the most common return case we use in JavaScript. But in the case of the Arrow function, it is different.

Arrow function:

In this case, the syntax will be:

const example = (value) => value +1;

Here we omitted the curly braces and it automatically returned the value without a return statement.

3. Constructors

Regular functions:

Regular functions can be used as a constructor. For example:

function Example(param) {
this.param = param;
}
const ins = new Example('one');
console.log(ins instanceof Example)

In the above example, the console.log will be true.

Arrow functions:

In the case of arrow functions, we can’t use the new keyword to create an instance. In this case, JavaScript will show an error.

4. Behavior of this

this is also known as the execution context. Its behavior is different for both the regular and arrow functions.

Arrow functions don’t have their own this but in the case of regular functions, they have their own this. The following example will clear everything:

let obj = {
name: "Ankit",
arrowFunction:() => {
console.log("Hello " + this.name); // this won’t work here
},
regularFunction(){
console.log("Hi " + this.name); // this will work here
}
};
obj.arrowFunction();
obj.regularFunction();

Output:

Hello undefined

Hi Ankit

So in the case of the arrow function, there is no this and output of this.name is undefined but in the case of regular function output is Ankit.

These are the most asked JavaScript interview questions and answers for experienced as well as for newer candidates.

This article was written by Ankit for HackerNoon and was edited and published with permission.