Boshqalar

JavaScriptʼning 2024-yildagi 5 ta yangi xususiyati

Bu maqolada 2024-yilda JavaScriptʼda paydo boʻladigan eng qiziqarli va kutilgan baʼzi funksiyalarni koʻrib chiqamiz.

Quyidagi takliflar joriy yildagi ECMAScript versiyasiga kirish uchun yaxshi imkoniyatlarga ega:

  • Temporal
  • Payp (Pipe) operator
  • Rekordlar va toʻplamlar (Records and Tuples)
  • /v bayroq doimiy ifodasi (Regular Expressions /v flag)
  • Dekoratorlar

ECMAScript yangilanishlari

JavaScriptʼning yangi versiyasi har doim shov-shuvga sabab boʻlgan. ES6 yangilanishidan keyin har yili yangi versiya taqdim etilgan va ushbu yilgi (ES2024) yangilanish iyun oyida chiqishini taxmin qilyapmiz.

ES6 oʻzidan avvalgi ES5 versiyadan olti yil oʻtib chiqqan ommaviy relizga aylangan edi. Brauzer ishlab chiquvchilar va JavaScript dasturchilari qabul qilish hamda oʻrganish kerak boʻlgan, yangi qoʻshilgan funksiyalar sonidan hayratga tushgandi. Oʻshandan beri, bir vaqtning oʻzida buncha hajmdagi yangi funksiyalar paydo boʻlishining oldini olish maqsadida har yili yangi reliz boʻlishi amalga kiritilgandi.

Bu har yillik reliz oʻz ichiga tilga qoʻshilishdan avval muhokama qilinadigan, baholanadigan va qoʻmita tomonidan ovozga qoʻyiladigan har qanday yangi funksiyani taqdim qilishni qamrab oladi. Bu jarayon brauzerlarga taqdim etilgan yangiliklar rasman tilga qoʻshilguncha ularni amalda sinash imkonini beradi, bu esa oʻz navbatida reliz bilan bogʻliq muammolarning oldini olishga yordam beradi.

JavaScript (yoki ECMAScript) uchun yangi funksiyalar Texnik qoʻmita 39 (TC39) tomonidan aniqlanadi. TC39 tarkibiga barcha asosiy brauzerlar ishlab chiquvchilari, shuningdek, JavaScript boʻyicha ekspertlar kiradi. Ular til uchun yangi xususiyatlar va ularni amalga oshirish borasida muhokama qilish uchun doimiy ravishda uchrashib turadi. Yangi xususiyatlar taklif tarzida (kimligidan qatʼi nazar) ilgari suriladi, soʻng qoʻmita aʼzolari har bir taklif keyingi bosqichga oʻtishini hal qiladigan ovoz beradi. Har bir taklif uchun toʻrt bosqich koʻzda tutilgan, taklif 4-bosqichga yetib kelganda uning keyingi ES versiyasiga qoʻshilishi kutiladi.

ES xususiyatlarining muhim qismi oʻzidan oldingilariga mos kelishidadir. Bu har qanday yangi oʻzgarish avvalgi ES versiyasining ishini oʻzgartirish bilan internetni buza olmasligini bildiradi. Shu tariqa ular mavjud metodlar qanday ishlashini oʻzgartira olmaydi, faqat yangilarini qoʻsha oladi. Chunki potensial tarzda mavjud metod bilan ishlayotgan istalgan veb-sayt buning oqibatida ishdan chiqish xavfi ostida qoladi.

Joriy takliflarning toʻliq roʻyxatini shu yerda koʻrish mumkin.

Temporal

State of JS 2022 soʻrovnomasida “JavaScriptʼga nima yetishmaydi deb oʻylaysiz?” savoliga uchinchi eng koʻp berilgan javob — sanalarni yaxshiroq boshqarish boʻlgandi. 

Bu esa Date obyektining oʻrnini bosadigan standart global obyektni taqdim qiladigan va dasturchilarga yillar davomida JavaScriptʼda sanalar bilan ishlashda qiyinchilik tugʻdirgan bir qator muammolarni yechadigan Temporal taklifining yuzaga kelishiga sabab boʻlgandi.

