Что добавят в JavaScript уже в 2020 году

Недавно опциональный доступ к аттрибутам (Optional Chaining) и значение по умолчанию для атрибутов (Nullish Coalescing) перешли на последний, четвёртый этап процесса TC39.

На практике это означает, что эти и другие нововведения станут частью стандарта JavaScript уже в этом, 2020 году. Их мы и рассмотрим в этой статье.

Отслеживать поддержку браузерами можно здесь («2020 features») — прим. перев.

String.prototype.matchAll

Использование «липких» (sticky) или глобальных регулярных выражений, когда надо захватить несколько групп на одной строке, может оказаться нетривиальным.

String.prototype.match не возвращает захваченные группы при наличии глобального флага, а без него можно получить только первое полное соответствие шаблону и его группы.

Пример:

let regexp = /t(e)(st(\d?))/g; let str = 'test1test2'; const results = str.match(regexp); console.log(results);

Результат с флагом «g»

Результат без флага «g»

Использование String.prototype.matchAll гарантирует, что будут возвращены все соответствия и их группы.

Пример:

let regexp = /t(e)(st(\d?))/g; let str = 'test1test2'; let array = [...str.matchAll(regexp)]; console.log(array);

Результат:

BigInt

До появления BigInt наибольшее значение, представляемое Number, было равно 2⁵³-1 (MAX_SAFE_INTEGER). Теперь в JavaScript будет примитив, способный превзойти лимит.

Создать BigInt можно добавив ‘n’ к числу или используя функцию BigInt().

Пример:

let bigInt = 4n console.log(bigInt * bigInt)

• BigInt не эквивалентен Number, но может быть приведён к последнему.
• При выполнении операций вроде деления, результат будет округлён до 0.
• Нельзя использовать с Number без приведения типов.

Попытка сложить BigInt с числом…

let bigInt = 4n + 2 console.log(bigInt)

… приводит к исключению:

globalThis

Доступ к глобальным объектам в мире JavaScript всегда был головной болью. Вы должны быть знакомы со специфическим синтаксисом для окружения, что создаёт лишние трудности при написании переносимого кода и приводит к необходимости использовать что-то вроде getGlobal.

Пример:

var getGlobal = function () {    if (typeof self !== 'undefined') { return self; }    if (typeof window !== 'undefined') { return window; }    if (typeof global !== 'undefined') { return global; }    throw new Error('no global object found');  };   var globals = getGlobal(); 

С появлением globalThis можно перестать думать об окружении и получать глобальные объекты унифицировано.

Пример:

globalThis.someFunction = () => 'hello'  console.log(globalThis.someFunction())

Promise.allSettled

Допустим, у вас есть несколько промисов, и вы хотите что-то сделать после их завершения (неважно, успешного или нет). Promise.allSettled нужен именно для этого.

Пример:

const fulfilledPromise = Promise.resolve("success"); const rejectedPromise = Promise.reject("error") const promises = [fulfilledPromise, rejectedPromise];  Promise.allSettled(promises).   then((results) => results.forEach((result) => console.log(result)));

Результат:

Dynamic Import

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

Достаточно вызвать функцию import, которая вернёт промис.

Пример:

import("some_module")   .then(module => {     module.doSomething();   })   .catch(err => {     console.error(err.message);   });

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

Пример с использованием шаблона:

import(`${some_module}.js`)   .then(module => {     module.doSomething();   })   .catch(err => {     console.error(err.message);   });

Nullish coalescing

Когда нужно получить атрибут или значение по умолчанию, если он null или undefined, мы обычно используем оператор ‘||’.

До Nullish coalescing:

const response = someResponse.properties.mayBeUndefined || 'Response';

Представьте, однако, что атрибут имеет «ложное» значение.

Проблема использования ‘||’:

const someResponse = {properties: { mayBeUndefined: ''}} const response = someResponse.properties.mayBeUndefined || 'Response';  console.log(response)

Результат:

Это нежелательное поведение. В данном случае нам нужно было значение атрибута, а не значение по умолчанию.

С Nullish coalescing этой проблемы не будет. Значение по умолчанию будет возвращено только для атрибутов null или undefined.

Использование Nullish coalescing:

const someResponse = {properties: { mayBeUndefined: ''}} const response = someResponse.properties.mayBeUndefined ?? 'Response';  console.log(response)

Результат:

Optional Chaining

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

До Optional Chaining:

const someObj = {   property: 'prop',   otherProperty: {     name: 'prop2'   } };  const property = someObj.NotOtherProperty ? someObj.NotOtherProperty.name: undefined; console.log(property);

С появлением Optional Chaining, можно будет использовать оператор ‘?.’ для опционального доступа к под-атрибутам. Код ниже эквивалентен коду выше.

Использование Optional Chaining:

const someObj = {   property: 'prop',   otherProperty: {     name: 'prop2'   } };  const property = someObj.NotOtherProperty?.name; console.log(property);

Optional Chaining делает код гораздо чище, особенно, если атрибутов в строке много.

Заключение

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