ES6+: обзор нововведений по годам

ES6+ — все версии ECMAScript начиная с 2015 года, каждый год добавляющие новые возможности в JavaScript: от let/const и классов (ES2015) до structuredClone и at (ES2022+).

Зачем нужно

Знание того, какие возможности появились в каком году, помогает понять, что требует полифиллов для старых браузеров, а что доступно нативно. ES6 изменил стиль написания JS-кода фундаментально: стрелочные функции, деструктуризация, Promise, классы — всё это стало стандартом. Последующие версии добавляют точечные улучшения, которые важно знать для современного кода.

Где используется

  • Оценка совместимости: caniuse.com / MDN «Browser compatibility»
  • Настройка Babel/TypeScript target: какие возможности транспилировать
  • Код-ревью: использование современного синтаксиса вместо устаревшего
  • Собеседования: «Назовите нововведения ES6» — частый вопрос
  • Выбор полифиллов: core-js, @babel/polyfill

Основной контент

ES2015 (ES6) — революция

// let и const (блочная область видимости)
let x = 1;
const PI = 3.14159;

// Стрелочные функции
const add = (a, b) => a + b;

// Template literals
const greeting = `Привет, ${name}!`;

// Деструктуризация
const { name, age } = user;
const [first, ...rest] = array;

// Параметры по умолчанию
function greet(name = 'Гость') { return `Привет, ${name}`; }

// Rest/Spread
const sum = (...nums) => nums.reduce((a, b) => a + b, 0);
const merged = { ...obj1, ...obj2 };

// Классы
class Animal {
  constructor(name) { this.name = name; }
  speak { return `${this.name} говорит`; }
}

// Promise
fetch('/api').then(r => r.json()).then(data => console.log(data));

// Модули
import { func } from './module.js';
export const value = 42;

// Map, Set, WeakMap, WeakSet
const map = new Map([['key', 'value']]);
const set = new Set([1, 2, 3]);

// Symbol
const id = Symbol('id');

// for...of
for (const item of iterable) { }

// Генераторы
function* gen { yield 1; yield 2; }

ES2016–ES2018

// ES2016
[1, 2, 3].includes(2); // true — вместо indexOf
2 ** 10; // 1024 — возведение в степень

// ES2017
async function load() {
  const data = await fetch('/api').then(r => r.json());
  return data;
}
Object.entries({ a: 1 }); // [['a', 1]]
Object.values({ a: 1 });  // [1]
'hello'.padStart(10, '0'); // '00000hello'

// ES2018
// Spread для объектов (уже с ES2015 в массивах)
const copy = { ...original };

// Асинхронная итерация
for await (const chunk of asyncGenerator) { }

// Promise.finally
fetch('/api').then(handle).catch(handleError).finally(cleanup);

// RegExp: именованные группы
const { year, month } = '2026-04-10'.match(/(?<year>\d{4})-(?<month>\d{2})/).groups;

ES2019–ES2021

// ES2019
[1, [2, [3]]].flat(Infinity);           // [1, 2, 3]
['a', 'b'].flatMap(x => [x, x]);        // ['a', 'a', 'b', 'b']
Object.fromEntries([['a', 1], ['b', 2]]); // { a: 1, b: 2 }
'  hello  '.trimStart();                 // 'hello  '

// ES2020
const val = obj?.nested?.value;    // Optional chaining
const result = val ?? 'default';   // Nullish coalescing
const bigNum = 9007199254740993n;  // BigInt
const module = await import('./module.js'); // Dynamic import
Promise.allSettled([p1, p2, p3]);  // все результаты, даже если некоторые failed

// ES2021
'hello world hello'.replaceAll('hello', 'hi'); // 'hi world hi'
count ??= 0;   // логическое присваивание
items &&= filterItems(items);
Promise.any([p1, p2, p3]); // первый успешный
const million = 1_000_000; // numeric separators

ES2022–ES2023

// ES2022
class Counter {
  #count = 0;              // приватные поля
  get { return this.#count; }
  increment { this.#count++; }
}

arr.at(-1);                // последний элемент
Object.hasOwn(obj, 'key'); // вместо hasOwnProperty
const copy = structuredClone(original); // глубокое клонирование

// Top-level await (в модулях)
const data = await fetch('/api').then(r => r.json());

// ES2023
arr.toSorted((a, b) => a - b); // не мутирует
arr.toReversed;               // не мутирует
arr.with(2, 'new');             // заменить элемент по индексу, не мутируя
arr.findLast(x => x > 3);      // поиск с конца

Частые ошибки

  • Путать ES-версию с поддержкой браузерами: ES2022 может не работать в Safari 14 — проверяйте MDN Browser compatibility или caniuse.
  • Использовать var по привычке: let и const — стандарт с ES6, var создаёт проблемы с hoisting и областью видимости.
  • Деструктуризация с undefined: const { a } = undefined — TypeError. Защищайтесь: const { a } = obj ?? {}.
  • ?. не защищает от всех ошибок: null?.method безопасно, но undeclaredVar?.method — ReferenceError.

Связанные темы

Ресурсы

🎓 Источник: 💻 Новое в JavaScript ES.Next, ECMAScript 2020...ES6

  • 📅 2019-12-03 · YouTube
  • Тезисы: обзор по версиям. ES6 — революция: let/const, классы, модули, стрелки, шаблоны, деструктуризация, spread, Map/Set/Symbol/Proxy. ES2016: **, Array.includes. ES2017: async/await, Object.values()/entries. ES2018: Object spread, async iteration. ES2019: flat/flatMap. ES2020: optional chaining, ??, BigInt, dynamic import

🎓 Источник: 💻 Report by 1st year students ES2022 and 2021 features

  • 📅 2022-06-13 · YouTube
  • Тезисы: ES2021: ??=, ||=, &&=, numeric separators (1_000), Promise.any, String.replaceAll. ES2022: top-level await, private class fields #, at, Object.hasOwn, Error.cause, class static blocks

🎓 Источник: 💫 JavaScript 2024 — 2025 українською для початківців

  • 📅 2024-01-02 · YouTube
  • Тезисы: ES2023: immutable Array methods (toSorted, toReversed, toSpliced, with). ES2024: Promise.withResolvers, Object.groupBy, Array.fromAsync