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

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

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

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

Контент

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

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

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

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

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

**Функція без стану (stateless function) - це функція, яка нічого не пам'ятає про попередні виклики й не залежить від зовнішніх змін, тому на однакових аргументах завжди дає однаковий результат.** Кожен її виклик є самодостатнім обчисленням, а не кроком у якійсь прихованій послідовності.

## Теорія

### TL;DR

- Stateless-функція не зберігає й не змінює внутрішні дані між викликами.
- У неї немає власної пам'яті: жодних лічильників, кешів чи прапорців.
- Вона не використовує глобальні змінні й нічого не змінює назовні (DOM, файли, мережеві запити).
- Результат повністю визначається вхідними аргументами.
- Протилежність - stateful-функція, результат якої залежить від попередніх викликів.
- Такі функції легко тестувати, кешувати й виконувати паралельно.

### Швидкий приклад

```javascript
function sum(a, b) {
  return a + b;
}

console.log(sum(2, 3)); // 5
console.log(sum(2, 3)); // 5, always the same
```

Кожен виклик повністю незалежний, результат залежить лише від вхідних даних.

### Що означає «без стану»

Функція без стану не запам'ятовує нічого про минулі виклики й не залежить від зовнішніх змін. Тобто така функція:

- не має внутрішньої пам'яті (жодних лічильників, кешів, прапорців);
- не використовує глобальні змінні;
- не змінює нічого зовні: DOM, файли, мережеві запити.

Через це її поведінку можна описати одним рядком: «ті самі аргументи - той самий результат».

### Stateless проти stateful

Функція зі станом «пам'ятає» попередній виклик, тому два однакові виклики дають різні відповіді:

```javascript
let counter = 0;

function increment() {
  counter++;
  return counter;
}

increment(); // 1
increment(); // 2, the result depends on the previous call
```

Тут функція тримає стан у змінній `counter`, тому вона stateful. Щоб зробити її stateless, стан передають аргументом і повертають нове значення:

```javascript
function nextCount(current) {
  return current + 1;
}

nextCount(0); // 1
nextCount(0); // 1, the same input always gives the same output
```

### Де важливі stateless-функції

- У функціональному програмуванні: це основа чистих обчислень і композиції функцій.
- У React: так звані stateless-компоненти просто відображають отримані дані й не мають власного стану.
- У тестованому коді: результат передбачуваний і не залежить від оточення, тому тест не потребує складної підготовки.
- У розподілених системах: будь-який екземпляр сервісу може обробити запит, бо між викликами нічого не зберігається.

| Ознака | Stateless-функція |
| --- | --- |
| Зберігає дані між викликами | Ні |
| Змінює зовнішній стан | Ні |
| Залежить тільки від аргументів | Так |
| Завжди повертає те саме на однаковому вводі | Так |
| Приклад | `Math.max(a, b)` |

Одним реченням: функція без стану не має «пам'яті» про попередні виклики, і її результат залежить лише від вхідних даних, а не від контексту.

### Типові помилки

- Плутати відсутність стану з відсутністю змінних: локальні змінні всередині функції це не стан, бо вони живуть лише один виклик.
- Тримати лічильник або кеш у замиканні й вважати функцію stateless: closure зберігає стан між викликами так само, як глобальна змінна.
- Забувати про читання зовнішніх даних: виклик `Date.now()` чи `Math.random()` усередині вже робить результат непередбачуваним.
- Мутувати переданий об'єкт: формально стан не зберігається у функції, але вона змінює дані виклику-власника.
- Вважати, що stateless завжди краще: стан десь потрібен, питання лише в тому, щоб він був явним і зосередженим в одному місці.

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

Для рев’юера

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

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