General

No Comments

JavaScript Hoisting: A Deep Dive with Code Examples

Understanding JavaScript hoisting is essential for mastering the language and writing efficient, bug-free code. In this article, we will explore what hoisting is, and how it works, and provide clear examples to help you grasp this important concept.

What is Hoisting?

Hoisting is JavaScript’s default behaviour of moving declarations to the top of the current scope (the script or the function). This means that variable and function declarations are processed before any code is executed, allowing them to be used before they are declared.

How Does Hoisting Work?

In JavaScript, hoisting works differently for variables declared with var, let, and const, as well as for function declarations and expressions.

Variable Hoisting with var

Variables declared with var are hoisted to the top of their scope and initialized with undefined.

console.log(a); // Output: undefined
var a = "Rowdy";
console.log(a); // Output: Rowdy

In the above example, the declaration of a is hoisted to the top, but the assignment remains in place. This is why console.log(a) prints undefined before the variable is assigned the value 10.

Function Hoisting

Function declarations are hoisted entirely, meaning both the function name and the body are moved to the top of their scope.

greet(); // Output: "Hello, Rowdy Coder!"
function greet() {
  console.log("Hello, Rowdy Coder!");
}

In this case, the greet function can be called before its declaration because the entire function is hoisted to the top.

Variable Hoisting with let and const

Variables declared with let and const are also hoisted, but unlike var, they are not initialized with undefined. Accessing them before the declaration results in a ReferenceError.

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

const c = 30;
console.log(c); // Output: 30

Temporal Dead Zone

The period between entering the scope and the actual declaration of let and const variables is known as the Temporal Dead Zone (TDZ). Accessing the variable in this zone will result in a ReferenceError.

Function Expressions and Hoisting

Function expressions are not hoisted. Only the variable declaration is hoisted, not the function assignment.

console.log(foo); // Output: undefined
var foo = function() {
  console.log("Hello from Rowdy Coders!");
};
foo(); // Output: "Hello from Rowdy Coders!"

In this example, the variable foo is hoisted and initialized with undefined, but the function assignment remains in place.

Hoisting is a fundamental concept in JavaScript that affects how variables and functions are declared and initialized. Remember that var declarations are hoisted and initialized with undefined, function declarations are fully hoisted, and let and const declarations are hoisted but not initialized, resulting in a ReferenceError if accessed before declaration.

Close Menu