JavaScriptʼda sanalar bilan ishlash deyarli doim murakkab vazifa boʻlgan. Oylar nol indeksga ega boʻladigan, ammo oy kunlari 1 dan boshlanishi kabi kichik, ammo asabbuzarliklarga sabab boʻladigan nomutanosibliklar bilan ishlashga toʻgʻri kelgan. 

Sanalar bilan ishlashdagi qiyinchiliklar muammolarni toʻgʻrilashga harakat qiladigan Moment, Day.JS va date-fns kabi kutubxonalarning yuzaga kelishiga sabab boʻlgan. Ammo TemporalAPI hamma muammolarni yechishga qaratilgan.

Temporalbir qancha vaqt mintaqalari va grigorian boʻlmagan, nostandart taqvimlarni ham qoʻllab-quvvatlaydi, shuningdek, foydalanish sodda boʻlgan, sanalarni qatorlardan olishni anchagina osonlashtiradigan API taqdim etadi.  Bundan tashqari, barcha Temporalobyektlar oʻzgarmas boʻladi, bu esa sanani tasodifan oʻzgartirish kabi xatolarga yoʻl qoʻymaslikka yordam beradi.

Keling, TemporalAPI tomonidan taklif etiladigan eng foydali metodlardan bir nechtasini koʻrib chiqamiz.

Temporal.Now.Instant()

Temporal.Now.Instant() DateTime obyektini eng yaqin nanosoniyaga qaytaradi. Siz frommetodidan foydalangan holda aniq sanalarni quyidagicha koʻrsatishingiz mumkin:

const olympics = Temporal.Instant.from('2024-07-26T20:24:00+01:00');

Bu joriy yilda Parijda boʻladigan Olimpiya oʻyinlarining boshlanish vaqti – 2024-yil 26-iyul 20:24 (UTC) ni bildiradigan DateTime obyektini yaratadi.

PlainDate()

Bu bizga soatni koʻrsatmagan holda sanani yaratish imkonini beradi:

new Temporal.PlainDate(2024, 7, 26);

Temporal.PlainDate.from('2024-07-26');

// both return a PlainDate object that represents 26th July 2024

PlainTime()

PlainDate()ʼga qoʻshimcha ravishda biz .PlainTime()ʼdan foydalanib, sanasi koʻrsatilmagan vaqtni yaratishimiz mumkin:

new Temporal.PlainTime(20, 24, 0);

Temporal.PlainTime.from('20:24:00');

// both return a PlainTime object of 20:24

PlainMonthDay()

PlainMonthDay()  PlainDateʼga oʻxshaydi, ammo yil haqida maʼlumot koʻrsatmasdan, faqat oy va kunni qaytaradi (bu har yili bir kunda qaytariladigan sanalar, masalan, Yangi yil va tugʻilgan kunlar uchun foydali boʻladi).

const valentinesDay = Temporal.PlainMonthDay.from({ month: 2, day: 14 });

PlainYearMonth()

PlainYearMonth() esa faqat yil va oyni qaytaradi (bu bir yilda butun oyni taqdim etishda foydali boʻladi).

Hisob-kitoblar

Temporal obyektlar yordamida amalga oshirilishi mumkin boʻlgan bir qator hisob-kitoblar mavjud. Siz date obyektiga turli vaqt birliklarini qoʻshishingiz yoki ayirishingiz mumkin:

const today = Temporal.Now.plainDateISO();

const lastWeek = today.subtract({ days: 7});

const nextWeek = today.add({ days: 7 });

untilva sincemetodlari esa sizga muayyan sanagacha qancha vaqt qolgani yoki oʻsha sanadan beri qancha vaqt oʻtganini bilishda yordam beradi. Masalan, quyidagi kod sizga Parijdagi Olimpiya oʻyinlariga qancha vaqt qolganini xabar qiladi:

olympics.until().days

valentinesDay.since().hours

Bu metodlar koʻplab turli birliklar va yaxlitlash parametrlariga ega vaqt hajmini oʻlchashda foydalanish mumkin boʻlgan Temporal.Duration obyektini qaytaradi.

Qoʻshimchalar

Siz yil, oy va kunlarni Date obyektidan, soat, daqiqa, soniya, millisoniya, mikrosoniya va nanosoniyalarni Time obyektidan ajratib olishingiz mumkin (mikrosoniya va nanosoniyalar joriy DateTime obyektida mavjud emas). Masalan:

