JavaScript: о том, что нас ждет в следующем году

Привет, друзья! Не за горами 2022 год, а это значит, что пришло время познакомиться с новыми возможностями, которыми нас порадует ECMAScript2022.

Вот о чем мы поговорим в этой статье:

• await верхнего уровня
• метод at() для индексируемых сущностей
• метод hasOwn() для объектов
• флаг d для регулярных выражений
• 5 предложений для классов (специальные проверки для частных полей, блоки статической инициализации и др.)

Полный список возможностей, которые появятся в JavaScript в следующем году, можно найти здесь.

await верхнего уровня

Скоро у нас появится возможность использовать ключевое слово await на верхнем уровне (top level). Под верхним уровнем в данном случае подразумевается область видимости (scope) модуля.

Модуль — это JS-файл, который импортируется в другой JS-файл либо подключается к странице с помощью тега script с атрибутом type="module" и содержит в себе код определенной части программы. Для модулей даже предусмотрено специальное расширение .mjs (использовать его необязательно).

В Node.js верхнеуровневый await можно использовать, начиная с версии 14.8.0 (август 2020 г.). На самом деле, данную возможность можно было использовать и до этого, но тогда требовалось передавать специальный флаг --harmony-top-level-await в командной строке при запуске приложения и, разумеется, использовать его можно было только в среде для разработки.

Соответствующий Node.js-файл должен иметь расширение .mjs либо в ближайшем package.json должно содержаться поле type со значением module:

import connectToMongoDb from './mongo/connect.js' import { MONGO_URI } from './config/index.js'  await connectToMongoDb(MONGO_URI)

В описании предложения имеется хороший, хоть и абстрактный пример использования await верхнего уровня.

Предположим, что у нас имеется файл awaiting.js. В нем нам необходимо динамически загрузить модуль, получить данные с сервера, обработать модуль и данные с помощью функции, импортированной из другого модуля, и передать результат третьему модулю. Сейчас это можно сделать только через создание асинхронной функции.

Именованная функция:

// импортируем функцию для обработки из другого модуля import { process } from './some-module.js' // создаем переменную для результата let output  // создаем именованную функцию async function main() {  // динамически импортируем модуль  const dynamic = await import(computedModuleSpecifier)  // получаем данные от сервера  const data = await fetch(url)  // вычисляем результат  // модуль экспортируется по умолчанию, т.е. с помощью `export default`  output = process(dynamic.default, data) } // вызываем функцию main() // экспортируем результат export { output }

IIFE:

import { process } from './some-module.js' let output // `IIFE` ;(async () => {  const dynamic = await import(computedModuleSpecifier)  const data = await fetch(url)  output = process(dynamic.default, data) })() export { output }

Верхнеуровневый await позволяет обойтись без создания дополнительной (лишней) функции:

import { process } from './some-module.js' const dynamic = await import(computedModuleSpecifier) const data = await fetch(url) export const output = process(dynamic.default, data)

Здорово, правда?

Вот статья, в которой подробно рассказывается про использование await верхнего уровня в JavaScript.

Метод at()

Метод at() предназначен для получения элементов индексируемых сущностей по отрицательным индексам по аналогии с тем, как это реализовано, например, в Python. К индексируемым сущностям относятся массивы, типизированные массивы и строки.

Сейчас для доступа к таким элементам мы вычитаем позицию элемента из длины массива (свойство length; в действительности, дело не в позиции элемента, а в том, что последний индекс массива на 1 меньше его длины по причине того, что индексация начинается с 0, а длина с 1):

const arr = [1, 2, 3, 4, 5] // получаем первый элемент массива, начиная с конца const firstLastEl = arr[arr.length - 1] console.log(firstLastEl) // 5 // получаем второй элемент с конца const secondLastEl = arr[arr.length - 2] console.log(secondLastEl) // 4 // и т.д.

Вот как это будет выглядеть с at():

const arr = [1, 2, 3, 4, 5] const firstLastEl = arr.at(-1) const secondLastEl = arr.at(-2)

Мелочь, а приятно.

В описании предложения приводится соответствующий полифил. Рассмотрим его на примере массива:

// функция принимает число function at(n) {  // округляем число до целого, просто отбрасывая десятичную часть  // значением по умолчанию является `0`  n = Math.trunc(n) || 0  // если получившееся число меньше `0`,  // прибавляем к нему длину массива  // если число равняется `-1`, а массив имеет длину `5`,  // получаем `5 + -1` или `5 - 1`, или `4` - последний индекс  // `this` в данном случае указывает (ссылается) на массив  if (n < 0) n += this.length  // если число меньше `0` или больше длины массива,  // возвращаем `undefined` - индикатор отсутствия элемента с указанным индексом в массиве  if (n < 0 || n > this.length) return undefined  // возвращаем элемент  return this[n] }  // добавляем новый метод в прототип массива, т.е. для всех (будущих) массивов Object.defineProperty(Array.prototype, 'at', {  value: at,  // метод доступен для записи  writable: true,  // не является перечисляемым  enumerable: false,  // является настраиваемым  configurable: true })

