Scopes Hoisting Closures | Tricky Interview questions

The following will be a short explanation, along with some solutions, of popular JavaScript questions that tends to get asked in developer interviews. In this post we'll be taking a look at some
tricky questions in the topic of scopes hoisting and closures in JavaScript.

So before we start lets just get an overview of these terms.

• Scope is determining where variables, functions, and objects are accessible in your code during run-time.
• Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.
• Closure gives you access to an outer function's scope from an inner function.

Question 1

var variable = 10;
(()=>{
   console.log(variable);
   var variable = 20;
   console.log(variable);
})();

can you guess the output ? to help you the output is one of these.

• 10 20
• undefined 20
• 20 20

the correct answer is undefined 20 because of something called hoisting.
so javascript views the above snippet as something as follows:

var variable = 10;
(()=>{
   var variable;
   console.log(variable);   // undefined
   variable = 20;
   console.log(variable);   // 20
})();

javascript leaves the variable assignment ( variable = 20 ) as is and takes the variable declaration ( var variable; ) to the top of the "function scope".
hence the variable is never initialized before the first console log.

So a quick backstory until ES2015 or ES6 variables couldn't be declared using anything other than var. So in the above case if we use let. let's see what we get.

var variable = 10;
(()=>{
   console.log(variable);   // undefined
   let variable = 20;
   console.log(variable);   // 20
})();

this gives us a reference error as "hoisting" does happen in 'let' and 'const' but it's not the same as using 'var'; variables declared using 'let' and 'const' enter something called 'the temporal dead zone' which simply means you cannot use those variables before they're defined, and if anyone's wondering if the top variable is changed to let it'll simply give us an error saying re-declaration of variable.

Question 2

var variable = 10;
(()=>{
   console.log(variable);   // undefined
   variable = 20;
   console.log(variable);   // 20
})();

once again the options are :

• 10 20
• undefined 20
• 20 20

the answer to this one is pretty simple, 10 and 20 this is because of "closures" as the first console log gets its value from the variable described outside its scope.

Now that we covered the basic topics it's time for some advanced questions.

Question 3

var variable = 10;
(()=>{
   console.log(variable);   // undefined
   variable = 20;
   console.log(variable);   // 20
})();
var variable = 30;
console.log(variable);

the options to this questions:

• undefined 20 30
• 10 20 30
• undefined 20 10

The answer to this one is also pretty simple 10 20 30 but here's how javscript interprets the snippet. The first and the last declaration both undergo hoisting but in the same scope.

var variable;
variable = 10;
(()=>{
   console.log(variable);   // undefined
   variable = 20;
   console.log(variable);   // 20
})();
variable = 30;
console.log(variable);

Question 4

var variable = 10;
(()=>{
   console.log(variable);   // undefined
   var variable = 20;
   console.log(variable);   // 20
})();

console.log(variable);
var variable = 30;

This question is definitely one of the trickier question as all the declarations undergo hoisting.
The options are:

• undefined 20 30
• 10 20 30
• undefined 20 10

So I'm sure people are going to have a hard time with this one. So you make think the answer is undefined 20 30 but here's how the program is interpreted:

var variable;
variable = 10;
(()=>{
   var variable;
   console.log(variable);   // undefined
   variable = 20;
   console.log(variable);   // 20
})();
console.log(variable);
variable = 30;

after looking at the above snippet I'm sure its quite evident the answer would be undefined 20 10

Question 4

var variable = 10;
(()=>{
   console.log(variable);   // undefined
   variable = 20;
   console.log(variable);   // 20
})();

console.log(variable);
var variable = 30;

here's a small variation of the above question.
the options are

• undefined 20 30
• undefined 20 10
• undefined 20 20
• 10 20 20
• 10 20 30
• 10 20 10

quite a lot of options this time!
The core idea behind this question is how the first and third declaration undergo hoisting and the second variable because of 'closure' is able to change 'variable'. The answer to this question is 10 20 20

Final question

var variable = 10;
(()=>{
   variable_3 = 35;
   console.log(variable_3);
   var variable_3 = 45;
   variable_2 = 15;
   console.log(variable);   // 20
})();

console.log(variable_2);
console.log(variable_3);
var variable=30;

There are no options for this question, Let me know the answers below :D.