Zamonaviy JavaScript: ES2022-2026 atrofidagi yangi imkoniyatlar

JavaScript tili oxirgi yillarda juda jadal rivojlanmoqda. ECMAScript standarti har yili yangi versiya chiqaradi va shu sababli til doimo o'sib bormoqda. Ko'p dasturchilar hali ham eski usullarda yozishni davom ettirmoqda, vaholanki tilning o'zi allaqachon ancha qulayroq va toza yechimlarni taklif qiladi. Ushbu maqolada ES2022 dan ES2026 atrofigacha bo'lgan davrda qabul qilingan eng muhim va amaliy imkoniyatlarni har birini kod misoli bilan ko'rib chiqamiz.

Top-level await — modulda kutishni soddalashtirish

Avval await kalit so'zini faqat async funksiya ichida ishlatish mumkin edi. Bu esa modulning eng yuqori darajasida ma'lumot yuklash kerak bo'lganda noqulay konstruksiyalarga olib kelar edi. ES2022 da kiritilgan top-level await ES modullarining bevosita o'zida kutishga imkon beradi. Bu ayniqsa dinamik konfiguratsiya yuklash yoki ma'lumotlar bazasiga ulanishni modul yuklanishi vaqtida amalga oshirishda juda qulay.

// 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);

Bu imkoniyat faqat ES modullarida ishlaydi va modulni import qilgan boshqa modullar uning yuklanishini kutadi. Node.js 14.8 va undan yuqori versiyalarda hamda barcha zamonaviy brauzerlarda qo'llab-quvvatlanadi.

Object.groupBy — massivni guruhlash

Ma'lumotlarni biror belgisi bo'yicha guruhlash amaliyotda doimo uchraydi. Ilgari buni reduce orqali qo'lda yozishga to'g'ri kelar edi va bu kod ko'pincha o'qish uchun murakkab bo'lardi. ES2024 da kiritilgan Object.groupBy bu vazifani bir qatorda hal qiladi. U har bir element uchun chaqiriladigan funksiyani qabul qiladi va shu funksiya qaytargan kalit bo'yicha elementlarni guruhlaydi.

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: [...] }

Agar guruhlash kalitlari obyekt yoki murakkab qiymat bo'lsa, Map.groupBy ishlatiladi, chunki oddiy obyekt kaliti faqat satr yoki simvol bo'la oladi. Ushbu metodlar Node.js 21 dan boshlab va so'nggi brauzer versiyalarida mavjud.

Promise.withResolvers — promise boshqaruvini soddalashtirish

Ba'zan promise yaratish va uning resolve hamda reject funksiyalarini boshqa joyda chaqirish zarur bo'ladi. Avval buni amalga oshirish uchun tashqi o'zgaruvchilarni e'lon qilib, promise konstruktori ichida ularga qiymat berish kerak edi. ES2024 dagi Promise.withResolvers ana shu naqshni rasmiy ravishda standartlashtiradi va kodni tozalaydi.

// 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');

Bu ayniqsa hodisalarga asoslangan kod, navbatlar va WebSocket ulanishlari bilan ishlashda foydali. U Node.js 22 va barcha zamonaviy brauzerlarda qo'llab-quvvatlanadi.

structuredClone — chuqur nusxa olish

Obyektning chuqur nusxasini olish JavaScript da uzoq vaqt og'riqli mavzu bo'lib keldi. Ko'p dasturchilar JSON.parse(JSON.stringify(obj)) usulini ishlatardi, biroq u sana, Map, Set va boshqa murakkab turlarni yo'qotardi. Brauzer va Node.js da mavjud bo'lgan global structuredClone funksiyasi haqiqiy chuqur nusxani to'g'ri turlarni saqlagan holda yaratadi.

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

Shuni esda tutish kerakki, structuredClone funksiyalarni va DOM tugunlarini nusxalay olmaydi — bunday holatlarda xato beradi. U Node.js 17 dan boshlab va barcha zamonaviy brauzerlarda ishlaydi.

Immutable massiv metodlari — toSorted, toReversed, with

Klassik sort, reverse va splice metodlari asl massivni o'zgartirardi, bu esa React kabi reaktiv kutubxonalarda kutilmagan xatolarga olib kelardi. ES2023 da kiritilgan yangi metodlar asl massivni o'zgartirmasdan yangi massiv qaytaradi. toSorted, toReversed, toSpliced va with metodlari ayni shu maqsadga xizmat qiladi.

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]

Shuningdek at metodi manfiy indeks orqali oxiridan element olishga, findLast va findLastIndex esa massivni oxiridan boshlab qidirishga imkon beradi. Bular kodingizni ancha aniq va o'qiluvchan qiladi.

Temporal — sana va vaqt bilan zamonaviy ishlash

JavaScript ning eski Date obyekti ko'p kamchiliklarga ega bo'lib, vaqt mintaqalari va sana arifmetikasi bilan ishlash juda mashaqqatli edi. Yangi Temporal API bu muammolarni butunlay hal qiladi. U o'zgarmas (immutable) obyektlar, aniq vaqt mintaqasi qo'llab-quvvatlashi va qulay arifmetik metodlarni taqdim etadi. Temporal hozirda brauzerlarga bosqichma-bosqich kirib kelmoqda va polyfill orqali bugun ham ishlatish mumkin.

// 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 bilan vaqt mintaqalari aniq belgilangan turlar orqali boshqariladi, shuning uchun bir vaqtning o'zida ikki shaharning vaqtini hisoblash kabi murakkab vazifalar xatosiz bajariladi. U haqiqiy ishlab chiqarishga kirib borayotgan eng kutilgan yangilikdir.

Iterator helpers — oqimlarni samarali qayta ishlash

Iteratorlar uchun yangi yordamchi metodlar massivga aylantirmasdan to'g'ridan-to'g'ri oqimlar ustida ishlash imkonini beradi. Bu ayniqsa katta yoki cheksiz ketma-ketliklar bilan ishlaganda xotirani tejaydi, chunki barcha elementlar bir vaqtda xotiraga yuklanmaydi. map, filter, take va drop kabi metodlar endi iteratorlar bilan zanjir shaklida ishlatiladi.

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]

Bu yondashuv funksional dasturlash uslubini quvvatlaydi va katta hajmli ma'lumotlarni qismlab qayta ishlashda juda qo'l keladi. Iterator helpers Node.js 22 va so'nggi brauzerlarda mavjud bo'lib, til imkoniyatlarini sezilarli darajada boyitadi. Ushbu yangiliklarni o'rganib, kodingizni zamonaviy va tozaroq qilib yozishingiz mumkin.