olympics.hour;
<< 20

Shuningdek, dayOfWeek(dushanba uchun 1, yakshanba uchun 7 ni qaytaradigan), daysInMonth (oyga qarab 28,29,30 yoki 31 sonini qaytaradigan) va daysInYear (kabisa yiliga qarab 365yoki 366ni qaytaradigan) kabi xususiyatlar ham mavjud. 

Temporalvaqt obyektlari turli tasniflash algoritmlaridan foydalanib sanalarni tartiblaydigan comparemetodlariga ham ega boʻladi.

Hozirgi vaqtda Temporal 3-bosqich taklifi sifatida brauzer ishlab chiquvchilar tomonidan realizatsiyatsiya qilinmoqda. Shu sababli uning vaqti keldi deb hisoblaymiz. Toʻliq hujjatni bu yerda koʻrishingiz mumkin. Shuningdek, bu yerda foydalanish usullari bilan keltirilgan kukbuk (kichik dasturlardan iborat toʻplam) ham mavjud. Intl.DateTimeFormat Api bilan birgalikda sanalarni ajoyib tarzda boshqarishingiz mumkin.

Payp (Pipe) operator

State of JS 2022 soʻrovnomasida “JavaScriptʼga nima yetishmaydi deb oʻylaysiz?” savoliga oltinchi eng koʻp berilgan javob payp operator boʻlgan.
Payp operator taklifi bilan bu yerda tanishishingiz mumkin.

Payp operator funksional tillarning standart xususiyati boʻlib, bir funksiya qiymatini boshqasiga oʻtkazish imkonini beradi, shu bilan bir paytda esa avvalgi funksiyaning chiqaruvchi maʼlumotlari keyingi funksiyaning kirituvchi maʼlumotlari sifatida qoʻllanadi (xuddi Fetch API bir promisdan qaytgan istalgan maʼlumotni keyingisiga uzatgani kabi).

Masalan, biz stringga uch funksiyani ketma-ket qoʻllamoqchimiz deylik:

  • “Listen up” degan stringni asosiy string boshiga birlashtiring.
  • String oxiriga uchta undov belgisini qoʻshing.
  • Butun matnni bosh harflarga oʻtkazing.

Ana shu uch funksiyani quyidagicha yozsa boʻladi:

const exclaim = string => string + "!!!"
const listen = string => "Listen up! " + string
const uppercase = string => string.toUpperCase()

Bu uch funksiyaning hammasini quyidagicha ichma-ich kiritib, ishga tushirsa boʻladi:

const text = "Hello World"

uppercase(exclaim(listen(text)))
<< "LISTEN UP! HELLO WORLD!!!"

Ammo koʻplab funksiya chaqiruvlarini bu tarzda ichma-ich birlashtirish tez orada chalkashliklarga sabab boʻlishi mumkin, ayniqsa, argument sifatida uzatilayotgan qiymat (text) oxir-oqibatda ifodaning ichiga chuqur kiritiladigan boʻlsa, bu uni identifikatsiyalashni ham qiyinlashtiradi.

Funksiyalarni ichma-ich birlashtirish bilan bogʻliq yana bir muammo ularning oxiridan boshlab qoʻllanishi, yaʼni eng ichki funksiyalar birinchi boʻlib ishga tushirilishi bilan bogʻliq. Shu tariqa bu holatda eng avvalgi listenfunksiyasi textqiymatiga, keyin exclaim(undov belgisi qoʻshish) va uppercase(bosh harflarni qoʻllash) funksiyalari ishlatiladi. Katta va murakkab funksiyalarda esa jarayonni kuzatish qiyinlashadi. 

Bunday holatda funksiyalar zanjiri muqobil yechim boʻlishi mumkin

const text = "Hello World"

text.listen().exclaim().uppercase()

Bu ichma-ich funksiyalar bilan bogʻliq koʻplab muammolarni hal qiladi. Uzatiladigan argument boshida joylashadi, har bir funksiya esa qoʻllanadigan tartibda namoyon boʻladi. Avval listen(), soʻng exclaim() va undan keyin uppercase() funksiyalari amalga oshiriladi.

