Hoisting in JavaScript.

In this brief blog, we will explore the concept of hoisting in JavaScript, including how it affects variable and function declarations, and provide an overview of it.

JavaScript's hoisting feature rearranges declarations, enabling access to variables and functions before formal declaration. Understanding its mechanics is essential for efficient coding.

Hoisting is a JavaScript mechanism where declarations of functions , variables and classes are moved to the top of their scope before code execution.

This allows developers to use functions and variables before they are declared.

While hoisting is indeed a behavior, it's also a part of the language's specification, so calling it a feature is not incorrect.

Lets see some types like how hoisting is done for different declarations :

Variables Declared with VAR keyword

• Hoisted to top and the value will be undefined.

• Accessing before declaration or initilization returns undefined.

• You can access the variable but not the value of it because the execution context declares the all variable in the scope with var then assign there value as undefined.

• Despite hoisting, the assignment occurs at the original position.

• That means if you do this var a = 10; also results the same as var a;

• Hence the variable declaration is hoisted to the top of its scope, but the assignment remains at its original position in the code.

•       console.log(bankai) // undefined
        var bankai = "sword release"
  

Variables Declared with CONST / LET keyword

• They are not there in the creation phase of execution context.

• They go to the temporal dead zone.

  • Temporal Dead Zone: It is a delay or time between the creation and execution phase of a variable declared with let or const.

  • During this time, the variable is in an inaccessible state, and attempting to access it will result in a Reference Error.

    

    

Functions :

Unlike variables, the value is not undefined; rather, it is the body of the function. Which also contains parameters like arguments, length, and name.

in the above example we can see that the global scope contains all the details of function and we invoked the function before its declaration.

I call this Full hoisting.

The function declaration is hoisted to the top of its scope, allowing it to be invoked from anywhere within that scope, even before its actual placement in the code.

Arrow Functions / Function expressions :

Arrow functions and function expressions are hoisted like variables declared with let, const, and var.

Function Expressions with var

When a function expression is declared with var, attempting to invoke it before the declaration will result in a TypeError. This is because the variable is hoisted and initialized to undefined, but the assignment (the actual function) is not hoisted.

Function Expressions with let and const

For function expressions declared with let or const, attempting to invoke them before the declaration will result in a ReferenceError. This happens because let and const are not initialized until their declaration is evaluated, leading to the Temporal Dead Zone (TDZ).

javascriptCopy codeconsole.log(greet()); // ReferenceError: Cannot access 'greet' before initialization
let greet = function() {
  console.log('Hello!');
};

There is no such thing as greet until the execution context evaluates the greet declaration. Until then, the variable is in an uninitialized state, and the JavaScript engine doesn't know about greet. So, it throws a ReferenceError.

Understanding hoisting is important for writing good JavaScript code. By knowing how JavaScript handles declarations, you can avoid common mistakes and write more predictable code. Always declare and initialize your variables and functions before using them to keep your code clear and easy to maintain.