Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Різниця між FD і FE». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## 1. Function Declaration (оголошення функції)

### Приклад:

```javascript
function sayHello() {
  console.log("Привіт!");
}
```

### Особливості:

- **Хойститься (hoisting)** - тобто функція доступна **до місця її оголошення**.
- Ім'я функції фіксоване і доступне в поточній області видимості.
- Можна викликати **в будь-якому місці файлу або блоку**, навіть до коду оголошення.

### Приклад роботи hoisting:

```javascript
greet(); // працює, хоча функція оголошена нижче

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

**Результат:**

```javascript
Hello!
```

---

## 2. Function Expression (функціональний вираз)

### Приклад:

```javascript
const sayHello = function() {
  console.log("Привіт!");
};
```

або стрілкова версія:

```javascript
const sayHello = () => console.log("Привіт!");
```

### Особливості:

- **Не хойститься як оголошення** - змінна створюється, але функція в ній недоступна до ініціалізації.
- Може бути **анонімною** (без імені) або **іменованою**.
- Вважається виразом, тому викликається **лише після** присвоєння.

### Приклад:

```javascript
sayHello(); // Помилка: sayHello is not a function

const sayHello = function() {
  console.log("Привіт!");
};
```

---

## Ключові відмінності

| Властивість | Function Declaration | Function Expression |
|---|---|---|
| **Hoisting (підняття)** | Доступна до оголошення | Недоступна до присвоєння |
| **Коли створюється** | При ініціалізації області видимості | Під час виконання рядка |
| **Можна викликати до оголошення?** | Так | Ні |
| **Ім'я функції** | Обов'язкове (декларація завжди іменована) | Може бути анонімною або іменованою |
| **Підходить для** | Основних функцій, які потрібні всюди | Локальних, переданих як аргументи, колбеків |
| **Приклад використання** | `function sum(a,b){}` | `const sum = (a,b)=>{}` |

---

## 3. Приклад для наочного порівняння

```javascript
// --- Function Declaration ---
sayHi(); // Працює

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

// --- Function Expression ---
sayBye(); // Помилка

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

---

## Коли що використовувати

**Function Declaration** - коли функція потрібна **глобально** і її можна викликати в будь-якому місці.
**Function Expression / Arrow Function** - коли функція потрібна **локально**, як **обробник**, **колбек**, або частина виразу.

---

## Коротко запам'ятати

> `function declaration` **- створюється заздалегідь (hoisting).**
> `function expression` **- створюється в момент виконання.**

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати338 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.