Afsuski, bu misol ishlamaydi, chunki listen, exclaimva uppercasefunksiyalari Stringsinfi metodlari hisoblanmaydi. Ularni bu sinfga monkey patch usuli (oʻzgartirishlarni kodni ishga tushirish vaqtida kiritish) bilan qoʻshish mumkin, ammo odatda bu usul unchalik yoqlanmaydi.

Bu esa zanjirlash ichma-ich kiritishdan koʻra yaxshiroq koʻrinishi bildirsa ham, aslida uni faqat mavjud funksiyalarga qoʻllash mumkin (xuddi shu narsa koʻpincha massiv (Array) metodlarida qoʻllanadi).

Pipingesa oʻzida zanjirlardan foydalanishning osonligi va istalgan funksiya bilan qoʻllanishni birlashtiradi. Joriy taklif bilan yuqorida keltirilgan misol mana bunday yozilishi mumkin:

 text |> listen(%) |> exclaim(%) |> uppercase(%)

%tokeni avvalgi funksiya chiqaruvchisining qiymatini ifodalash uchun toʻldiruvchi belgi boʻlib, katta ehtimol bilan, rasmiy relizda %belgisi boshqa belgiga almashtiriladi. Bu esa bittadan koʻp argument qabul qiladigan funksiyalar ham payplayn (pipeline, konveyer) da foydalanilishiga imkon beradi.

Payping zanjirlashning soddaligini oʻzida aks ettiradi va siz yozgan istalgan funksiya bilan qoʻllanadi. Yagona sharti – bir funksiyaning chiqaruvchi (output) turi zanjirdagi keyingi funksiyaning kirituvchi (input) turiga mos kelishiga amin boʻlishingiz kerak.

Payping koʻproq oʻzidan avvalgi istalgan funksiyaning qaytarilgan qiymatidan uzatilgan faqat bitta argumentni qabul qiladigan kurried funksiyalar (curried function — bir nechta argumentdan murakkab funksiya yaratish orqali yasalgan funksiya) bilan yaxshi ishlaydi. Bu funksional dasturlashni ancha soddalashtiradi, chunki kichik, qurilish blok (building-block) funksiyalarni birlashtirib, murakkab qoʻshma funksiyalarni yaratish mumkin. Bu qisman qoʻllashni amalga oshirishni ham yengillashtiradi.

Mashhurligiga qaramasdan, payp operatori jarayonning 2-bosqichidan chiqib olishga bor kuchi bilan urinmoqda.  Bu payp (pipe) operatori yozma ifodalashni qanday amalga oshirishi, shuningdek xotira samaradorligiga qanday taʼsir oʻtkazishi hamda awaitoperatori bilan qanday ishlashi borasidagi bahslar sabab yuzaga kelmoqda. Ammo qoʻmita asta-sekinlik bilan kelishuvga erishayotganini hisobga olsa, payp operatori bosqichlardan yaxshi oʻtib, shu yil namoyish qilinishiga umid qilamiz.

Yaxshiyamki, payplayn (pipeline) operatori Babelʼning 7.15 versiyasidan boshlab reliz qilingan.

Shaxsan biz payp operatori shu yil ishga tushishini xohlaymiz, chunki u JavaScriptʼni jiddiy funksional dasturlash tili sifatidagi obroʻsini yaxshilashga chindan yordam beradi.

Rekordlar va toʻplamlar (Records and Tuples)

Rekord (sodda maʼlumotlar tuzilmasi) va toʻplam (koʻplab maʼlumot turlarini jamlagan, tartiblangan qiymatlar toʻplami) takliflari JavaScriptʼga oʻzgarmas maʼlumotlar tuzilmasini kiritishga yoʻnaltirilgan.

Toʻplamlar qiymatlarning tartiblangan roʻyxatidan iborat massivlarga oʻxshaydi, ammo undagi qiymatlar oʻzgarmaydi. Bu esa toʻplamdagi har bir qiymat, sodda qiymat, boshqa rekord yoki toʻplamdan iborat boʻlishini bildiradi (yaʼni massiv va obyektdan iborat boʻlolmaydi, chunki ularni JavaScriptʼda oʻzgartirsa boʻladi).

