Что нас ждет в ES2022?

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

Да будут приватные свойства и методы

Классы в чистом Javascript присутствуют начиная с ES6, но они гораздо менее развиты, чем в других объектно-ориентированных языках.

Многие разработчики используют Typescript для включения некоторых некоторых из этих функций, и теперь мы сможем видеть их реализацию и в JS.

Одной из таких функций является объявление приватных свойств и методов класса. S2022 даст нам возможность создавать их и получать ошибку, когда мы пытаемся получить к ним доступ вне класса. Интересно, что команда JS решила дать им префикс # (это как-то связано с наследием JS?).

Вот пример приватного свойства класса:

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

const human = new Human();
human.#name = 'Kate' // ERROR!
human.setName('Kate') // OK

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

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

const human = new Human();
human.#setName('Amy') // ERROR!

Понимание причины ошибки

У объекта ошибки появился свойство .cause, которое позволит нам указать, какая ошибка вызвала другую ошибку. Довольно классно, верно? Здесь вы можете увидеть пример использования этой новой функции:

try {
  doSomeComputationThatThrowAnError();
} catch (error) {
  throw new Error('I am the result of another error', { cause: error });
}

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

Верхнеуровневый await

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

Почему это будет полезно?

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

const serviceName = await fetch("https://example.com/what-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() === 2000) {
  await require('/special-code-for-2000-year.js');
}

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

Ну наконец то 🔥!

ES2022 даст нам возможность индексировать массивоподобные объекты с конца. Это крошечная функция, но она улучшает базовую читабельность при работе с массивами или строками.

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

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

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

Можно будет писать вот так:

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

Заключительные заметки

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