JavaScript Hoisting Interview Questions and Answers

💡 JavaScript Hoisting is a process to add variables declarations and function declarations to the top of memory inside JavaScript Data Structure during compile time.
That data structure is called Lexical Environment which holds data in key-value mapping.

console.log(person);
var person = 'This is var';

// output > undefined

fun();
function fun() {
  console.log('This is fun');
}

// output >  This is fun.

As we know that function declaration is hoisted means these added first in memory that’s why we are able to access them before the actual declaration.

💡 Keep In mind, Function expressions are not hoisted.

printMe();
var printMe  = function() {
	console.log('this is expression')
}

// output > Uncaught TypeError: printMe is not a function

💡 let and const variable

console.log(a);
let a = 10;

output > ReferenceError: Cannot access 'a' before initialization

let b;
console.log(b);
b = 12;

output > undefined

💡 So Question is – are let and const variables not hoisted?

• In JavaScript, All declarations (function, var, let, const, and class) are hoisted, while the var declarations are initialized with undefined, but let and const declarations remain uninitialized.
• let & const only get initialized when an expression is evaluated during runtime by the JavaScript engine.

function foo () {
  console.log(x);
}
let x = 20;
foo(); 

output  >  20  // because let is initialized in window scope.

💡 JavaScript Classes

 let personObj = new Person("JSMount");
 console.log(personObj);

 class Person {
   constructor(name) {
     this.name = name;
   }
 }

 output >  Uncaught ReferenceError: Cannot access 'Person' before initialization

Same as let and const, classes are also hoisted but they remain uninitialized until execution.
So to access the classes, We have to declare them first.

****************************

Let’s see some Console Input Output Programs –

function parent() {
  var hoisted = "'I’m a variable";
  function hoisted() {
    return "I’m a function";
  }
  return hoisted();
}
console.log(parent());

output > Uncaught TypeError: hoisted is not a function

function parent() {
  return hoisted();
  var hoisted = "'I’m a variable";

  function hoisted() {
    return "I’m a function";
  }
}
console.log(parent());

output > "I’m a function";

function parent() {
  var hoisted = "'I’m a variable";
  var hoisted  = function hoisted() {
    return "I’m a function";
  }
  return hoisted();
}
console.log(parent());

output > 'I am a function'

function emp() {
console.log(‘111’);
}
emp();
function emp() {
console.log(‘2’);
}

Output > 2

var emp = function() {
console.log(‘1’);
}
emp();
function emp() {
console.log(‘2’);
}
emp();

output > 
1
1

var x = 5;
console.log(x);
var x;

output > 5

var y = 10;
var y;
console.log(y);

output > 10

var y = 10;
var y = 12;
console.log(y);

output > 12

var z = 21;
let z;
console.log(z);

output > Identifier ‘z’ has already been declared

let y = 12;
console.log(y);
var y = 11;

output > Identifier ‘y’ has already been declared

var a = 5;
console.log(a);
var a = 7;
console.log(a);

output > 
5
7

console.log(y);
y = 15;

output > ReferenceError: y is not defined

var x = 1;
console.log(x, y);
var y;

Output > 1 undefined

var x = 1;
console.log(x, y);
var y;
delete x;
delete y;
console.log(x, y);

output > will be same for both : 1 undefined

x = 1;
console.log(x, y);
var y;
delete x;
delete y;
console.log(x, y);

output >
1
ReferenceError: x is not defined

JavaScript Hoisting Interview Questions

Read more…
https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

JavaScript Top Interview questions & Answers You should know

0

0