Suggest an edit

Improve this article

Refine the answer for “Hoisting mechanism”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**Hoisting** is a JavaScript mechanism in which **variable and function declarations are effectively "raised" to the top of their scope** before the code runs.

> In simpler terms:
> JavaScript first **scans the entire code**, **registers the declarations**,
> and then starts executing the commands line by line.

---

## Example with `var`

```javascript
console.log(a); // undefined
var a = 10;
console.log(a); // 10
```

Why does it work this way?
Because **during compilation** the engine does this:

```javascript
var a;          // the declaration hoisted
console.log(a); // undefined
a = 10;         // assignment
console.log(a); // 10
```

> In other words, **the declaration (**`var a`**) hoists**,
> but **the assignment (**`= 10`**) does not**.

---

## Example with `let` and `const`

```javascript
console.log(b); // ReferenceError
let b = 20;
```

```javascript
console.log(c); // ReferenceError
const c = 30;
```

Although `let` and `const` **also hoist**, they land in the temporary **dead zone (TDZ - Temporal Dead Zone)**,
the section of code from the start of the scope to the point of actual declaration.
During this time, access to the variable **is forbidden**.

---

## Example with functions

### Function Declaration (hoists completely):

```javascript
sayHi(); // "Hi!"

function sayHi() {
  console.log("Hi!");
}
```

The engine "sees" the entire function declaration before the code runs.
That's why you can call it **before the line where it's defined**.

---

### Function Expression (does NOT hoist completely):

```javascript
sayHello(); // ReferenceError
const sayHello = function() {
  console.log("Hello!");
};
```

> Here, only the **variable declaration** hoists (`const sayHello`),
> but not the function assignment.
> So access is forbidden until initialization (TDZ).

---

## Let's sum up

| What hoists | When it's accessible | Note |
|---|---|---|
| `var` | Immediately, but with value `undefined` | Can lead to bugs |
| `let`, `const` | Only after declaration | Before that: TDZ (ReferenceError) |
| `function declaration` | Always (completely) | Can be called before its definition |
| `function expression` | Like its variable (`let`, `const`, `var`) | Not accessible before initialization |

---

## Analogy

Imagine the interpreter first **builds the building's blueprint (declarations)**,
and then starts **"moving in" (assignments)**.

- Function declarations - like rooms that are already ready to use.
- `var` - rooms with a nameplate, but empty.
- `let` and `const` - rooms that are "closed until opening".

Markdown · drag & drop images · ⌘B / ⌘I shortcuts392 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.