Новые возможности языка

JavaScript развивается каждый год: комитет TC39 утверждает новую версию стандарта ECMAScript, и браузеры добавляют новые возможности. В этом уроке — небольшие новинки, которые делают привычный код короче и понятнее. Все они работают в современных браузерах и в Node.js.

Проверить, поддерживает ли браузер ту или иную возможность, можно на сайте caniuse.com.

Разделители в числах

В длинных числах можно ставить подчёркивания между цифрами — так их легче читать. На значение числа они не влияют:

const salary = 1_250_000;
 
console.log(salary); // 1250000

Метод at

Метод at() возвращает элемент по номеру, как квадратные скобки, но понимает и отрицательные номера: -1 — последний элемент, -2 — предпоследний:

const colors = ['красный', 'зелёный', 'синий'];
 
console.log(colors.at(-1)); // синий

Раньше для этого приходилось писать colors[colors.length - 1]. Метод at() есть и у строк.

Логическое присваивание

Операторы ||=, &&= и ??= присваивают значение только при условии. Чаще всего нужен ??=: он записывает значение, если переменная или свойство равны null или undefined:

const options = { theme: 'dark' };
 
options.theme ??= 'light';
options.language ??= 'ru';
 
console.log(options.theme, options.language); // dark ru

Каждый из трёх операторов — сокращение для более длинной записи:

a ||= b; // a || (a = b)
a &&= b; // a && (a = b)
a ??= b; // a ?? (a = b)

findLast и findLastIndex

Методы find() и findIndex() ищут с начала массива. Их пары findLast() и findLastIndex() ищут с конца — например, последнее событие нужного типа:

const events = [
  { type: 'вход', user: 'Анна' },
  { type: 'вход', user: 'Олег' },
  { type: 'выход', user: 'Анна' },
];
 
const lastLogin = events.findLast((event) => event.type === 'вход');
 
console.log(lastLogin.user); // Олег

Object.groupBy

Object.groupBy() раскладывает элементы массива по группам. Функция возвращает название группы для каждого элемента, а результат — объект, где у каждой группы свой массив:

const products = [
  { title: 'Яблоко', type: 'фрукт' },
  { title: 'Морковь', type: 'овощ' },
  { title: 'Груша', type: 'фрукт' },
];
 
const groups = Object.groupBy(products, (product) => product.type);
 
console.log(groups['фрукт'].length); // 2
console.log(groups['овощ'][0].title); // Морковь

Раньше такую группировку писали вручную через reduce().

Частая ошибка

Путать ||= и ??=. Оператор ||= срабатывает на любое «ложное» значение, включая 0 и пустую строку, и затирает настоящие данные:

const settings = { volume: 0, brightness: 0 };
 
settings.volume ||= 50;
settings.brightness ??= 50;
 
console.log(settings.volume); // 50
console.log(settings.brightness); // 0

Когда 0, false или '' — допустимые значения, используйте ??=.