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

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

1. Biglnt

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

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

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

Прим. переводчика: вы также можете создать переменную с новым типом BigInt через конструктор: BigInt(num).

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

Прим. переводчика: также нужно внимательно отнестись к преобразованиям между Number и BigInt и к арифметическим операциям с последним, см. документацию.

2. Dynamic import

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

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

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

3. Nullish Coalescing

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).

4. Optional Chaining

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

Прим. переводчика: если точнее — позволяет обращаться к свойствам без проверки, существуют ли свойства объекта в цепочке свойств выше по иерархии.

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

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

5. Promise.allSettled

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

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

6. String#matchAll

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

7. globalThis

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

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

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

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

8. Экспортирование пространств имен модулей

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

import * as utils from './utils.mjs'

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

export * as utils from './utils.mjs'

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

import * as utils from './utils.mjs' export { utils }

9. Четко описанный порядок перечисления в цикле for-in

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

10. import.meta

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

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

<script type="module" src="module.js"></script>

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

console.log(import.meta); // { url: "file:///home/user/module.js" }

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

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

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

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

0
16 комментариев
Написать комментарий...
Сергей Токарев

Наконец-то я могу читать Хабр без токсичных комментариев

Ответить
Развернуть ветку
Valera Rybakoff
Четко описанный порядок перечисления в цикле for-in
Ответить
Развернуть ветку
vic buynoff
Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Евгений Усов

Typescript же ну 

Ответить
Развернуть ветку
Eugene Popov

Кхм-кхм, CoffeeScript

Ответить
Развернуть ветку
Евгений Усов
Ответить
Развернуть ветку
Владимир

Даа, после использования Swift, эта фича прямо must have

Ответить
Развернуть ветку
Андрей Чураев

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

Ответить
Развернуть ветку
Anton Smets

Извините, а где вы используете бигинт?

Ответить
Развернуть ветку
Никита Букин

один из примеров - работа с IPv6

Ответить
Развернуть ветку
Антон Ерофеев

Nullish Coalescing + Optional Chaining убирают сразу 9999 строк кода с проверками, ещё более читаемый js, ура🍻

Ответить
Развернуть ветку
Andrey Krestovnikov

Люто плюсую

Ответить
Развернуть ветку
Anton Smets

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Михаил Анюков

Очень интересно! Нихрена не понял!

Ответить
Развернуть ветку
13 комментариев
Раскрывать всегда