Hoisting demystified with popular interview questions

In this post, we will learn about one of the most frequently asked questions in an interview, hoisting in javascript. We should have a better understanding of Scopes and Execution Context in javascript to understand the concept of hoisting. You can refer to my previous article Scope and Execution Context in Javascript for better understanding of these concepts.

Let’s cover some important points before discussing some popular interview questions related to hoisting:

• JavaScript only hoists declarations, not the initialization.
• sequence in which variable declaration and initalisation occurs: Declaration –> Initialization/Assignment –> Usage

// Variable lifecycle
let a;        // Declaration
a = 100;      // Assignment
console.log(a);  // Usage

• All undeclared variables are global variables.
• Just like var, let and constdeclarations are hoisted to the top. Unlike var which is initialized as undefined, the let and constkeyword is not initialized. So if you try to use a let variable before declaration, you'll get a Reference Error.
• function declarations hoist the function definitions.Hence, functions declaration can be used before they are declared.

functionDeclaration() // output: "Hoisted"
function functionDeclaration() {
  console.log('Hoisted')
}

Javascript interpreter interprets the above code as:

// Hoisted code
function functionDeclaration() {
  console.log('Hoisted')
}
// Rest of the code
functionDeclaration() // output: "Hoisted"

• Function expressions in JavaScript are not hoisted.

functionExpression() // TypeError: functionExpression is not a function
const functionExpression = function() {
  console.log('Not Hoisted')
}

Hence, you cannot use function expressions before defining them.

Now on to some interview questions!

Hoisting Interview Questions

Q1

console.log(y);
y = 1;
-------------------
console.log(y);
var y = 2;
-------------------
y = 3;
console.log(y);
var y;

Output: 🤔
ReferenceError: y is not defined
undefined
3

Explanation: Behind the scene, JavaScript interprets above code as:

console.log(y); // ReferenceError: y is not defined
y = 1;
-------------------
var y = undefined;
console.log(y); //undefined
y = 2;
-------------------
var y = undefined;
y = 3;
console.log(y); // 3

Q2

var a = 1;
console.log(a);
var a = 2;
console.log(a);

Output: 🤔
1
2

Explanation: Behind the scene, JavaScript interprets above code as:

var a = undefined;
a = 1;
console.log(a); //1
a = 2;
console.log(a); // 2

Q3

var z = 1;
let z;
console.log(z);
-----------------
console.log(z);
let z = 1;

Output: 🤔
Identifier ‘z’ has already been declared
Cannot access ‘z’ before initialization

Explanation: Behind the scene, JavaScript interprets above code as:

var z = 1;
let z; //Identifier ‘z’ has already been declared
console.log(z);
-----------------
let z;
console.log(z); // Cannot access ‘z’ before initialization
z = 1;

Q4

function hoistExample() {
var a;
console.log("Before: ", a);  
a = 10;  
console.log("After: ", a);  
}
hoistExample();

Output: 🤔
Undefined
10

Explanation: Behind the scene, JavaScript interprets above code as:

function hoistingExample() {
var a = undefined;
console.log("Before: ", a);  // undefined  
a = 10;  
console.log("After: ", a);  // 10
}
hoistingExample();

Q5

function hoistingExample() {  
console.log("Value of a in local scope: ", a); 
} 
console.log("Value of a in global scope: ", a);
var a = 1;
hoistingExample();

Output: 🤔
Value of a in global scope: Undefined
Value of a in local scope: 1

Explanation: Behind the scene, JavaScript interprets above code as:

var a = undefined;
function hoistingExample() {  
console.log("Value of a in local scope: ", a); // Value of a in local scope: 1
} 
console.log("Value of a in global scope: ", a); // Value of a in global scope: Undefined
a = 1;
hoistingExample();

Q6

function hoistingExample() {   
a = 1;
} 
hoistingExample();
console.log(a);
----------------------------
function hoistingExample() {   
var a = 1;
} 
hoistingExample();
console.log(a);

Output: 🤔
1
ReferenceError: a is not defined

Explanation: Behind the scene, JavaScript interprets above code as:

var a = undefined;
function hoistingExample() {   
a = 1;
} 
hoistingExample();
console.log(a); // 1,  Variables which are assigned without a var declaration are considered to be global variables
----------------------------
function hoistingExample() {  
var a = undefined; 
a = 1;
} 
hoistingExample();
console.log(a); // ReferenceError: a is not defined, var a is defined inside local scope.

Q7

function a(){
  console.log("1")
}
a();
function a(){
  console.log("2")
}
a();

Output: 🤔
2
2

Explanation: Behind the scene, JavaScript interprets above code as:

function a(){
  console.log("1")
}
function a(){
  console.log("2")
}
a(); // 2
a(); // 2

Q8

var test = 1;
function functionHoisting() {
  test = 10;
  return;
function test() {}
}
functionHoisting();
console.log(test);

Output: 🤔
1

Explanation: Behind the scene, JavaScript interprets above code as:

var test = 1;
function functionHoisting() {
//function Hoisting, test is re-defined and re-declared
  function test() {}
  test = 10;
  return;
}
functionHoisting();
console.log(test); // 1

Q9

alert(a());
function a() {
  var b = function() {
    return 3;
  };
  return b();
  var b = function() {
    return 8;
  };
}
-------------------------
alert(a());
function a() {
  function b() {
    return 3;
  }
  return b();
  function b() {
    return 8;
  }
}

Output: 🤔
3
8

Explanation: Behind the scene, JavaScript interprets above code as:

function a() {
  var b = function() {
    return 3;
  };
  return b();
  var b = function() {
    return 8;
  };
}
alert(a()); // 3
-------------------------
function a() {
  function b() {
    return 3;
  } 
//Function Hoisting
  function b() {
    return 8;
  }
  return b();
}
alert(a()); // 8

This concludes JavaScript Hoisting from my side. Thanks for reading. Please 👏 if you liked this article.

Explore the Series:

• ES6 -Difference between Var, Let and Const with Examples
• Scope and Execution Context in Javascript
• Javascript Closures

If you have any doubt, feel free to comment below! I’d be happy to help😃