Нові фічі JavaScript, про які варто знати

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

Верхньорівневий await (Top-level await)

Що це таке
Раніше, якщо ви хотіли скористатися await, треба було завжди писати async-функцію. Але тепер JavaScript дозволяє використовувати await безпосередньо в модулі (ES-модулі, де використовується type=”module” чи .mjs-файли).

Приклад

// До цього моменту треба було завжди створювати async function
// Тепер можемо писати прямо на верхньому рівні

const data = await fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(res => res.json());

console.log(data);

Чому це зручно
Не потрібно створювати обгортку з async. Наприклад, якщо ваш код має виконати кілька запитів перед виконанням іншого логічного блоку, top-level await спрощує порядок завантаження.

Опціональний ланцюжок (Optional chaining)

Що таке опціональний ланцюжок
Optional chaining – це оператор ?. у JS, що дозволяє безпечніше отримувати вкладені дані. Замість того, щоб перевіряти кожен рівень об’єкта на null чи undefined, можна використати ?. і, якщо на якомусь рівні виявиться undefined, повернеться undefined замість помилки.

Приклад

const user = { profile: { address: { city: 'Kyiv' } } };

// Раніше треба було перевіряти if (user && user.profile && user.profile.address) ...
const city = user?.profile?.address?.city; // 'Kyiv' або undefined, якщо щось відсутнє

Переваги
Код стає чистішим, менше перевірок, немає помилок типу “Cannot read property ‘address’ of undefined”.

Оператор об’єднання з null (Nullish Coalescing)

Як це працює
Оператор ?? повертає друге значення, якщо перше є null чи undefined, інакше повертає перше.

const value = someVar ?? 'default'; 

Відмінність від ||
Звичайний оператор || спрацьовує також при falsy-значеннях (0, “”), а nullish coalescing ?? тільки при null або undefined.

Приклад

const input = 0;
const result = input || 10; // 10, бо 0 - це falsy
const result2 = input ?? 10; // 0, бо nullish operator не вважає 0 за null

Метод at для масивів і рядків

Що це таке
Метод at(index) дозволяє більш гнучко отримувати елемент із масиву чи символ із рядка. Особливо зручно використовувати негативні індекси.

Приклад

const arr = [10, 20, 30, 40];
console.log(arr.at(1)); // 20
console.log(arr.at(-1)); // 40, останній елемент

const str = 'Hello';
console.log(str.at(-2)); // 'l'

Замість arr[arr.length – 1], можна писати arr.at(-1). Код стає більш читабельним.

Оператор ||= та &&=

Короткий запис операції з присвоєнням
ES пропонує декілька операторів присвоєння, які поєднують логічні оператори з присвоєнням.

Оператор ||=

obj.prop ||= defaultValue;

Еквівалентно:

if (!obj.prop) {
  obj.prop = defaultValue;
}

Якщо obj.prop — falsy, тоді присвоїти defaultValue.

Оператор &&=

obj.prop &&= otherValue;

Еквівалентно:

if (obj.prop) {
  obj.prop = otherValue;
}

Покращений Pattern Matching (Records and Tuples у майбутньому)

Records і Tuples є пропозицією, яка може з’явитись у JS. Це створить незмінні (immutable) структури даних із семантикою порівняння за значенням, а не за посиланням. Хоча воно ще не в офіційній специфікації, це може дозволити робити:

const record = #{ name: 'Alice', age: 20 };
const tuple = #[1, 2, 3];

Важливо стежити за цими пропозиціями, адже вони можуть значно спростити роботу зі складними структурами даних. Поки що вони у стадії пропозицій, тому треба почекати, поки браузери і Node.js втілять це нативно.

Інші дрібні, але корисні фічі

numeric separators
Дозволяють писати числа з підкресленнями для кращого читання:

const largeNumber = 1_000_000; // легше зчитувати, ніж 1000000

Intl
Багато покращень у глобальному об’єкті Intl (наприклад, Intl.RelativeTimeFormat, Intl.NumberFormat з додатковими опціями), що допомагають форматувати числа, дати та валюти.

top-level await ( ECMAScript 2022 )
У модулях з type=”module” можна використовувати await без необхідності створювати async-функцію зверху.

const data = await fetch('https://api.example.com').then(r => r.json());
console.log(data);

Висновок

JavaScript постійно розвивається, і кожна нова версія ECMAScript додає функції, що можуть спростити код і підвищити його безпеку та читабельність. Серед новинок, які вже можна використовувати в більшості середовищ: optional chaining, nullish coalescing, метод at для масивів та рядків, а також удосконалені оператори присвоєння. У перспективі варто стежити за records/tuples, які можуть відкрити нову еру у роботі з незмінними структурами даних у JS.

Щоб упевнитися, що можна застосовувати ці фічі, перевіряйте таблиці сумісності (наприклад, caniuse.com) або налаштуйте Babel/TypeScript для транспіляції, якщо потрібно підтримувати старіші браузери. Як результат, ваш код стане коротшим, більш зрозумілим і менш схильним до помилок.