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

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

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

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

Контент

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

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

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

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

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

**ES6 (ECMAScript 2015) це версія стандарту, ухвалена в червні 2015 року, яка кардинально змінила мову.** До неї JavaScript довгі роки не отримував великих оновлень: попередня помітна версія, ES5, вийшла ще у 2009 році. ES6 став тим рубежем, після якого JS перетворився з «мови для браузера» на повноцінну сучасну мову програмування.

## Теорія

### TL;DR
- ES6 приніс сучасний синтаксис: `let` і `const`, стрілкові функції, шаблонні рядки, деструктуризацію, spread і rest, класи.
- Уперше з'явилися офіційні модулі `import` / `export`, до того їх заміняли IIFE, CommonJS, AMD і RequireJS.
- `Promise` зробив асинхронний код лінійним і став фундаментом для `async/await` з ES2017.
- Додалися структури даних `Map`, `Set`, `WeakMap`, `WeakSet` і методи на кшталт `Array.from()` та `Object.assign()`.
- З'явилися `Symbol`, ітератори й генератори, тобто механіка, на якій тримаються `for...of` і сучасна асинхронність.
- Разом це уніфікувало мову для браузера й сервера та відкрило дорогу збирачам, транспіляторам і фреймворкам.

### Швидкий приклад
```javascript
// math.js
export const sum = (a, b) => a + b;

// main.js
import { sum } from './math.js';

const users = [{ name: 'Maria', age: 30 }];
const [{ name, age }] = users;

console.log(`${name} is ${age}, sum = ${sum(2, 3)}`);
```

### Новий синтаксис, наближений до сучасних мов

ES6 додав багато конструкцій, які зробили код зрозумілішим, коротшим і безпечнішим.

| Нововведення | Що робить | Приклад |
| --- | --- | --- |
| `let` / `const` | Блокова область видимості замість `var` | `let x = 10; const y = 20;` |
| Стрілкові функції | Компактний синтаксис, лексичний `this` | `arr.map(x => x * 2)` |
| Шаблонні рядки | Зручна інтерполяція і багаторядковість | `` `Hello, ${name}!` `` |
| Деструктуризація | Просте витягання даних | `const { name, age } = user;` |
| Spread / Rest | Гнучке об'єднання і розділення | `const all = [...arr1, ...arr2];` |
| Класи | Синтаксичний цукор над прототипами | `class User { constructor(name) {} }` |
| Параметри за замовчуванням | Прибрали перевірки на `undefined` | `function f(a, b = 1) {}` |

Окремо варто виділити `let` і `const`: вони прибрали найбільш болючу пастку `var`, коли змінна витікала з блоку, і зламали класичну задачу з `var` у циклі та `setTimeout`. Стрілкові функції зняли потребу в `const self = this` і в `.bind(this)`.

### Модулі import і export

До ES6 у JS не було стандартизованих модулів, доводилося використовувати:

- IIFE, тобто функції, що викликають самі себе,
- або зовнішні системи на кшталт CommonJS (Node.js), AMD чи RequireJS.

ES6 уперше ввів **офіційну систему модулів**:

```javascript
// math.js
export const sum = (a, b) => a + b;

// main.js
import { sum } from './math.js';
```

Це стало основою для сучасних інструментів: Webpack, Rollup, Vite, Parcel, Next.js і так далі. Важлива деталь: модулі ES6 статичні, тобто набір імпортів відомий до виконання. Саме тому збирачі вміють робити tree shaking і викидати невикористаний код, чого CommonJS з його динамічним `require()` не дозволяє.

### Promise і кінець callback hell

До ES6 асинхронний код виглядав жахливо, це називали «callback hell»:

```javascript
getData(function (res) {
  process(res, function (result) {
    save(result, function () {
      console.log('Done');
    });
  });
});
```

ES6 приніс `Promise`, а з ним лінійний і читабельний код:

```javascript
getData()
  .then(process)
  .then(save)
  .then(() => console.log('Done'));
```

Проміси дали також єдиний спосіб обробки помилок через `.catch()` замість окремого аргументу `err` у кожному колбеку. Пізніше, в ES2017, на їхній основі з'явився синтаксис `async/await`, який працює поверх тих самих промісів.

### Об'єкти, масиви, символи, ітератори й генератори

Розширені можливості об'єктів і масивів:

- покращені **літерали об'єктів**: скорочений запис властивостей і методів, обчислювані ключі,
- нові методи `Array.from()`, `Array.of()`, `Object.assign()`,
- нові структури даних `Map`, `Set`, `WeakMap`, `WeakSet`.

```javascript
const obj = { a: 1, b: 2 };
const copy = Object.assign({}, obj);

const key = 'dynamic';
const built = { [key]: 1, copy };
```

Рівнем нижче лежить механіка самої мови:

- `Symbol` це новий примітивний тип даних, зокрема для унікальних ключів і протоколів на кшталт `Symbol.iterator`,
- `Iterator` і `Generator` це основа для `for...of`, `yield` і, зрештою, для `async/await`.

```javascript
function* counter() {
  yield 1;
  yield 2;
  yield 3;
}

for (const num of counter()) console.log(num);
```

### Уніфікація середовищ і підсумок

ES6 зробив мову універсальною: Node.js, браузери й фронтенд-фреймворки почали говорити однією мовою, з'явилися стандартизовані збирачі, транспілятори (Babel) і фреймворки (React, Vue, Angular), які спираються на модулі й класи зі стандарту.

| Причина | Коротко |
| --- | --- |
| Новий сучасний синтаксис | Зробив JS зручним і безпечнішим |
| Модулі | Навели лад у структурі проєктів |
| Асинхронність через `Promise` | Прибрала callback hell |
| Нові структури даних | Підвищили ефективність і виразність |
| Уніфікація середовищ | JS став серйозною мовою і на фронтенді, і на бекенді |

Простіше кажучи: до ES6 JavaScript сприймали як «іграшку для браузера», після ES6 це сучасна, потужна й зріла мова, що стоїть в одному ряду з Python, Java і C#.

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

- **Вважати, що `let` і `const` не мають hoisting.** Вони теж підіймаються, але потрапляють у temporal dead zone, тому звернення до них до оголошення кидає `ReferenceError`.
- **Плутати `const` з незмінністю.** `const` забороняє перепризначення, але вміст об'єкта чи масиву змінювати можна; для незмінності потрібен `Object.freeze()` або структурне копіювання.
- **Використовувати стрілкову функцію як метод об'єкта чи конструктор.** У неї немає власного `this`, `arguments` і `prototype`, тому `new` з нею не працює.
- **Плутати модулі ES6 з CommonJS.** `import` статичний і асинхронний, `require()` синхронний; змішування двох систем в одному файлі дає помилки збірки.
- **Думати, що клас це нова модель успадкування.** `class` це синтаксичний цукор над прототипами, під ним та сама прототипна модель.
- **Вважати, що `Promise` робить код паралельним.** Він лише впорядковує асинхронність; для одночасних операцій потрібен `Promise.all()` чи `Promise.allSettled()`.

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

Для рев’юера

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

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