Хотите кусочек метапрограммирования? Пожалуйста.

Вот как можно реализовать доступ к элементу по отрицательному индексу с помощью объекта Proxy:

const arr = [1, 2, 3, 4, 5]  // возьмем логику полифила const _arr = new Proxy(arr, {  // target - цель проксирования  get(target, index) {    index = Math.trunc(index) || 0    if (index < 0) index += target.length    if (index < 0 || index > target.length) return undefined    return target[index]  } })  console.log(_arr[-1]) // 5 console.log(_arr[-3]) // 3 console.log(_arr[-6]) // undefined

Метод hasOwn()

Метод hasOwn() предназначен для того, чтобы сделать метод hasOwnProperty() «более доступным». Что это означает?

Метод Object.prototype.hasOwnProperty() используется для проверки, содержит ли объект определенное свойство:

const obj = {  prop: 'val' } console.log(  obj.hasOwnProperty('prop') ) // true

Но что если у объекта нет метода hasOwnProperty()?

const obj = Object.create(null)  console.log(  obj.hasOwnProperty('prop') ) // Uncaught TypeError: obj.hasOwnProperty is not a function

Получаем ошибку.

А что если кто-то взял и перезаписал метод hasOwnProperty?

const obj = {  prop: 'val',  hasOwnProperty: () => null }  console.log(  obj.hasOwnProperty('prop') ) // null

Не совсем то, что мы ожидали получить, верно?

Во многих библиотеках для решения названных проблем используется такая конструкция:

const hasProp = Object.prototype.hasOwnProperty  const obj = {  prop: 'val' }  // метод `call()` используется для выполнения функции или метода в нужном контексте - // `this` внутри функции будет ссылаться на объект, переданный `call()` в качестве первого аргумента // второй и последующий аргументы, передаваемые `call()`, // это параметры функции if (hasProp.call(obj, 'prop')) {  console.log('obj has prop') } // obj has prop  // объект без прототипа const obj2 = Object.create(null) console.log(  hasProp.call(obj2, 'prop') ) // false  // объект с кастомным методом `hasOwnProperty()` const obj3 = {  prop: 'val',  hasOwnProperty: () => null } console.log(  hasProp.call(obj3, 'prop') ) // true

Вообще перезаписывать встроенные свойства и методы считается очень плохой практикой — никогда так не делайте!

С помощью метода hasOwn() безопасно определять наличие у объекта определенного свойства можно будет так:

const obj = {  prop: 'val' } if (Object.hasOwn(obj, 'prop')) {  console.log('obj has prop') } // obj has prop  const obj2 = Object.create(null) console.log(  Object.hasOwn(obj2, 'prop') ) // false  const obj3 = {  prop: 'val',  hasOwnProperty: () => null } console.log(  Object.hasOwn(obj3, 'prop') ) // true

Индексы совпадений

Флаг d в регулярном выражении предназначен для получения индексов совпадений (match indices).

Индексы совпадений — это начальный и конечный индексы захваченной подстроки (captured substring) по отношению к началу строки для поиска.

Проще показать.

В следующем примере мы используем метод matchAll() для нахождения всех вхождений подстроки с некоторой дополнительной информацией:

const str = 'one1' // без флага `d` // ищем число const match = str.matchAll(/one(\d)/g) console.log(...match) /* [  0: 'one1'  1: '1'  groups: undefined  index: 0  input: 'one1' ] */  // с флагом `d` const matchIndices = str.matchAll(/one(\d)/dg) console.log(...matchIndices) /*  // то же самое +  indices: Array(2)    // начальный и конечный индексы строки    0: [0, 4]    // начальный и конечный индексы захваченной подстроки    1: [3, 4] */

Вот статья, в которой подробно рассказывается про использование регулярных выражений в JavaScript.

Классы

Дальнейшему развитию классов посвящено целых 5 предложений.

Сегодня мы можем определять в классе следующее:

• публичные (открытые) поля экземпляров в конструкторе
• частные (закрытые) поля экземпляров в конструкторе
• публичные методы экземпляров
• публичные статические методы (методы классов)

Схематично это можно представить следующим образом:

