Замонавий JavaScript: ES2022 дан ES2026 гача янги имкониятлар

JavaScript тили охирги йилларда жуда жадал ривожланмоқда. ECMAScript стандарти ҳар йили янги версия чиқаради ва шу сабабли тил доимо ўсиб бормоқда. Кўп дастурчилар ҳали ҳам эски усулларда ёзишни давом эттирмоқда, ваҳоланки тилнинг ўзи аллақачон анча қулайроқ ва тоза ечимларни таклиф қилади. Ушбу мақолада ES2022 дан ES2026 атрофигача бўлган даврда қабул қилинган энг муҳим ва амалий имкониятларни ҳар бирини код мисоли билан кўриб чиқамиз.

Top-level await — модулда кутишни соддалаштириш

Аввал await калит сўзини фақат async функция ичида ишлатиш мумкин эди. Бу эса модулнинг энг юқори даражасида маълумот юклаш керак бўлганда ноқулай конструкцияларга олиб келар эди. ES2022 да киритилган top-level await ES модулларининг бевосита ўзида кутишга имкон беради. Бу айниқса динамик конфигурация юклаш ёки маълумотлар базасига уланишни модул юкланиши вақтида амалга оширишда жуда қулай.

// Eski usul — o'rab qo'yilgan async funksiya
(async () => {
  const config = await fetch('/config.json').then(r => r.json());
  init(config);
})();

// Yangi usul — top-level await (ES2022)
const config = await fetch('/config.json').then(r => r.json());
init(config);

Бу имконият фақат ES модулларида ишлайди ва модулни импорт қилган бошқа модуллар унинг юкланишини кутади. Node.js 14.8 ва ундан юқори версияларда ҳамда барча замонавий браузерларда қўллаб-қувватланади.

Object.groupBy — массивни гуруҳлаш

Маълумотларни бирор белгиси бўйича гуруҳлаш амалиётда доимо учрайди. Илгари буни reduce орқали қўлда ёзишга тўғри келар эди ва бу код кўпинча ўқиш учун мураккаб бўларди. ES2024 да киритилган Object.groupBy бу вазифани бир қаторда ҳал қилади. У ҳар бир элемент учун чақириладиган функцияни қабул қилади ва шу функция қайтарган калит бўйича элементларни гуруҳлайди.

const products = [
  { name: 'Olma', type: 'meva' },
  { name: 'Sabzi', type: 'sabzavot' },
  { name: 'Banan', type: 'meva' }
];

// Yangi usul (ES2024)
const grouped = Object.groupBy(products, p => p.type);
// { meva: [...], sabzavot: [...] }

Агар гуруҳлаш калитлари объект ёки мураккаб қиймат бўлса, Map.groupBy ишлатилади, чунки оддий объект калити фақат сатр ёки символ бўла олади. Ушбу методлар Node.js 21 дан бошлаб ва сўнгги браузер версияларида мавжуд.

Promise.withResolvers — промис бошқарувини соддалаштириш

Баъзан промис яратиш ва унинг resolve ҳамда reject функцияларини бошқа жойда чақириш зарур бўлади. Аввал буни амалга ошириш учун ташқи ўзгарувчиларни эълон қилиб, промис конструктори ичида уларга қиймат бериш керак эди. ES2024 даги Promise.withResolvers ана шу нақшни расмий равишда стандартлаштиради ва кодни тозалайди.

// Eski usul
let resolve, reject;
const promise = new Promise((res, rej) => {
  resolve = res;
  reject = rej;
});

// Yangi usul (ES2024)
const { promise, resolve, reject } = Promise.withResolvers();

// Endi resolve/reject ni istalgan joyda chaqirish mumkin
button.onclick = () => resolve('bosildi');

Бу айниқса ҳодисаларга асосланган код, навбатлар ва WebSocket уланишлари билан ишлашда фойдали. У Node.js 22 ва барча замонавий браузерларда қўллаб-қувватланади.

structuredClone — чуқур нусха олиш

Объектнинг чуқур нусхасини олиш JavaScript да узоқ вақт оғриқли мавзу бўлиб келди. Кўп дастурчилар JSON.parse(JSON.stringify(obj)) усулини ишлатарди, бироқ у сана, Map, Set ва бошқа мураккаб турларни йўқотарди. Браузер ва Node.js да мавжуд бўлган глобал structuredClone функцияси ҳақиқий чуқур нусхани тўғри турларни сақлаган ҳолда яратади.

