Suggest an edit

Improve this article

Refine the answer for “hoisting”. 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)

## What is hoisting

**Hoisting** is a JavaScript mechanism in which
**variable and function declarations are "moved" to the top of the scope**
(before the code executes).

But it's important: **only declarations** are hoisted, not value assignments.

---

## 1. Function Declaration - can be called before declaration

```javascript
sayHi(); // Works!

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

**Why it works:**

- During the preparation phase, the interpreter finds `function sayHi`
and **creates the function in advance** in memory.
- When the code executes line by line, the function is already available.

**Result:**

```javascript
Hello!
```

---

## 2. Function Expression - does not work

```javascript
sayHi(); // TypeError: sayHi is not a function

const sayHi = function() {
  console.log("Hello!");
};
```

**Why it does not work:**

- `const sayHi` is hoisted (hoisting exists),
but **only the variable declaration itself**, without assigning the function.
- Before the initialization line, `sayHi` is in the **"temporal dead zone" (TDZ)**.
- Accessing it before assignment causes an error.

---

## 3. Arrow Function - the same thing

```javascript
greet(); // TypeError: greet is not a function

const greet = () => console.log("Hello!");
```

**Why:**

- Arrow functions are **function expressions**, just with different syntax.
- So the behavior is the same: the variable is unavailable until it is assigned.

---

## 4. var + function expression - a special case

```javascript
sayHi(); // TypeError: sayHi is not a function

var sayHi = function() {
  console.log("Hello!");
};
```

**What happens:**

- The variable `sayHi` is hoisted (hoisting with `var`),
but it is assigned the value `undefined` before the line with the function executes.
- At the moment of calling `sayHi()`, it is `undefined`, not a function, so it errors.

---

## Quick summary

| Declaration method | Can it be called before declaration? | Why |
|---|---|---|
| `function declaration` | Yes | The function is fully "hoisted" |
| `function expression` (`const`/`let`) | No | The variable is in the TDZ |
| `function expression` (`var`) | No | The variable is `undefined` before assignment |
| `arrow function` | No | Same as function expression |

---

## Visualizing hoisting

```javascript
// Roughly what happens inside the JavaScript engine:
function sayHi() { console.log("Hello!"); } // fully hoisted
var sayBye; // hoisted, but without a value

sayHi(); // works
sayBye(); // error (undefined)

sayBye = function() { console.log("Bye!"); };
```

---

## Summary

> **Function Declaration** functions are created in advance and available in the whole scope.
> **Function Expression** and **Arrow Function** are not - they can only be called **after declaration**.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.