class C {  constructor() {    this.publicInstanceField = 'Публичное поле экземпляра'    this.#privateInstanceField = 'Частное поле экземпляра'  }   publicInstanceMethod() {    console.log('Публичный метод экземпляра')  }   // публичный метод для получения значения частного поля экземпляра  getPrivateInstanceField() {    console.log(this.#privateInstanceField)  }   static publicClassMethod() {    console.log('Публичный статический метод (метод класса)')  } }  const c = new C()  console.log(c.publicInstanceField) // Публичное поле экземпляра  // при попытке прямого доступа к частному полю выбрасывается исключение // console.log(c.#privateInstanceField) // SyntaxError: Private field '#privateInstanceField' must be declared in an enclosing class  c.getPrivateInstanceField() // Частное поле экземпляра  c.publicInstanceMethod() // Публичный метод экземляра  C.publicClassMethod() // Публичный статический метод (метод класса)

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

Теперь перейдем непосредственно к предложениям.

Определение полей классов

Первое предложение позволяет определять публичные и частные поля экземпляров за пределами конструктора.

В следующем примере из описания предложения создается пользовательский элемент num-counter со значением счетчика в качестве текстового содержимого. Клик по счетчику приводит к увеличению его значения на 1 (обратите внимание, что значение счетчика является закрытым полем):

class Counter extends HTMLElement {  #x = 0   clicked() {    this.#x++    window.requestAnimationFrame(this.render.bind(this))  }   constructor() {    super()    this.onclick = this.clicked.bind(this)  }   connectedCallback() { this.render() }   render() {    this.textContent = this.#x.toString()  } } window.customElements.define('num-counter', Counter)

Частные методы и геттеры/сеттеры

Второе предложение позволяет определять частные методы и геттеры/сеттеры экземпляров.

Следующий пример из описания предложения похож на предыдущий, за исключением того, что в нем используются частные геттер и сеттер для счетчика и метод для увеличения его значения (clicked()) стал закрытым:

class Counter extends HTMLElement {  #xValue = 0   get #x() { return #xValue }  set #x(value) {    this.#xValue = value    window.requestAnimationFrame(this.#render.bind(this))  }   #clicked() {    this.#x++  }   constructor() {    super()    this.onclick = this.#clicked.bind(this)  }   connectedCallback() { this.#render() }   #render() {    this.textContent = this.#x.toString()  } } window.customElements.define('num-counter', Counter)

Статические возможности классов

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

В следующем примере из описания предложения в классе сначала определяется 3 статических частных поля, соответствующих 3 основным цветам — красному, зеленому и синему. Затем определяется статический метод для доступа к цвету по названию:

class ColorFinder {  static #red = '#ff0000'  static #green = '#00ff00'  static #blue = '#0000ff'   static colorName(name) {    switch (name) {      case 'red': return ColorFinder.#red      case 'blue': return ColorFinder.#blue      case 'green': return ColorFinder.#green      default: throw new RangeError('Неизвестный цвет!')    }  }   // Как-то используем `colorName` }

Таким образом, мы получим почти полный комплект инструментов для работы с классами. Почему почти? Ну, для полного комплекта не хватает, как минимум, защищенных (protected) полей и методов, которые, в отличие от частных, будут наследоваться экземплярами. Вероятно, именно в этом направлении будет идти дальнейшее развитие ООП в JavaScript.

Подробнее о классах и их новых возможностях можно почитать в этой статье.

Да, имеется еще 2 предложения, посвященных классам, но они не кажутся мне слишком интересными, поэтому я оставил их на закуску.

Блоки статической инициализации классов

Предположим, что нам необходимо выполнить какие-то вычисления при инициализации класса (например, с помощью try/catch) или установить два поля на основе одного значения.

Сейчас это приходится делать за пределами класса:

class C {  static x = ...  static y  static z }  try {  const obj = doSomethingWith(C.x)  C.y = obj.y  C.z = obj.z } catch {  C.y = ...  C.z = ... }

Блоки статической инициализации позволяют реализовать такую логику внутри инициализируемого класса:

class C {  static x = ...  static y  static z   static {    try {      const obj = doSomethingWith(this.x)      this.y = obj.y      this.z = obj.z    } catch {      this.y = ...      this.z = ...    }  } }

Эргономичные специальные проверки, предназначенные для частных полей

Данное предложение в определенном смысле расширяет идею предыдущего.

Частные поля имеют встроенную специальную проверку (brand check), которая выбрасывает исключение при попытке получить доступ к несуществующему частному полю объекта.

Как можно безопасно выполнить такую проверку?

С помощью блока статической инициализации и try/catch это можно сделать следующим образом:

class C {  #brand   static isC(obj) {    try {      obj.#brand;      return true    } catch {      return false    }  } }  console.log(C.isC({})) // false console.log(C.isC(new C())) // true

Но что если у нас имеется такой геттер:

class C {  #data = null   get #getter() {    // при отсутствии данных в момент вызова геттера выбрасывается исключение    if (!this.#data) {      throw new Error('Данные отсутствуют!')    }    return this.#data  }   static isC(obj) {    try {      obj.#getter      return true    } catch {      return false      // несмотря на наличие закрытого геттера, мы попадаем в блок `catch`      // из-за того, что он выбрасывает исключение    }  } }

Рассматриваемое предложение позволяет безопасно проверять наличие частных полей и методов с помощью ключевого слова in:

class C {  #brand   #method() {}   get #getter() {}   static isC(obj) {    return #brand in obj && #method in obj && #getter in obj  } }

Пожалуй, это все, чем я хотел поделиться с вами в этой статье.

Нельзя сказать, что ECMAScript2022 привнесет в JavaScript какие-то принципиальные новшества, но тем не менее приятно сознавать, что развитие языка продолжается, что инструмент, который все мы используем в повседневной деятельности, становится все более совершенным и мощным с точки зрения предоставляемых им возможностей.

Если вы хотите узнать про возможности, появившиеся в JavaScript в этом году, рекомендую взглянуть на эту статью.

Благодарю за внимание и хорошего дня!

---