After facing many interviews for the position of the JavaScript developer, 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 Q1. What is hoisting in JavaScript? Explain it with a code snippet? (one of the frequently asked JavaScript interview questions) Ans: . That means if we are using a variable on the top of our code but it is declared on the bottom, then the JS engine will not give any error. For example: Hoisting is the default nature of JavaScript in which declarations of the variables go on the top 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” went on the top. One most important thing to remember is that and don’t support the hoisting. Only variables declared with keyword support hoisting. let const var Q2. Why and were introduced in ES6. Differentiate vs vs ? let const var let const Ans. Before the introduction of and , there was only . It had some constraints because of its functional scope. But after the introduction of and , which both have block scope, those constraints were removed. That’s why they were introduced. Let’s explain their difference: let const var let const const It is a block-scoped static variable. While declaring some variables with , . const initialization is necessary We can’t change its value after initialization. It can’t be re-declared. let It is also a block-scoped variable. Initialization is not necessary in this case. We can change the value of the variable declared with . let Also, we can’t re-declare variables in this case. var has a functional scope by default. var In this case, initialization is not necessary. Yes, we can change the value of the variable declared with . var Yes, we can re-declare the variables in this case. So these are the main 4 differences of , and . var let const Q3. What is a Temporal Dead Zone? Ans. This question is also related to the hoisting and scope of variables. It is related to and . If we want to initialize a variable but it is not declared yet, it is declared in the code below. Then it will give a reference error and that is called a . In this zone, the variable is dead temporarily. For example: let const temporal dead zone a = 4; // here JavaScript engine will give a reference error
// some code
// some code
let a; In the above code, the zone between variable initialization and declaration is called Temporal Dead Zone. Q4. 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); Ans. Output: false false This is because the memory allocation to both of the empty arrays (a and b) is different. (memory locations). This is the reason why the output is false in both cases. In the case of an array, JavaScript doesn’t match the values, but it matches the references Q5. 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');
}); Ans. 2 4 1 3 The reason behind this output is the . The meaning of 0 millisecond in doesn’t mean that callbacks will be executed after 0 milliseconds. task queue for the JavaScript runtime setTimeout() It depends on the total waiting tasks. So the value “2” will be consoled first, then and then the ’s callbacks will run. Promise setTimeout() Q6. 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(); Ans. 10 Yes, the answer will be 10. Here we are calling the . Which is executing the . This is consoling the value of x which is 10 because it is getting the global value of x. In , there is one another x is defined but its scope is only inside the block. That’s why in the global value of x will be taken. a() b() b() b() b() Q7. Write the output of the following code: for(var j = 0; j <=2; j++){ setTimeout(()=>{
console.log(j);
},100)
} Ans. 3 3 3 This output is due to the ***functional scope of *** . If we use here instead of , the output will be: var let var 0 1 2 This is because, in the case of , the complete loop runs 3 times before calls the callback. So when runs the callback it gets the value of every time because has the scope all over the function. Hence it prints the value 3, three times. var setTimeout() setTimeout() i=3 var But in the case of , every time there will be a new value of due to its block scope. Hence, it prints the output as 0,1,2. This is also a reason why and were introduced in ES6. Prior to ES6, such tasks were resolved with the help of . let let let const Closures Q8. What are Closures? Write a simple example of closure. Ans. 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 is available to the inner function even after the execution of the outer function. All is this due to closure. count checkValue() Q9.  What is IIFE in JS and where is it used? Ans. IIFE (pronounced as iffee) means . 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: Immediately Invoked Function Expression (function(){
// some code
// some code
// some code
})(); Or with an arrow function (()=>{
// some code
// some code
// some code
})(); Main use cases of IIFE: 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 in a for loop, then they may give us unexpected results. To solve such issues we enclosed the timer functions in IIFE. setTimeout() Q10. How are arrow functions different from regular functions? (one of the mostly asked JavaScript interview questions) Ans. 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 in both cases and can see the different syntax for both. example() 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 statement. return 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 is also known as the execution context. Its behavior is different for both the regular and arrow functions. this Arrow functions don’t have their own but in the case of regular functions they have their own . The following example will clear everything: this this 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 and output of is but in the case of regular function output is . this this.name undefined Ankit These are the most asked JavaScript interview questions and answers for experienced as well as for fresher candidates. If you have any doubts, or suggestions, or want to correct something in the article, please comment below. Also, if you want more such content, please let me know and I will provide QAs along with suitable programming examples. Thank you and all the best for the interview. About Me I’m a full-stack developer working in an MNC named eClerx. My main skills are ReactJS, Angular and NodeJS. Also published . here

Different

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 Repositories to Help You 10x Your Performance on Technical Interviews

10 Repositories that Will Transform the Way You Approach Technical Interviews

10 GitHub Repositories to Follow

10 Frontend Projects to Take Your Coding Skills to the Next Level

13 Ways to Traverse a Tree: Recursion vs Iteration

10 Repositories to Help You 10x Your Performance on Technical Interviews

10 Repositories that Will Transform the Way You Approach Technical Interviews

10 GitHub Repositories to Follow

10 Frontend Projects to Take Your Coding Skills to the Next Level

13 Ways to Traverse a Tree: Recursion vs Iteration

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps