HOISTING in javascript

What is Hoisting?

Hoisting is the behavior in JavaScript where variable and function declarations are lifted to the top of their respective scopes during the compilation phase. This means that, regardless of where the declarations appear in the code, they are effectively moved to the top of their containing scope, making them available for use even before their actual placement in the code.

Take a look at the code below and think what will its output.

console.log(notEqual(1, '1')); // => false
// Function declaration
function notEqual(item1, item2) {
   return item1 === item2;
}

We are able to use notEqual function even before it is declared.This is the magic of hoisting in javascript

The code works nicely because notEqual() is created by a function declaration and hoisted to the top of the scope.

Ok, so lets again look at an example and guess its output.

console.log(name);
var name = "John";

It might surprise you that this code outputs undefined and doesn't fail or throw an error neither it prints the value 'John' assigned to name variable.

Let's understand this behavior of js

Hoisting influences the variable life cycle, which consists of 3 steps:

Declaration - create a new variable.
Initialization - initialize the variable with a value.
Usage - access and use the variable value.

Declaration –> Initialisation/Assignment –> Usage

// Declare
var name;
// Initialize
name = 'John;
// Use
console.log(name); // => John

Hoisting moves the variables and functions declaration to the top of the function scope (or global scope if outside any function).

So in this code console.log(name); var name = "John"
only declaration var name is moved to the top of scope.

var name default value is undefined..

Actually Hoisting was created for functions only and its applicability to var is just the by product.

JS creator Brendan Eich once said on X (the social media platform formerly known as Twitter)

@aravind030792 var hoisting was thus unintended consequence of function hoisting, no block scope, JS as a 1995 rush job. ES6 'let' may help.

— BrendanEich (@BrendanEich) October 15, 2014

Variable hoisting with let and const

Variables declared with let and const are hoisted but not initialized with a default value. Accessing a let or const variable before it is declared will result in a ReferenceError:

function learnHoisting(value) {
  if (value) {
    //temporal dead zone for name

   // Throws ReferenceError: name is not defined
    console.log(name);
    let name = 'foo';
    // end of temporary dead zone for name
    console.log(name); // => 'foo'
    return true;
  }
  return false;
}
learnHoisting(1)

The interpreter still hoists name: the error message tells us that variable is initialized somewhere.

Note - From the declaration statement up to the beginning of the block the let and const variable are in a temporal dead zone (TDZ) and cannot be accessed.