JavaScript hoisting moves declarations, not initializations, to the top of their scope during compilation. 1. Only declarations are hoisted—assignments stay in place, so console.log(name); var name = "Alice"; logs undefined because name is declared but not yet assigned. 2. Function declarations are fully hoisted and can be called before definition, but function expressions (including arrow functions) follow variable hoisting rules and result in errors if called before assignment. 3. let and const are hoisted but remain uninitialized in the Temporal Dead Zone until their declaration line, causing a ReferenceError if accessed earlier. 4. During hoisting, function declarations take precedence over var, and later assignments can overwrite previously hoisted functions, leading to unpredictable behavior if names are reused. 5. Best practices include declaring all variables and functions at the top of their scope, using let and const over var, initializing variables at declaration, avoiding name collisions, and writing code that does not depend on hoisting behavior, as declarations rise but values stay put.

JavaScript Hoisting in Depth

Hoisting is one of those JavaScript behaviors that often confuses developers, especially beginners. At its core, hoisting is JavaScript’s mechanism for moving variable and function declarations to the top of their scope during the compilation phase, before the code is executed. But it’s not as simple as just “moving code up” — the details matter, and different types of declarations behave differently.

Let’s break it down clearly.

1. What Actually Gets Hoisted?

Only declarations are hoisted — not initializations or assignments.

When JavaScript parses your code, it first scans for variable and function declarations and sets up memory space for them. This happens in the creation phase of the execution context (global or function). But the actual assignment (the value) stays exactly where you wrote it.

Example with var:

console.log(name); // undefined
var name = "Alice";

Behind the scenes, this is how JavaScript interprets it:

var name;           // declaration hoisted, value is undefined
console.log(name);  // undefined
name = "Alice";     // assignment happens here

So the variable name is hoisted, but its value is not set until the assignment line.

2. Function Hoisting: Declarations vs Expressions

Functions behave differently depending on how they’re defined.

Function Declarations – Fully Hoisted

sayHello(); // "Hello!"
function sayHello() {
  console.log("Hello!");
}

? This works because the entire function (declaration and body) is hoisted to the top.

Function Expressions – Only the Variable Is Hoisted

sayHi(); // TypeError: sayHi is not a function
var sayHi = function() {
  console.log("Hi!");
};

Why? Because this is treated like a var declaration:

var sayHi;        // hoisted, value is undefined
sayHi();          // fails: can't call undefined
sayHi = function() { ... };

Arrow functions behave the same way since they’re also function expressions:

greet(); // Cannot access 'greet' before initialization
const greet = () => console.log("Hey");

3. let and const: The Temporal Dead Zone (TDZ)

ES6 introduced let and const, which are hoisted but not initialized. Accessing them before declaration results in a ReferenceError.

console.log(age); // ReferenceError: Cannot access 'age' before initialization
let age = 25;

This period between the start of the scope and the actual declaration is called the Temporal Dead Zone (TDZ).

• let and const are hoisted (memory is reserved), but you can’t access them until the line where they’re declared.
• const has the same hoisting behavior, but also requires immediate initialization.

? Rule of thumb: Always declare your let and const at the top of their scope to avoid TDZ issues.

4. function vs var vs let/const: Hoisting Order

When multiple declarations exist, JavaScript processes them in a specific order during hoisting:

1. Function declarations are hoisted first and take precedence.
2. Then var declarations (but not assignments).
3. let and const are hoisted but stay uninitialized until declaration.

Example:

console.log(foo()); // "I’m a function!"

var foo = "I’m a string";
function foo() { return "I’m a function!"; }
var foo = "Now I’m a string again";

What happens?

• The function foo() is hoisted first and overwrites any var declaration at that point.
• Then var foo is processed, but since foo already exists as a function, it doesn’t re-declare.
• The assignment var foo = "I’m a string" runs later, but only after the function has already been created.

So the function wins initially, but later assignments can overwrite it:

foo(); // "I'm a function!"
foo = "Now I'm a string"; // overwrites the function

?? This is why redeclaring variables with the same name is dangerous and should be avoided.

5. Key Takeaways and Best Practices

Here’s what you should remember:

• ? All declarations (var, let, const, function) are hoisted.
• ? Initializations are not hoisted.
• ? var is hoisted and initialized with undefined.
• ? let and const are hoisted but remain in the Temporal Dead Zone until declared.
• ? Function declarations are fully hoisted; function expressions follow variable hoisting rules.
• ?? Avoid redeclaring variables or mixing function and variable names.

Best Practices:

• Declare variables and functions at the top of their scope.
• Use let and const instead of var to avoid confusion.
• Initialize variables when you declare them.
• Don’t rely on hoisting — write code that reads top-to-bottom.

Hoisting isn’t magic — it’s just how JavaScript’s engine prepares your code. Understanding it helps you avoid bugs and write more predictable code.

Basically: declarations rise, values stay put.

The above is the detailed content of JavaScript Hoisting in Depth. For more information, please follow other related articles on the PHP Chinese website!