Какие ключевые возможности появились в ES6 и последующих версиях?

JuniorJavaScript #javascript #es6

Вопрос

Какие важные изменения принёс ES6 (ECMAScript 2015) и более поздние версии стандарта?

Короткий ответ

ES6 — крупнейшее обновление JavaScript за всю историю языка: блочная область видимости (let/const), классы, модули, стрелочные функции, промисы, деструктуризация и многое другое. Последующие ежегодные версии (ES2016+) добавляют более точечные, но полезные улучшения.

Подробный ответ

Главное в ES6 (2015):

  • let/const — переменные с блочной областью видимости вместо var.
  • Стрелочные функции — короткий синтаксис, лексический this.
  • Шаблонные строки — интерполяция и многострочные строки.
  • Деструктуризация массивов и объектов.
  • class/extends — синтаксис ООП поверх прототипов.
  • Модули (import/export) — стандартная система модулей вместо CommonJS/AMD.
  • Promise — стандартный примитив для асинхронного кода.
  • Map/Set — коллекции для уникальных значений и пар ключ-значение с сохранением порядка вставки и любым типом ключа.

Полезные добавления следующих версий (ES2016+):

  • Array.prototype.includes() (ES2016) — проверка на вхождение элемента без сравнения индексов.
  • Оператор возведения в степень ** (ES2016).
  • Object.values() / Object.entries() (ES2017) — получить значения/пары объекта как массив.
  • Object.fromEntries() (ES2019) — обратная операция: массив пар → объект.
  • Nullish coalescing ?? (ES2020) — в отличие от ||, подставляет значение по умолчанию только для null/undefined, а не для любого falsy (0, '').
  • Optional chaining ?. (ES2020) — безопасный доступ к вложенным свойствам.

Пример

// Nullish coalescing vs ||
const count = 0
console.log(count || 42)  // 42 — 0 это falsy, что не то, что нужно
console.log(count ?? 42)  // 0  — 0 не является null/undefined

// Object.entries / fromEntries
const obj = { a: 1, b: 2 }
const doubled = Object.fromEntries(
  Object.entries(obj).map(([key, value]) => [key, value * 2])
)
// { a: 2, b: 4 }

// Map с любыми типами ключей
const cache = new Map([
  ['foo', 'bar'],
  [someObject, 'значение по объекту-ключу']
])

Дополнительные вопросы

  • Чем Map лучше обычного объекта в роли словаря?
  • В чём разница между ?? и || и когда это действительно важно?
  • Как ES-модули (import/export) соотносятся с CommonJS (require)?