JavaScript: десять новых фич в ES2020, о которых вам следует знать

Хорошие новости — новые фичи ES2020, улучшенной спецификации JavaScript, финализированы. Это означает, что теперь есть полное представление об изменениях, которые ждут нас в новом стандарте. Команда Mail.ru Cloud Solutions перевела и немного дополнила статью независимого фронтенд-разработчика со списком основных нововведений.

Появился тип данных BigInt — одно из самых ожидаемых нововведений в JavaScript. Он на деле позволяет разработчикам получить гораздо большее целочисленное представление в JS-коде для обработки данных.

На данный момент самое большое число, которое вы могли хранить в JavaScript в виде Integer, — это pow(2, 53) -1 (2 в 53 степени минус 1). Но BigInt позволяет выйти за эти пределы:

Однако вам нужно добавлять символ n в самом конце числа — это видно в примере выше. Символ n обозначает, что это данные в BigInt и должны быть иначе обработаны движком JavaScript (V8 или другим, который используется у вас).

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

Опция динамического импорта — это функциональность из коробки, которая позволяет гибко подгружать JS-файлы как модули в вашем приложении. Это выглядит так же, как вы могли делать такую подгрузку раньше с помощью Webpack и Babel.

Это новшество поможет использовать прием доставки кода по требованию, более известный как code splitting (разделение кода), без всяких накладных расходов в виде модулей Webpack или других сборщиков кода. Вы также можете подгружать код в зависимости от условий в блоках if-else.

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

Nullish coalescing добавляет возможность проверить null-подобные значения вместо проверки false-значений. В чем разница между null- и false-значениями, спросите вы?

В JavaScript многие значения false-подобные: это пустые строки, значение 0 в number, undefined, null, false, NaN.

Однако во многих ситуациях может потребоваться проверка, является ли выражение null-подобным, то есть равным только null или undefined. Например, когда вы допускаете, что переменная может быть пустой строкой, числом 0 или даже false.

В таком случае вы сможете использовать новый nullish coalescing-оператор ??:

Отлично видно, как оператор || всегда возвращает true-значение (не делает разницы между false, NaN, null, undefined), тогда как ?? возвращает не null значение (NaN и false).

Синтакс Optional Chaining позволяет обратиться к глубоко вложенным свойствам объекта, без того чтобы беспокоиться, есть ли такие свойства или нет.

Если они есть — отлично! Если нет, выражение вернет undefined.

Это работает не только со свойствами объектов, но также с вызовами функций и с массивами. Очень удобно! Вот примеры:

Метод allSettled объекта Promise принимает массив промисов и разрешает их (resolve) только тогда, когда все они готовы — без разницы, в статусе resolved или rejected.

Раньше это не было доступно в нативном JS, хотя были похожие реализации, например, Promise.race или Promise.all. Это приносит в нативный JS подход «просто выполнить все промисы, результат выполнения каждого меня не интересует»:

В прототип объекта String добавлен новый метод matchAll, который предназначен для работы с регулярными выражениями. Он возвращает итератор, который в свою очередь возвращает все подходящие группы в строке, одну за одной. Давайте посмотрим на простой пример:

Если вы писали когда-нибудь кросс-платформенный JS-код, который должен работать в Node, в браузерном окружении, а также внутри web-workers, у вас наверняка были сложности с обращением к глобальному объекту.

Это происходит от того, что в браузере глобальный объект — это window, в среде исполнения Node.js — это global, в веб-воркерах — это self. Больше сред исполнения — больше различных значений глобального объекта.

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

ES2020 подарил нам globalThis, который всегда указывает на текущий глобальный объект, независимо от того, в какой среде выполняется код:

В модулях JavaScript всегда можно было использовать следующий import-синтакс:

Однако до недавнего времени не было симметричного export-синтаксиса:

До этого вы могли использовать эквивалент:

Спецификация ECMA не указывала, в каком порядке должно выполняться перечисление свойств объекта в цикле for(x in y). Несмотря на то что браузеры до сих пор самостоятельно реализовали этот порядок, официально стандартизирован он был только в ES2020.

Объект import.meta был создан в последней реализации ECMAScript, он имеет Prototype, равный null.

Рассмотрим подключаемый модуль:

Вы можете получить мета-данные этого модуля, используя объект import.meta:

Он возвращает объект со свойством url, которое указывает на адрес модуля. Это может быть как адрес, по которому был загружен модуль (для внешних скриптов), так и document base URL (для инлайновых скриптов).

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

Впечатляет последовательность и скорость, с которой сообщество JavaScript эволюционировало и развивается. Удивительно и действительно замечательно наблюдать, как JavaScript прошел за десять лет путь от языка, который освистывали, к одному из сильнейших, гибких и универсальных языков.

Что еще почитать по теме:

#javascript #новинки