What is Hoisting in JavaScript/Jquery

Hoisting is JavaScript's default behavior of moving declarations to the top.

---

JavaScript Declarations are Hoisted

In JavaScript, a variable can be declared after it has been used.

In other words; a variable can be used before it has been declared.

Example 1 gives the same result as Example 2:

Example 1

x = 5; // Assign 5 to x
elem = document.getElementById("demo"); // Find an element elem.innerHTML = x;                     // Display x in the element
var x; // Declare x

Try it Yourself »

output:- 5

Example 2

var x; // Declare xx = 5; // Assign 5 to x
elem = document.getElementById("demo"); // Find an element elem.innerHTML = x;                     // Display x in the element

Try it Yourself »

output:- 5

To understand this, you have to understand the term "hoisting".

Hoisting is JavaScript's default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function).

JavaScript Initializations are Not Hoisted

JavaScript only hoists declarations, not initializations.

Example 1 does not give the same result as Example 2:

Example 1

var x = 5; // Initialize xvar y = 7; // Initialize y
elem = document.getElementById("demo"); // Find an element elem.innerHTML = x + " " + y;           // Display x and y

Try it Yourself »

output:- 57

Example 2

var x = 5; // Initialize x
elem = document.getElementById("demo"); // Find an element elem.innerHTML = x + " " + y;           // Display x and y
var y = 7; // Initialize y

Try it Yourself »

output:- x is 5 and y is undefined

Does it make sense that y is undefined in the last example?

This is because only the declaration (var y), not the initialization (=7) is hoisted to the top.

Because of hoisting, y has been declared before it is used, but because initializations are not hoisted, the value of y is undefined.

Example 2 is the same as writing:

Example

var x = 5; // Initialize xvar y;     // Declare y
elem = document.getElementById("demo"); // Find an element elem.innerHTML = x + " " + y;           // Display x and y
y = 7;    // Assign 7 to y

Try it Yourself »

output:- 5 undefined

---

Declare Your Variables At the Top !

Hoisting is (to many developers) an unknown or overlooked behavior of JavaScript.

If a developer doesn't understand hoisting, programs may contain bugs (errors).

To avoid bugs, always declare all variables at the beginning of every scope.

Since this is how JavaScript interprets the code, it is always a good rule.

JavaScript in strict mode does not allow variables to be used if they are not declared.
Study "use strict" in the next chapter.

Scoping and Hoisting in JavaScript

Scope can be defined as the context in which a variable exists. Scope can be local, or global in JavaScript.

Do you know the value logged on JavaScript console when the following code snippet is run?

The answer here is “The Flash”. This happens due to Function-level scoping in JavaScript on variable declaration (using var keyword). The developers from Java background may find this surprising!

Function-level Scope

In JavaScript, variables declared (using var keyword) are function-level scoped. The block-level scoping with loops and conditionals ( if,for, while, switch blocks) don’t delimit the scope.

Hoisting

In JavaScript, hoisting is a powerful and an expressive feature by which, JavaScript interpreter moves the function and variable declarations to the top of the current referenced scope. The variable declarations and function declarations are hoisted in JavaScript!

The function body is hoisted along with function declaration. In the code snippet, the function declaration is moved to the top of scope through hoisting (above return statement). The equivalent code interpreted would be:

An aside:

The assignment part of variable and function expressions are not hoisted, but only the declarations are!

The equivalent code interpreted would be:

What’s new in ECMAScript 2015 (ES6)?

ECMAScript 2015 introduced keywords: let and const for block-level scoping in JavaScript.

The variables declared with let or const keyword have the block in which they are declared, as well as any continued sub-blocks as their scope.

Hoisting in ES6

In ECMAScript 2015, let and const keyword variable declarations will hoist the variable to top of the block. However, referencing the variable in the block before variable declaration results in ReferenceError . The difference between var/function declarations and let/const declarations is in the initialization portion. The former are initialized with undefined or generator function right when binding is created at top of the scope, while the latter stay uninitialized until let/const statement is run. The variable is called to be in a “temporal dead zone” from start of the block until the declaration is executed.

variable declaration keywords: ‘var’ v/s ‘let’

This happens due to block-level scoping of let variable declaration.

Summary: Hoisting is a very powerful feature in JavaScript language. This provides high flexibility to the language, if used necessarily. Also, a strong understanding of scoping in JavaScript can help us to avoid many common mistakes.