Toʻplam massiv literali kabi, ammo oldida panjara, #belgisi bilan yaratiladi:

const heroes = #["Batman", "Superman", "Wonder Woman"]

Toʻplam yaratilgandan keyin unga hech qanday qiymat qoʻshib yoki oʻchirib boʻlmaydi. Qiymatlarni oʻzgartirish ham mumkin emas.

Rekordlar obyektlar (ikki elementli massivlar toʻplami) ga oʻxshaydi, ammo ularni oʻzgartirib boʻlmaydi. Rekordlar obyektlar singari yaratiladi, lekin xuddi toʻplamlar kabi oldidan panjara, # belgisi qoʻyiladi: 

const traitors = #{
  diane: false,
  paul: true,
  zac: false,
  harry: true
}

Rekordlar ham xususiyat va metodlarga kirish uchun nuqta belgisidan foydalanadi:

traitors.paul
<< true

Massivlarni ifodalaydigan kvadrat qavslarni esa toʻplamlar uchun ham ishlatsa boʻladi:

heroes[1]
<< "Superman"

Ammo ular oʻzgarmas boʻlgani tufayli birorta xususiyatni ham oʻzgartira olmaysiz:

traitors.paul = false
<< Error

heroes[1] = "Supergirl"
<< Error

Rekordlar va toʻplamlarning oʻzgarmasligi ularni === operatori bilan qiyoslash mumkinligini ham bildiradi:

heroes === #["Batman", "Superman", "Wonder Woman"];
<< true

Rekordlar tengligini koʻrib chiqqanda xususiyatlarning tartibi ahamiyatga ega boʻlmasligini qayd etish kerak:

traitors === #{
  ross: false,
  zac: false,
  paul: true,
  harry: true
};
// still true, even though the order of people has changed
<< true

Ammo toʻplamlar uchun tartib muhim ahamiyat kasb etadi, chunki ular maʼlumotlarning tartiblangan roʻyxatini aks ettiradi:

heroes === #["Wonder Woman", "Batman", "Superman"];
<< false

Bu sahifadagi amaliy maydonchasi mavjud qulay qoʻllanmada rekordlar va toʻplamlar qanday ishlashiga koʻnikishingiz mumkin.

/v bayroq (flag) doimiy ifodasi (RegExp)

Doimiy ifodalar JavaScriptʼga 3-versiyadan boshlab qoʻshilgan va oʻshandan beri ancha takomilashgan (masalan, ES2015ʼda u bayrogʻidan foydalanib, Unicodeʼni qoʻllab-quvvatlash kiritilgan). v bayroq taklifi ham xuddi u bayroq ishini bajaradi, ammo quyiroqda koʻrib chiqadigan baʼzi qoʻshimcha afzalliklarga ham ega boʻladi.

Oddiyroq aytganda, v bayrogʻi doimiy ifodangiz oxiriga /v qoʻshishni bildiradi.

Masalan, quyidagi kodni belgi emoji ekanini tekshirish uchun qoʻllash mumkin:

const isEmoji = /^\p{RGI_Emoji}$/v;
isEmoji.test("💚");
<< true

isEmoji.test("🐨");
<< true

U emojini aniqlash uchun RGI_Emoji shablonidan foydalanadi.

vbayrogʻi doimiy ifodalarda toʻsiq belgilardan foydalanish imkonini beradi. Masalan, siz -- operatoridan foydalanib, bir shablonni ikkinchisidan ajratishingiz mumkin. Quyidagi kodni emojilar toʻplamidagi yurak shakllarini olib tashlash uchun ishlatsa boʻladi:

const isNotHeartEmoji = /^[\p{RGI_Emoji_Tag_Sequence}--\q{💜💚♥️💙🖤💛🧡🤍🤎}]$/v;

isNotHeartEmoji.test("💚");
<< false

isNotHeartEmoji.test("🐨");
<< true

&& belgisidan foydalangan holda ikki shablonning kesishuvini topishingiz mumkin. Quyidagi kod grek belgilari va harflarining kesishuvini topib beradi:

const GreekLetters = /[\p{Script_Extensions=Greek}&&\p{Letter}]/v;

GreekLetters.test('π');
<< true

GreekLetters.test('𐆊');
<< false

