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. Это был мой первый первый перевод. А вот оригинальная статья.