З новим роком вийшла нова версія ECMAScript! У актуальній версії ECMAScript було додано багато цікавих та корисних функцій. Розглянемо деякі з них.

Динамічний імпорт

Нова фіча JavaScript, якою ви напевно будете користуватися - динамічний імпорт. Тепер модулі можна завантажувати прямо в Рантайм - в залежності від деякої умови або просто відкладень, щоб не завантажувати клієнт. Досить викликати функцію 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);
  });

Динамічний імпорт підтримують браузери:

1. Chrome: 63
2. Edge: немає підтримки
3. Firefox: 67
4. IE: немає підтримки
5. Opera: 50
6. Safari: 11.1

BigInt

До появи нового типу даних BigInt доводилося користуватися типом Number. Найбільше число, яке можна було точно відобразити в JavaScript, дорівнювало 2⁵³-1 (константа Number.MAX_SAFE_INTEGER).

Тепер не обов'язково обмежувати себе цією величиною. 

Щоб створити значення з типом BigInt, додайте до числа n або скористайтеся вбудованою функцією BigInt().   

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

1. Значення BigInt не може строго дорівнює значенню Number, але вираз 2n == 2 істинний.
2. При розподілі результат завжди буде округлятися до нуля ( 4n / 10n = 0n).
3. Не можна змішувати в одній операції BigInt і Number, так як неявне перетворення між цими типами не відбувається ( 4n + 2).

 BigInt підтримують браузери:

1. Chrome: 67
2. Edge: немає підтримки
3. Firefox: 68
4. IE: немає підтримки
5. Opera: 54
6. Safari: немає підтримки

Promise.allSettled

Якщо вам потрібно дочекатися виконання відразу декількох промісів, ви, звичайно, звернетесь до методу Promise.all(). Але він приймає тільки успішно виконані «обіцянки». Якщо десь з'явиться помилка, продовжити роботу не вийде.

Новому методу 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)));

Promise.allSettled підтримують браузери:

1. Chrome: 76
2. Edge: немає підтримки
3. Firefox: 71
4. IE: немає підтримки
5. Opera: Невідомо
6. Safari: Невідомо

globalThis

Отримання доступу до глобальних об'єктів - це вічний головний біль в JavaScript. У кожному середовищі свої особливості, свій синтаксис, який потрібно знати, щоб ваш код можна було вільно перенести.

Зазвичай ми виходили з цього становища, створюючи функцію getGlobal(), всередині якої перебирали всі можливі варіанти:

const 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');
};

const globals = getGlobal();

Після того як з'явився globalThis, можна з чистою совістю забути про цей зоопарк. Наприклад, в браузері в об'єкті globalThis ви знайдете знайомий window:

gloablThis підтримують браузери:

1. Chrome: 71
2. Edge: немає підтримки
3. Firefox: 65
4. IE: немає підтримки
5. Opera: немає підтримки
6. Safari: 12.1
7. Node: 12

У ES2020 є ще багато цікавих нових функцій. Однак більшість з них не підтримують старі браузери, і вони не завжди стабільні у будь-якому середовищі. 

Джерело перекладу