v bayrogʻi u bayroqdagi baʼzi registr (katta-kichik harf) bilan bogʻliq muammolarni ham hal qiladi, bu esa uni barcha hollarda ishlatish mumkin boʻlgan, eng yaxshi variantga aylantiradi.

Doimiy ifodalar uchun v bayrogʻi 2023-yilda 4-bosqichga yetib kelgan va barcha asosiy brauzerlarga moslashtirilgan. Shuning uchun uning ES2024 versiyasining bir qismiga aylanishi toʻla kutilmoqda.

Dekoratorlar

Dekorator taklifi JavaScript sinflarini kengaytirish uchun dekoratorlardan foydalanishni koʻzda tutadi.

Dekoratorlar koʻplab obyektga yoʻnaltirilgan tillar, masalan, Pythonʼda tarqalgan va allaqachon TypeScriptʼga ham qoʻshilgan. Ular standart metadasturlash abstraksiyasi boʻlib, funksiya yoki sinfga ularning tuzilishini oʻzgartirmasdan qoʻshimcha funksiyalar qoʻshish imkonini beradi. Masalan, metodga qoʻshimcha tekshiruv joriy qilmoqchi boʻlsangiz, formaga kiritilgan oʻzgarishlarni tekshiradigan nazorat dekoratori yaratish bilan qilishingiz mumkin.

JavaScriptʼda bunaqa loyihalash shablonini amalga oshirish uchun funksiyalardan foydalanish mumkin boʻlsa-da, koʻpchilik obyektga yoʻnaltirilgan dasturchilar shunchaki hayotni yanada yengilroq qilish uchun bu maqsadni amalga oshirishning oddiyroq va qulayroq usulini tanlagan.

Taklifga dekoratorni sinfga thisbogʻlamagan holda faoliyat koʻrsatishiga imkon beradigan sintaktik shakar qoʻshilgan. U sinf maydonlari, sinf metodlari yoki sinfga kirish vositalari kabi sinf elementlarini kengaytirishning ancha oddiy usulini taʼminlaydi va buni butun sinfga nisbatan ham qoʻllash mumkin.

Dekoratorlar @ belgisini doim kod oldidan qoʻyish bilan ifodalanadi va shu yoʻl bilan kod “bezaladi” (decorating).

Masalan, sinf dekoratori doim bevosita sinf tavsifidan oldin keladi. Quyidagi misolda validation dekoratori butun FormComponentsinfiga nisbatan qoʻllanyapti:

@validation
class FormComponent {
  // code here
}

// The decorator function also needs defining
function validation(target) {
  // validation code here
}

Sinf metodi dekoratori esa bevosita dekoratlanadigan metoddan oldin keladi. Quyidagi misolda validationdekoratori submitmetodiga nisbatan qoʻllanmoqda:

class FormComponent {
  // class code here

  @validation
  submit(data) {
    // method code here
  }
}

// The decorator function also needs defining
function validation(target) {
  // validation code here
}

Dekorator funksiyalar tavsifi ikki parametrni qabul qiladi: value va context. Value  argumenti dekoratlanadigan qiymatga mansub boʻladi (masalan, sinf metodiga), context esa qiymat haqida metamaʼlumotlarni saqlaydi (masalan, u funksiyami yoki yoʻq, uning nomi, statik yoki shaxsiy ekani kabi). Siz kontekstga sinf nusxasi yaratilganda ishga tushadigan initsializator funksiyani ham qoʻshishingiz mumkin.

Dekorator taklifi hozirda 3-bosqichda boʻlib, allaqachon Babelʼga joriy qilingan, demak, uni bemalol sinab koʻrishingiz mumkin.

Xulosa

Xoʻsh, qanday fikrdasiz? Bu yilgi xususiyatlar orasiga nimalarni qoʻshishni istardingiz? Bu xususiyatlar JavaScript uchun ajoyib toʻldirishga aylanishi shubhasiz, biz esa buni amalga oshirishlariga umid qilishda davom etamiz.

 

Manba: 5 Exciting New JavaScript Features in 2024

#javascript
#newfeatures
Mohirdev Telegram

Telegram kanalimizga obuna bo’lishni unutmang

Obuna bo'lish
sitepoint

sitepoint