Если вдруг кому интересно то я веду телеграм канал по фронтенду где выкладываю интересные статьи на разные темы а так же сам периодически пишу шорт-риды которые могут быть вам полезны.


22 июня 2022 123-я ассамблея Ecma General утвердила языковую спецификацию ECMAScript 2022, а значит, она стала официальным стандартом.

В посте разберемся, какие обновления добавлены в эту версию.

Содержание:

Бесплатные книги по JavaScript 

Редакторы ECMAScript 2022  

Редакторы этого релиза:

Что нового в ECMAScript 2022?  

Новые члены классов 

class MyClass {  
  instancePublicField = 1;  
  static staticPublicField = 2;  
  #instancePrivateField = 3;  
  static #staticPrivateField = 4;  
  #nonStaticPrivateMethod() {}  
  get #nonStaticPrivateAccessor() {}  
  set #nonStaticPrivateAccessor(value) {}  
  static #staticPrivateMethod() {}  
  static get #staticPrivateAccessor() {}  
  static set #staticPrivateAccessor(value) {}  
  static {    
  	// Static initialization block  
  }
}
  • Параметры (публичные слоты) теперь можно создать с помощью:

  • В числе новинок — приватные слоты. Их можно создать через:

    • Приватные поля (приватные поля экземпляра и статические приватные поля — instance private fields и static private fields)

    • Приватные методы и асессоры (статические и не статические)

  • Статические блоки инициализации (Static initialization blocks)

Проверка приватных слотов через оператор in  

Проверку приватных слотов также называют «эргономичной проверкой брендов для приватных полей». Выражение ниже — это и есть такая проверка. Она определяет, есть ли у obj приватный слот #privateSlot:

#privateSlot in obj

Вот пример:

class ClassWithPrivateSlot {  
  #privateSlot = true;  
  static hasPrivateSlot(obj) {    
  	return #privateSlot in obj;  
    }
}

const obj1 = new ClassWithPrivateSlot();

assert.equal(  ClassWithPrivateSlot.hasPrivateSlot(obj1), true);

const obj2 = {};

assert.equal(  ClassWithPrivateSlot.hasPrivateSlot(obj2), false);

Уточним, что можно ссылаться на приватный слот только внутри области видимости, в которой он был объявлен.

Больше информации об этом в разделе про проверку приватных слотов.

«Глобальный» Await в модулях

Теперь мы можем использовать await на верхних уровнях модулей — больше не нужно вводить асинхронные функции или методы:

// my-module.mjs

const response = await fetch('https://example.com');
const text = await response.text();
console.log(text);

Подробнее про «Глобальный» await в модулях в соответствующем разделе.

Метод error.cause  

Теперь Error и его подклассы позволяют нам уточнять, какая предыдущая ошибка вызвала текущую:

try {  
	// Do something
} catch (otherError) {  
	throw new Error('Something went wrong', {cause: otherError});
}

Причина ошибки err отображается в трассировке стека и доступна через err.cause. Больше информации о error.cause здесь.

Метод .at() для индексируемых значений

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

> ['a', 'b', 'c'].at(0)
'a'
> ['a', 'b', 'c'].at(-1)
'c'

Ниже приведены индексируемые типы, в которых применяется метод .at():

  • string

  • Array

  • Все классы типизированных массивов: Uint8Array и т.д.

О методе .at() для индексируемых значений.

Пропозал RegExp match indices  

Если мы добавим флаг /d к регулярному выражению, при его использовании создаются объекты соответствия. Они записывают начальный и конечный индекс каждого группового захвата (строки A и B):

const matchObj = /(a+)(b+)/d.exec('aaaabb');assert.equal(  
	matchObj[1], 'aaaa'
);

assert.deepEqual(
	matchObj.indices[1], [0, 4] // (A)
);

assert.equal(  matchObj[2], 'bb');

assert.deepEqual(  
	matchObj.indices[2], [4, 6] // (B)
);

По ссылке подробное объяснение и примеры использования RegExp match indices.

