HOISTING in javascript
Tags: javascript, webdev, tutorial, programming
Published: 2023-12-08 14:35:58

**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`

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

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)](https://twitter.com/BrendanEich/status/522395336615428097)

<blockquote class="twitter-tweet"><p lang="en" dir="ltr"><a href="https://twitter.com/aravind030792?ref_src=twsrc%5Etfw">@aravind030792</a> var hoisting was thus unintended consequence of function hoisting, no block scope, JS as a 1995 rush job. ES6 &#39;let&#39; may help.</p>&mdash; BrendanEich (@BrendanEich) <a href="https://twitter.com/BrendanEich/status/522395336615428097?ref_src=twsrc%5Etfw">October 15, 2014</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>




**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.**