const original = {
  date: new Date(),
  nested: { items: new Set([1, 2, 3]) },
  map: new Map([['a', 1]])
};

const copy = structuredClone(original);
// date Date bo'lib qoladi, Set va Map saqlanadi
copy.nested.items.add(4);
// original o'zgarmaydi

Шуни эсда тутиш керакки, structuredClone функцияларни ва DOM тугунларини нусхалай олмайди — бундай ҳолатларда хато беради. У Node.js 17 дан бошлаб ва барча замонавий браузерларда ишлайди.

Ўзгармас массив методлари — toSorted, toReversed, with

Классик sort, reverse ва splice методлари асл массивни ўзгартирарди, бу эса React каби реактив кутубхоналарда кутилмаган хатоларга олиб келарди. ES2023 да киритилган янги методлар асл массивни ўзгартирмасдан янги массив қайтаради. toSorted, toReversed, toSpliced ва with методлари айни шу мақсадга хизмат қилади.

const numbers = [3, 1, 2];

// Eski usul — asl massiv buziladi
const sorted = [...numbers].sort();

// Yangi usul (ES2023) — asl massiv saqlanadi
const sortedNew = numbers.toSorted();
const reversed = numbers.toReversed();
const replaced = numbers.with(0, 99); // [99, 1, 2]
// numbers o'zgarmagan: [3, 1, 2]

Шунингдек at методи манфий индекс орқали охиридан элемент олишга, findLast ва findLastIndex эса массивни охиридан бошлаб қидиришга имкон беради. Булар кодингизни анча аниқ ва ўқилувчан қилади.

Temporal — сана ва вақт билан замонавий ишлаш

JavaScript нинг эски Date объекти кўп камчиликларга эга бўлиб, вақт минтақалари ва сана арифметикаси билан ишлаш жуда машаққатли эди. Янги Temporal API бу муаммоларни бутунлай ҳал қилади. У ўзгармас объектлар, аниқ вақт минтақаси қўллаб-қувватлаши ва қулай арифметик методларни тақдим этади. Temporal ҳозирда браузерларга босқичма-босқич кириб келмоқда ва полифил орқали бугун ҳам ишлатиш мумкин.

// Bugungi sana (Temporal)
const today = Temporal.Now.plainDateISO();

// 30 kun qo'shish — oddiy va aniq
const future = today.add({ days: 30 });

// Ikki sana orasidagi farq
const diff = today.until(future);
console.log(diff.days); // 30

Temporal билан вақт минтақалари аниқ белгиланган турлар орқали бошқарилади, шунинг учун бир вақтнинг ўзида икки шаҳарнинг вақтини ҳисоблаш каби мураккаб вазифалар хатосиз бажарилади. У ҳақиқий ишлаб чиқаришга кириб бораётган энг кутилган янгиликдир.

Iterator helpers — оқимларни самарали қайта ишлаш

Итераторлар учун янги ёрдамчи методлар массивга айлантирмасдан тўғридан-тўғри оқимлар устида ишлаш имконини беради. Бу айниқса катта ёки чексиз кетма-кетликлар билан ишлаганда хотирани тежайди, чунки барча элементлар бир вақтда хотирага юкланмайди. map, filter, take ва drop каби методлар энди итераторлар билан занжир шаклида ишлатилади.

function* naturalNumbers() {
  let n = 1;
  while (true) yield n++;
}

// Cheksiz oqimdan faqat kerakli qismni olish
const result = naturalNumbers()
  .map(n => n * n)
  .filter(n => n % 2 === 0)
  .take(3)
  .toArray();
// [4, 16, 36]

Бу ёндашув функционал дастурлаш услубини қувватлайди ва катта ҳажмли маълумотларни қисмлаб қайта ишлашда жуда қўл келади. Iterator helpers Node.js 22 ва сўнгги браузерларда мавжуд бўлиб, тил имкониятларини сезиларли даражада бойитади. Ушбу янгиликларни ўрганиб, кодингизни замонавий ва тозароқ қилиб ёзишингиз мумкин.