Skip to main content

Hoisting Concept With Examples In JavaScript

by Rustcode
hoisting-concept-with-examples-in-javascript

Hoisting Concept With Examples In JavaScript

Hoisting is a JavaScript mechanism where variable and function declarations are moved to the top of their containing scope before code execution. This means that regardless of where declarations are made in the code, they are treated as if they are declared at the beginning of their scope.

It's important to note that hoisting only moves the declarations, not the initializations or assignments. Therefore, it is considered good practice to declare variables at the beginning of their scope to avoid confusion and potential bugs.

It is recommended to have a clear understanding of hoisting in JavaScript to write code that behaves as expected and avoids unexpected behaviors.

Here are some examples to illustrate hoisting in JavaScript:

Table Of Contents

Variable Hoisting

console.log(x); // Output: undefined
var x = 5;

Output

undefined

In this example, the variable x is declared and assigned the value 5 after the console.log statement. However, due to hoisting, the declaration of x is moved to the top of the scope, and the output is undefined because the variable is hoisted but not yet assigned a value.


console.log(x); // Output: ReferenceError: Cannot access 'x' before initialization
let x = 5;

Output

ReferenceError: Cannot access 'x' before initialization



console.log(x); // Output: SyntaxError: Missing initializer in const declaration
const x = 5;

Output

SyntaxError: Missing initializer in const declaration

Unlike var, let and const declarations are not hoisted in the same way. They undergo a process called "temporal dead zone" (TDZ). The variables are still hoisted, but they are not initialized or accessible until they are encountered in the code. If you try to access a let or const variable before it is initialized, a ReferenceError is thrown.

var x;
x = 5;
console.log(x); // Output: 5

Output

5

Hoisting comes into play with the variable declaration var x;. When JavaScript encounters this declaration, it is hoisted to the top of its scope. This means that, conceptually, it is as if the declaration var x; is moved to the beginning of the current scope.

So, even though the declaration var x; appears after the assignment x = 5; in your code, it is hoisted to the top of the scope before any code execution takes place. As a result, when console.log(x) is reached, the variable x has already been declared, albeit without an assigned value.

The assignment x = 5; sets the value of x to 5. Consequently, when console.log(x) is executed, it outputs 5, which is the assigned value of the variable. Therefore, the output is 5 because of the hoisting mechanism in JavaScript, which moves the variable declaration to the top of its scope, allowing you to assign a value and use it later in your code.

Function Hoisting

helloFunction(); // Output: "Hello, there!"
function helloFunction() {
  console.log("Hello, there!");
}

Output

"Hello, there!"

Here, the function helloFunction() is called before its actual declaration. Despite this, the function declaration is hoisted to the top, and the output is "Hello, there!".

Function Expression Hoisting

helloFunction(); // Throws a TypeError: helloFunction is not a function
var helloFunction = function() {
  console.log("Hello, there!");
}

Output

"TypeError: helloFunction is not a function"

In this case, a function expression is assigned to the variable helloFunction. However, hoisting only applies to the variable declaration, not the assignment. So, when helloFunction() is called before the assignment, it throws a TypeError because helloFunction is initially undefined.

Read Also:

Comments

Post a Comment