Метод Object.hasOwn(obj, propKey)

Параметр Object.hasOwn(obj, propKey) — это безопасный способ проверить, есть ли у объекта obj свое собственное (не наследуемое) свойство с ключом propKey:

const proto = {  
	protoProp: 'protoProp',
};

const obj = {  
	__proto__: proto,  
  objProp: 'objProp',
}

assert.equal('protoProp' in obj, true); //(A)
assert.equal(Object.hasOwn(obj, 'protoProp'), false); // (B)
assert.equal(Object.hasOwn(proto, 'protoProp'), true); // (C)

Обратите внимание, что in определяет наследуемые свойства (строка A), в то время как Object.hasOwn() определяет только собственные свойства (строки B и C).

Больше информации об Object.hasOwn()в этом разделе.

FAQ  

В чем разница между JavaScript и ECMAScript?  

Кто создал ECMAScript? TC39 – Ecma Technical Committee 39  

В организации по языковым стандартам Ecma International есть Технический Комитет 39 (Technical Committee 39 или TC39). Именно этот комитет и разработал ECMAScript.

Грубо говоря, члены комитета — крупные компании: Adobe, Apple, Facebook, Google, Microsoft, Mozilla, Opera, Twitter и другие. То есть, компании, которые конкурируют в своих сегментах рынка, вместе работают над JavaScript.

Каждые два месяца TC39 проводит заседания — члены комитета назначают туда делегатов и приглашают экспертов. Протоколы заседаний есть в открытом доступе в отдельном репозитории GitHub.

Кроме проведения заседаний, ТС39 сотрудничает с различными участниками и группами JavaScript-сообщества.

Как в ECMAScript добавляют фичи? О стадиях процесса ТС39

Сначала ТС39 рассматривает новые функции ECMAScript. Заявки проходят через несколько этапов, где:

  • Нулевой этап — участники предлагают идеи, TC39 вносит свои комментарии к предложению;

  • Четвертый, завершающий, — предложенная функция готова к добавлению в ECMAScript.

Если фича доходит до 4-го этапа, ее точно планируют внедрить в ECMAScript. Набор функций версии ECMAScript обычно замораживают (то есть окончательно формируют) в марте каждого года. Фичи, которые добрались до 4-го этапа после этого дедлайна, переносятся в версию ECMAScript следующего года.

Больше нюансов вы найдете в книге «Современный JavaScript для нетерпеливых» глава «3.5 The TC39 process»

Насколько версии ECMAScript имеют значение?  

С тех пор как процесс TC39 был учреждён, важность версий ECMAScript значительно упала. Большее значение сейчас имеет то, до какой стадии дошла предложенная фича. Если она дошла до четвертой, ее можно безопасно использовать. Но даже в этом случае необходимо проверять, поддерживают ли функцию движки, на которые вы ориентируетесь.

Как поживает предложение [имя  любимой фичи]?  

Если вам интересно, на какой ступени находятся определенные фичи, посмотрите репозиторий TC39 с предложениями.

Где я могу посмотреть, какие фичи появились в определенной версии ECMAScript?

Есть несколько мест, где можно проверить обновления ECMAScript:

Бесплатные книги про JavaScript  

Мои книги про JavaScript можно бесплатно прочитать онлайн:

Комментарии (5)


  1. valentin_n93
    10.07.2022 12:32

    В примере с proto: proto, ошибка

    proto -> __proto__


    1. abaha91 Автор
      10.07.2022 12:34

      Каюсь, поправил


  1. apcehypo
    10.07.2022 12:34
    +1

    Что-то никакого вау-эффекта...


    1. abaha91 Автор
      11.07.2022 11:40

      Мне кажется что глобальный await это очень приятная фича, в остальном да, согласен.


  1. slyder
    11.07.2022 10:24
    +2

    Кроме глобального await, как мне кажется - ничего интересного.
    А шарпы для приватных полей и методов - это вообще прям печалька, как по мне только глаза ломают =(