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

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

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

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

Контент

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

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

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

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

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

## 1. `await` працює лише всередині `async`-функцій

`await` - це оператор, який можна використовувати **лише всередині функції, оголошеної з ключовим словом** `async`,
або на **верхньому рівні модуля (top-level await)**.

Якщо використати `await` поза `async`, буде синтаксична помилка:

```javascript
// Помилка
const result = await Promise.resolve(42);
// SyntaxError: await is only valid in async functions
```

---

## 2. Правильний синтаксис зі стрілочною функцією

Щоб використовувати `await`, потрібно зробити стрілочну функцію **асинхронною**:

```javascript
const fetchData = async () => {
  const data = await Promise.resolve('Готово');
  console.log(data);
};

fetchData();
```

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

```javascript
Готово
```

`async` перед стрілочною функцією перетворює її на **асинхронну функцію**,
яка **завжди повертає проміс**.

---

## 3. Якщо не вказати `async` - `await` не спрацює

```javascript
const foo = () => {
  const data = await Promise.resolve('Помилка');
  console.log(data);
};

// SyntaxError: await is only valid in async functions
```

Без `async` - це просто синтаксична помилка.
JS навіть не виконає код, тому що `await` недопустимий у звичайній функції.

---

## 4. Значення, що повертається

`async`-стрілочна функція **завжди повертає проміс**,
навіть якщо в ній немає `await`.

```javascript
const sum = async (a, b) => a + b;

console.log(sum(1, 2)); // Promise { 3 }
```

Це те саме, що:

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

---

## 5. Приклади різних форм запису

**Звичайна стрілочна функція з** `await`**:**

```javascript
const loadUser = async () => {
  const res = await fetch('/api/user');
  return res.json();
};
```

**З параметрами:**

```javascript
const getUser = async (id) => {
  const res = await fetch(`/api/user/${id}`);
  return res.json();
};
```

**Багаторядкова форма:**

```javascript
const processData = async () => {
  const data = await fetch('/api/data');
  const json = await data.json();
  console.log(json);
};
```

**У ланцюжку промісів:**

```javascript
Promise.resolve('A')
  .then(async (x) => {
    const y = await Promise.resolve('B');
    return x + y;
  })
  .then(console.log); // "AB"
```

Тут `then()` приймає **async-стрілочну функцію**,
і `await` усередині неї повністю легальний.

---

## 6. `await` на верхньому рівні (top-level await)

Сучасні JS-модулі (ESM) дозволяють використовувати `await` **поза функціями**,
якщо код у модулі (а не в `<script>` без `type="module"`):

```javascript
// main.js
const data = await fetch('/api/data').then(r => r.json());
console.log(data);
```

Це **top-level await** - працює лише в ESM (або в Node.js з `"type": "module"`).

---

## Проста аналогія

> `async` перед стрілочною функцією - це як **паспорт**,
> який дає дозвіл використовувати `await` усередині.
>
> Без нього `await` просто не знає, куди повертати результат.

---

## ПІДСУМОК

| Питання | Відповідь |
|---|---|
| Чи можна використовувати `await` у стрілочній функції? | Так, якщо вона оголошена як `async` |
| Що якщо немає `async`? | SyntaxError: await is only valid in async functions |
| Що повертає `async`-стрілка? | Завжди `Promise` |
| Чи можна `await` у `.then()` або колбеках? | Так, якщо колбек `async` |
| Чи можна `await` поза функцією? | Тільки з top-level await у модулях |

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

Для рев’юера

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

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