4 важных нововведения в ES2022

ECMAScript 2022 - это новый стандарт JavaScript, который будет выпущен в июне 2022 года. Давайте посмотрим на самые важные изменения, которые, наиболее вероятно, должны появиться в новом релизе, так как они достигли уже 4-ой, последней стадии принятия новвоведений в спецификации EcmaScript (TC39).

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

1. Метод "at()" в массивах

Наконец-то! ES2022 дал нам возможность обращаться к массивам с конца. Это незначительное новшество увеличит удобочитаемость кода при работе с массивами и строками.

At() метод с положительным числом работает так же, как и [ ], но передача отрицательного числа в этот метод позволяет нам получать значения с конца.

Вместо того, чтобы писать:

const arr = [1,2,3,4]
arr[arr.length - 2] // 3
arr.slice(-2)[0]    // 3

const str = "1234"
str[str.length - 2] // '3'
str.slice(-2)[0]    // '3'

Мы сможем писать:

const arr = [1,2,3,4]
arr.at(-2) // 3

const str = "1234"
str.at(-2) // '3'

2. Error cause

Свойство .cause в объекте ошибки позволяет нам указать, какая ошибка спровоцировала другую ошибку. Довольно очевидно, не так ли? Пример использования данного свойства:

try {
  //Выполняем какое-то действие, которое выбросит ошибку
  doSomeComputationThatThrowAnError() 
} catch (error) {
  throw new Error('Я результат другой ошибки', { cause: error })
}

Error cause будет идеальным решением для связки ошибок в цепочки, подобное есть в других языках программирования, например, в Java.

3. Ключевое слово "await" вне функции

Знали ли вы, что нельзя использовать await в коде вне функции? Если нет, то то для вас это не так важно. Но остальные могут быть уверены, что ES2022 изменит это.

В чём польза?

• Это позволяет загружать модули динамически

const serviceName = await fetch("https://example.com/what-service-should-i-use")
const service = await import(`/services/${serviceName}.js`)

// ИЛИ

const params = new URLSearchParams(location.search);
const theme = params.get('theme');
const stylingFunctions = await import(`/styling-functions-${theme}.js`);

• Это позволяет загружать модули условно

const date = new Date()

if(date.getFullYear() === 2023) {
  await require('/special-code-for-2023-year.js')
}

Я почти уверен, что есть и больше вариантов использования обновленного await (возможно, менее абстрактного, чем в приведенных примерах). Пишите свои примеры в комментариях!

4. Приватные поля и методы

Классы в JavaScript были представлены еще в ES6, но их реализация едва ли соответствовала ООП. Много разработчиков использовали TypeScript для включения некоторых новых возможностей, а сейчас мы можем их использовать в чистом JavaScript.

Приватные поля или же свойства - одна из этих возможностей. ES2022 даёт нам возможность создавать их и получать ошибку, когда мы пытаемся к ним обратиться, находясь вне класса. Аналогично и с приватными методами. Интересно, что команда JavaScript решила использовать # в виде префикса для обозначения подобных полей.

Пример приватного поля:

class Human {
  #name = "John";
  
  setName(name) {
    this.#name = name;
  }
}

const human = new Human()
human.#name = 'Amy'  // ОШИБКА!
human.setName('Amy') // ОК

И приватного метода:

class Human {
  name = "John";
  
  constructor(name) {
    this.#setName('Amy') // OK
  }
  
  #setName(name) {
    this.name = name;
  }
}

const human = new Human()
human.#setName('Amy') // ОШИБКА!

Итог

Список неполный, но я выбрал, по моему мнению, наиболее важные и полезные обновления в новом выпуске. Вы можете найти все улучшения здесь. Дайте знать, какие фичи вам больше всего понравились, и какими вы планируете пользоваться.

P.S. Это был мой первый первый перевод. А вот оригинальная статья.