Новые фишки JavaScript: что добавили в ES2023 и ES2024

JavaScript продолжает активно развиваться: каждый год появляются новые методы и синтаксические конструкции, которые упрощают разработку и делают код чище. В этом гайде разберём главные новинки ES2023 и ES2024, которые уже можно использовать в современных браузерах и Node.js. Ты узнаешь про неизменяемые методы массивов, поиск элементов с конца, улучшенную работу с датами и другие полезные фичи.

Новые методы массивов в ES2023

ES2023 (он же ES14) добавил четыре новых метода для массивов и типизированных массивов. Главная их особенность — они не изменяют исходный массив, а возвращают новый. Это делает код предсказуемее и проще для отладки.

toSorted() — сортировка без мутации

Раньше метод sort() сортировал массив на месте. toSorted() возвращает новый отсортированный массив, оставляя оригинал нетронутым:

const numbers = [3, 1, 4, 1, 5];
const sorted = numbers.toSorted();
console.log(sorted); // [1, 1, 3, 4, 5]
console.log(numbers); // [3, 1, 4, 1, 5] — без изменений

// С функцией сравнения
const descending = numbers.toSorted((a, b) => b - a);
console.log(descending); // [5, 4, 3, 1, 1]

toReversed() — разворот без мутации

Аналог reverse(), но возвращает новый массив:

const arr = ['a', 'b', 'c'];
const reversed = arr.toReversed();
console.log(reversed); // ['c', 'b', 'a']
console.log(arr); // ['a', 'b', 'c']

toSpliced() — замена элементов без мутации

Метод toSpliced(start, deleteCount, ...items) работает как splice(), но возвращает новый массив:

const fruits = ['apple', 'banana', 'cherry', 'date'];
const newFruits = fruits.toSpliced(1, 2, 'blueberry', 'cranberry');
console.log(newFruits); // ['apple', 'blueberry', 'cranberry', 'date']
console.log(fruits); // ['apple', 'banana', 'cherry', 'date']

with() — замена элемента по индексу

Заменяет элемент на указанной позиции и возвращает новый массив:

const scores = [10, 20, 30, 40];
const updated = scores.with(2, 35);
console.log(updated); // [10, 20, 35, 40]
console.log(scores); // [10, 20, 30, 40]

findLast() и findLastIndex()

Раньше для поиска элемента с конца массива приходилось копировать массив и разворачивать его. Теперь есть встроенные методы:

const items = [
  { id: 1, value: 'first' },
  { id: 2, value: 'second' },
  { id: 3, value: 'third' },
  { id: 1, value: 'duplicate' }
];

const lastWithId1 = items.findLast(item => item.id === 1);
console.log(lastWithId1); // { id: 1, value: 'duplicate' }

const index = items.findLastIndex(item => item.id === 1);
console.log(index); // 3

Что нового в ES2024

Спецификация ES2024 (ES15) принесла долгожданные улучшения, особенно в работе с датами и строками.

Temporal — современная работа с датами

Temporal — это глобальный объект, который заменяет устаревший Date. Он решает проблемы с мутабельностью, часовыми поясами и парсингом:

// Текущая дата и время
const now = Temporal.Now.plainDateTimeISO();
console.log(now.toString()); // 2024-03-15T10:30:00.123

// Работа с датами без мутации
const date = Temporal.PlainDate.from('2024-03-15');
const nextWeek = date.add({ days: 7 });
console.log(nextWeek.toString()); // 2024-03-22

// Сравнение дат
const date1 = Temporal.PlainDate.from('2024-01-01');
const date2 = Temporal.PlainDate.from('2024-12-31');
console.log(Temporal.PlainDate.compare(date1, date2)); // -1 (date1 раньше)

// Длительность
const duration = Temporal.Duration.from({ hours: 2, minutes: 30 });
console.log(duration.total('minutes')); // 150

Temporal поддерживает разные типы: PlainDate, PlainTime, PlainDateTime, ZonedDateTime для работы с часовыми поясами, Duration и Instant для машинного времени.

Symbol.prototype.description

Раньше получить описание символа можно было только через строковое преобразование. Теперь есть прямое свойство description:

const sym = Symbol('user-id');
console.log(sym.description); // 'user-id'

// Для символов без описания
const emptySym = Symbol();
console.log(emptySym.description); // undefined

Улучшения WeakRef и FinalizationRegistry

ES2024 уточнил поведение WeakRef и FinalizationRegistry в многопоточных средах (Web Workers, Service Workers), сделав их поведение более предсказуемым. Для большинства приложений эти изменения прозрачны, но важны для библиотек, работающих с управлением памятью.

Практические примеры использования

Рассмотрим реальные сценарии, где новые фишки JavaScript упрощают код.

Пример 1. Неизменяемое обновление состояния в Redux/Zustand:

// Раньше приходилось делать копию через spread
const updateTodo = (todos, index, newText) => {
  return todos.map((todo, i) => 
    i === index ? { ...todo, text: newText } : todo
  );
};

// Теперь можно проще
const updateTodo = (todos, index, newText) => {
  return todos.with(index, { ...todos[index], text: newText });
};

Пример 2. Поиск последнего активного элемента:

const events = [
  { date: '2024-01-10', active: false },
  { date: '2024-02-15', active: true },
  { date: '2024-03-01', active: false },
  { date: '2024-03-20', active: true }
];

const lastActive = events.findLast(event => event.active);
console.log(lastActive); // { date: '2024-03-20', active: true }

Пример 3. Сортировка с сохранением исходного порядка:

const users = [
  { name: 'Alice', score: 85 },
  { name: 'Bob', score: 92 },
  { name: 'Charlie', score: 78 }
];

// Раньше приходилось копировать вручную
const sortedCopy = [...users].sort((a, b) => b.score - a.score);

// Теперь встроенный метод
const sortedCopyNew = users.toSorted((a, b) => b.score - a.score);

Поддержка браузерами и Node.js

Новые методы массивов ES2023 поддерживаются во всех современных браузерах (Chrome 110+, Firefox 115+, Safari 16+, Edge 110+). Node.js поддерживает их с версии 20.0.0. Temporal в ES2024 пока реализован не во всех средах — используй полифил @js-temporal/polyfill для продакшена.

Рекомендуемая стратегия:

• Для новых проектов — сразу используй фичи, добавляя полифилы через Babel или core-js.
• Для существующих проектов — проверь целевую среду выполнения. Если поддерживаются только Node.js 18 и ниже, используй методы с полифилами или транспиляцию.
• Symbol.prototype.description доступен с Node.js 14, Chrome 80, Firefox 90, Safari 14 — можно использовать без опасений.

Заключение

Новые фишки JavaScript ES2023 и ES2024 делают язык удобнее и безопаснее. Ключевые методы массивов без мутации (toSorted, toReversed, toSpliced, with) помогают писать предсказуемый код и отлично сочетаются с иммутабельными состояниями в React/Vue. findLast и findLastIndex решают давнюю проблему поиска с конца. Temporal наконец-то даёт современный API для работы с датами. Начни применять эти возможности уже сегодня — они повысят читаемость и надёжность твоего кода.