JavaScript callback va HOF: funksiya qiymat sifatida

Qisqacha: JavaScript'da funksiya — oddiy qiymat. Uni o'zgaruvchiga saqlash, boshqa funksiyaga argument qilib berish va funksiyadan qaytarish mumkin. Argument sifatida berilgan funksiya callback deyiladi. Funksiya qabul qiladigan yoki funksiya qaytaradigan funksiya esa HOF (higher-order function) deyiladi.

Bu darsda

• Funksiya nega "qiymat" ekanini tushunasiz: salom va salom() farqini aniq bilasiz.
• Boshqa funksiyani argument sifatida qabul qiladigan funksiya yoza olasiz.
• Callback va HOF atamalarini tushuntira olasiz.
• Funksiya qaytaradigan "funksiya zavodi" yasay olasiz.
• setTimeout bilan callback'ni keyinroq ishga tushira olasiz.

Oldin bilishingiz kerak: return va erta qaytish, Function expression va arrow funksiyalar, Scope asoslari.

1. Nega bu kerak?

O'tgan darsda o'zgaruvchi qayerda ko'rinishini — scope'ni o'rgandik. Endi funksiyalarning eng kuchli imkoniyatiga o'tamiz.

Tasavvur qiling: Malika choyxona dasturi uchun bir necha ishni 3 martadan bajarishi kerak. Mijozlarga salom berish, chek chiqarish, qo'ng'iroq chalish. Birinchi urinishda u shunday yozdi:

function salomni3Marta() {
  for (let i = 1; i <= 3; i++) {
    console.log("Xush kelibsiz!");
  }
}

function qongiroqni3Marta() {
  for (let i = 1; i <= 3; i++) {
    console.log("Dzin-dzin!");
  }
}
// ...va har yangi ish uchun yana bitta funksiya

Ko'ryapsizmi? Sikl har safar bir xil. Faqat sikl ichidagi ish o'zgaryapti. Qani edi, "3 marta takrorla" funksiyasiga ishning o'zini berib yuborsak.

JavaScript'da aynan shunday qilsa bo'ladi. Funksiyaga son yoki satr berganingizdek, boshqa funksiyani ham berish mumkin.

2. Funksiya — oddiy qiymat

Arrow funksiyalar darsida funksiyani o'zgaruvchiga saqlagan edik:

const salom = () => {
  console.log("Assalomu alaykum!");
};

const salomlash = salom;
salomlash(); // Assalomu alaykum!
console.log(typeof salom); // function

Qarang: salom ni boshqa o'zgaruvchiga — salomlash ga — xuddi sonni ko'chirgandek ko'chirdik. Endi ikkala nom ham bitta funksiyani ko'rsatadi. typeof esa uning turini aytdi: function.

JavaScript'da funksiya son va satr kabi qiymat. Bunday tillarda funksiya birinchi darajali (first-class function) deyiladi. Ya'ni funksiya "ikkinchi darajali" alohida narsa emas — u boshqa qiymatlar bilan teng huquqli.

Qiymat bilan uchta ish qila olamiz. Funksiya bilan ham:

Birinchisini bilamiz. Bu darsda qolgan ikkitasini o'rganamiz.

2.1 salom va salom() — eng muhim farq

Bu darsni tushunishning kaliti shu farqda:

• salom — funksiyaning o'zi. Retsept yozilgan daftar.
• salom() — funksiyani chaqirish. Retsept bo'yicha tayyorlangan ovqat, ya'ni return natijasi.

const narxBer = () => 25000;

console.log(narxBer); // [Function: narxBer]
console.log(narxBer()); // 25000

Qavssiz — funksiyaning o'zini uzatasiz. Qavs bilan — uni hoziroq ishlatib, natijasini uzatasiz. Keyingi bo'limlarda bizga aynan qavssiz shakl kerak bo'ladi.

Tekshirib ko'ring: const a = hisobla; va const b = hisobla(); — a va b da nima saqlanadi?

3. Funksiyani argument qilib berish: callback

Malikaning muammosini hal qilamiz. takrorla funksiyasi ikki narsa qabul qiladi: necha marta (n) va nima qilish kerak (amal):

function takrorla(n, amal) {
  for (let i = 1; i <= n; i++) {
    amal();
  }
}

function salomBer() {
  console.log("Xush kelibsiz!");
}

function qongiroqChal() {
  console.log("Dzin-dzin!");
}

takrorla(3, salomBer);
takrorla(2, qongiroqChal);

Konsolda:

Xush kelibsiz!
Xush kelibsiz!
Xush kelibsiz!
Dzin-dzin!
Dzin-dzin!

Keling, sekin ko'ramiz:

1. takrorla(3, salomBer) — ikkinchi argument sifatida salomBer funksiyasining o'zini berdik (qavssiz!).
2. takrorla ichida amal parametri endi shu funksiyani saqlaydi.
3. Sikl ichida amal() — qavs bilan — funksiya chaqiriladi. Bu uch marta takrorlanadi.

Sikl bir joyda yozildi. Yangi ish kerak bo'lsa — faqat yangi kichik funksiya yozasiz, takrorla o'zgarmaydi.

3.1 Callback nima?

Callback — boshqa funksiyaga argument sifatida berilgan va o'sha funksiya ichida chaqiriladigan funksiya. Yuqoridagi misolda salomBer va qongiroqChal — callback'lar.

Nomi inglizcha "call back" — "qayta qo'ng'iroq qilish" iborasidan olingan. Hayotdan o'xshatish: choyxonada osh buyurtma qilasiz va ofitsiantga telefon raqamingizni qoldirasiz. "Tayyor bo'lsa, qo'ng'iroq qiling" deysiz. Qachon qo'ng'iroq qilishni ofitsiant hal qiladi. Siz faqat "qanday bog'lanish" kerakligini berib qo'ydingiz.

Callback ham shunday: siz funksiyani berasiz, uni qachon va necha marta chaqirishni qabul qilgan funksiya hal qiladi. takrorla o'z callback'ini darhol, sikl ichida chaqiradi. Ba'zi callback'lar esa keyinroq — biror ish bitgach chaqiriladi. Buni shu darsning oxirida, setTimeout misolida ko'ramiz.

3.2 Callback'ga qiymat berish

Qabul qilgan funksiya callback'ni argument bilan ham chaqira oladi. takrorla har safar joriy raqamni bersin:

function takrorla(n, amal) {
  for (let i = 1; i <= n; i++) {
    amal(i);
  }
}

function mijozniChaqir(raqam) {
  console.log(`${raqam}-mijoz, kassaga keling`);
}

takrorla(3, mijozniChaqir);

Konsolda:

1-mijoz, kassaga keling
2-mijoz, kassaga keling
3-mijoz, kassaga keling

takrorla ichida amal(i) yozilgan. Demak mijozniChaqir har safar raqam parametriga i ni oladi: 1, 2, 3. Qiymatni callback'ni chaqirgan funksiya beradi.

3.3 Callback'ni joyida yozish

Callback faqat bir joyda kerak bo'lsa, unga alohida nom berish shart emas. Arrow funksiyani to'g'ridan-to'g'ri argument o'rniga yozsa bo'ladi:

function takrorla(n, amal) {
  for (let i = 1; i <= n; i++) {
    amal(i);
  }
}

takrorla(2, (raqam) => {
  console.log(`${raqam}-choynak tayyor`);
});

Konsolda:

1-choynak tayyor
2-choynak tayyor

Bunday nomsiz funksiyani arrow funksiyalar darsida anonim funksiya deb atagan edik. Real kodda callback'larning ko'pchiligi aynan shunday — joyida, arrow bilan yoziladi.

Tekshirib ko'ring: takrorla(4, (r) => console.log(r * 10)); nima chiqaradi?

4. Callback natija qaytarsa: kalkulyator

Callback faqat biror narsa chiqarib qolmay, qiymat qaytarishi ham mumkin. Uni qabul qilgan funksiya shu qiymatdan foydalanadi.

Kalkulyator yasaymiz. kalkulyator ikkita son va qanday amal bajarish kerakligini qabul qiladi:

function kalkulyator(a, b, amal) {
  const natija = amal(a, b);
  return `Natija: ${natija}`;
}

const qoshish = (a, b) => a + b;
const ayirish = (a, b) => a - b;
const kopaytirish = (a, b) => a * b;

console.log(kalkulyator(10, 4, qoshish)); // Natija: 14
console.log(kalkulyator(10, 4, ayirish)); // Natija: 6
console.log(kalkulyator(10, 4, kopaytirish)); // Natija: 40

kalkulyator qanday hisoblashni bilmaydi. U faqat "sonlarni ol, amalga ber, natijani chiroyli qilib qaytar" deb biladi. Hisob-kitob qoidasi esa callback ichida.

Yangi amal kerakmi? kalkulyator ga tegmasdan, joyida yozasiz:

function kalkulyator(a, b, amal) {
  const natija = amal(a, b);
  return `Natija: ${natija}`;
}

console.log(kalkulyator(2, 10, (a, b) => a ** b)); // Natija: 1024

4.1 O'zingiz to'ldiring

Taksi narxini hisoblaydigan funksiya bor. Unga tarif — callback — beriladi:

function taksi(km, tarif) {
  const narx = ___(km);
  return `${km} km — ${narx} so'm`;
}

const ekonom = (km) => 7000 + km * 2000;

console.log(taksi(5, ekonom)); // 5 km — 17000 so'm

Bo'sh joyga nima yoziladi?

5. Higher-order function (HOF)

Endi yangi atamani nomlash vaqti keldi.

Yuqori tartibli funksiya (higher-order function, qisqasi HOF) — boshqa funksiyani argument sifatida qabul qiladigan yoki natija sifatida funksiya qaytaradigan funksiya. Ikki shartdan bittasi bajarilsa yetarli.

Hayotdan o'xshatish: taksi dispetcheri. U o'zi mashina haydamaydi. U "kim boradi" (haydovchi) ni qabul qiladi va unga ishni topshiradi. Dispetcher — HOF, haydovchi — callback.

Shu paytgacha yozganlarimiz:

Callback va HOF — bir tanganing ikki tomoni. HOF — qabul qiluvchi, callback — beriluvchi.

Tekshirib ko'ring: kalkulyator(8, 2, qoshish) chaqiruvida qaysi biri HOF, qaysi biri callback?

6. Funksiyadan funksiya qaytarish

HOF'ning ikkinchi turi — funksiya yasab qaytaradigan funksiya.

Choyxonada har xil aksiyalar bor: yangi yilda 20%, "qora juma" da 50% chegirma. Har aksiya uchun alohida funksiya yozish o'rniga, chegirma funksiyalarini "ishlab chiqaradigan zavod" yasaymiz:

function chegirmaYaratuvchi(foiz) {
  return (narx) => narx - (narx * foiz) / 100;
}

const yangiYil = chegirmaYaratuvchi(20);
const qoraJuma = chegirmaYaratuvchi(50);

console.log(yangiYil(100000)); // 80000
console.log(qoraJuma(100000)); // 50000
console.log(yangiYil(40000)); // 32000

Nima bo'ldi, qadamma-qadam:

1. chegirmaYaratuvchi(20) chaqirildi. U hech narsa hisoblamadi — faqat yangi arrow funksiya qaytardi.
2. Shu qaytgan funksiyani yangiYil ga saqladik. Endi yangiYil — oddiy funksiya, u narx qabul qiladi.
3. yangiYil(100000) chaqirilganda 20% chegirma hisoblandi: 80000.

Bitta "zavod" dan istalgancha chegirma funksiyasi olish mumkin: chegirmaYaratuvchi(10), chegirmaYaratuvchi(35). Har biri o'z foizi bilan ishlaydi.

6.1 Qaytgan funksiya foiz ni qayerdan biladi?

Bu yerda bir sirli narsa bor. chegirmaYaratuvchi(20) ishini tugatdi. Scope darsida aytgan edik: funksiya tugasa, uning o'zgaruvchilari yo'qoladi. Unda yangiYil keyinroq foiz ni qanday ishlatyapti?

Scope darsidagi gap oddiy holat uchun rost: funksiya tugasa, o'zgaruvchilari haqiqatan yo'qoladi. Lekin bu yerda ichki funksiya tashqariga qaytarildi va u foiz ni ishlatadi. Bunday holatda JavaScript foiz ni o'chirmay, qaytgan funksiya uchun saqlab qo'yadi.

Qisqa javob: ichki funksiya o'zi yaratilgan joydagi o'zgaruvchilarni "eslab qoladi". Bu hodisa closure deyiladi. U JavaScript'ning eng muhim mavzularidan biri, shuning uchun unga alohida darslar ajratilgan — Closure: funksiya o'z muhitini eslab qoladi. Hozircha shuni bilish yetarli: qaytgan funksiya o'z "zavod sozlamasini" unutmaydi.

6.2 Darhol chaqirish

Qaytgan funksiyani o'zgaruvchiga saqlamasdan, darhol chaqirsa ham bo'ladi:

function chegirmaYaratuvchi(foiz) {
  return (narx) => narx - (narx * foiz) / 100;
}

console.log(chegirmaYaratuvchi(10)(50000)); // 45000

Birinchi qavs — (10) — funksiyani yasaydi. Ikkinchi qavs — (50000) — yasalgan funksiyani chaqiradi. Bunday yozuvni kutubxonalarda uchratasiz, lekin boshida o'zgaruvchiga saqlab yozish tushunarliroq.

Tekshirib ko'ring: const f = chegirmaYaratuvchi(25); qatoridan keyin f da nima bor? f(8000) nimaga teng?

7. Hayotiy misol: setTimeout

Callback'larni siz o'zingiz yozgan HOF'lardagina emas, JavaScript'ning tayyor funksiyalarida ham ko'p uchratasiz. Eng mashhuri — setTimeout.

setTimeout(callback, ms) — callback'ni ko'rsatilgan millisekunddan keyin bir marta chaqiradi (1000 ms = 1 soniya). U brauzerda ham, Node'da ham ishlaydi:

console.log("Buyurtma qabul qilindi");

setTimeout(() => {
  console.log("Taksi yetib keldi!");
}, 1000);

console.log("Haydovchi yo'lda...");

Konsolda:

Buyurtma qabul qilindi
Haydovchi yo'lda...
Taksi yetib keldi!

Tartibga e'tibor bering. setTimeout kodda o'rtada turibdi, lekin uning callback'i oxirida ishladi. setTimeout callback'ni "eslab qo'ydi" va dasturni to'xtatmay davom etdi. Bir soniyadan keyin esa callback'ni chaqirdi — xuddi ofitsiant osh tayyor bo'lganda qo'ng'iroq qilgandek.

Demak callback'lar ikki xil bo'ladi:

• Darhol chaqiriladigan — takrorla va kalkulyator dagidek. HOF ishlayotgan paytda chaqiriladi.
• Keyinroq chaqiriladigan — setTimeout dagidek. Biror hodisa (vaqt o'tishi, tugma bosilishi, serverdan javob) bo'lganda chaqiriladi.

Taymerlarning barcha nozik tomonlarini setTimeout va setInterval darsida ko'ramiz.

8. Ko'p uchraydigan xatolar

8.1 Callback o'rniga chaqiruv natijasini berish

Eng ko'p uchraydigan xato — callback'ni qavs bilan yozib yuborish:

function takrorla(n, amal) {
  for (let i = 1; i <= n; i++) {
    amal();
  }
}

function salomBer() {
  console.log("Salom!");
}

takrorla(3, salomBer());

Konsolda bir marta Salom! chiqadi, keyin xato:

TypeError: amal is not a function

Tarjimasi: "amal funksiya emas". salomBer() qavs bilan yozilgani uchun u darhol chaqirildi (shuning uchun bitta Salom!). Uning natijasi — undefined — takrorla ga borib qoldi. undefined() ni esa chaqirib bo'lmaydi.

Yechim: qavssiz yozing — takrorla(3, salomBer).

Callback'ga o'zingiz argument bermoqchi bo'lsangiz-chi? Masalan, ismliSalom("Ali") ni 3 marta? Uni arrow funksiyaga "o'rab" bering:

function takrorla(n, amal) {
  for (let i = 1; i <= n; i++) {
    amal();
  }
}

function ismliSalom(ism) {
  console.log(`Salom, ${ism}!`);
}

takrorla(2, () => ismliSalom("Ali"));

Konsolda:

Salom, Ali!
Salom, Ali!

Endi takrorla ga funksiya bordi. Har chaqirilganda u ismliSalom("Ali") ni bajaradi.

8.2 setTimeout ga chaqiruvni berish

Xuddi shu xato setTimeout da:

function eslat() {
  console.log("Dori ichish vaqti!");
}

setTimeout(eslat(), 2000);

Node'da xabar darhol chiqadi (2 soniya kutilmaydi), keyin xato (telefonda o'qish uchun ikki qatorga bo'ldik):

TypeError [ERR_INVALID_ARG_TYPE]: The "callback" argument
must be of type function. Received undefined

Tarjimasi: "callback argumenti funksiya bo'lishi kerak, undefined keldi". Brauzerda xato chiqmasligi mumkin, lekin kod baribir noto'g'ri ishlaydi: eslatma kutmasdan chiqadi. Yechim: setTimeout(eslat, 2000).

8.3 Callback'ni umuman bermaslik

function kalkulyator(a, b, amal) {
  return amal(a, b);
}

console.log(kalkulyator(5, 3));

TypeError: amal is not a function

Uchinchi argument berilmadi, demak amal = undefined. Himoya uchun HOF boshida tekshiruv qo'yish mumkin — erta qaytish bilan:

function kalkulyator(a, b, amal) {
  if (typeof amal !== "function") {
    return "Xato: amal berilmadi";
  }
  return amal(a, b);
}

console.log(kalkulyator(5, 3)); // Xato: amal berilmadi
console.log(kalkulyator(5, 3, (a, b) => a + b)); // 8

8.4 Callback'da return ni unutish

function kalkulyator(a, b, amal) {
  return amal(a, b);
}

console.log(kalkulyator(5, 3, (a, b) => { a + b; })); // undefined

Xato chiqmaydi, lekin natija undefined. Arrow funksiyada jingalak qavs { } ochilsa, yashirin return ishlamaydi. Yechim: qavssiz yozing — (a, b) => a + b — yoki return ni qo'shing: (a, b) => { return a + b; }.

8.5 Qaytgan funksiyani chaqirishni unutish

function chegirmaYaratuvchi(foiz) {
  return (narx) => narx - (narx * foiz) / 100;
}

const aksiya = chegirmaYaratuvchi(20);
console.log(aksiya); // [Function (anonymous)]

Konsolda son o'rniga [Function (anonymous)] — "nomsiz funksiya". aksiya — funksiya, uni chaqirish kerak: aksiya(100000).

9. Mashqlar

1-mashq (oson): Ikki marta bajar

ikkiMarta(amal) funksiyasini yozing. U berilgan callback'ni ketma-ket 2 marta chaqirsin. So'ng unga Choy tayyor! deb chiqaradigan funksiyani bering.

function ikkiMarta(amal) {
  amal();
  amal();
}

function choyTayyor() {
  console.log("Choy tayyor!");
}

ikkiMarta(choyTayyor);

Choy tayyor!
Choy tayyor!

2-mashq (o'rta): Taksi tariflari

taksi(km, tarif) funksiyasini yozing. U tarif callback'iga masofani berib, narxni oladi va Narx: ... so'm satrini qaytaradi. Ikki tarif yarating:

• ekonom — 7000 so'm + har km uchun 2000 so'm.
• komfort — 10000 so'm + har km uchun 3000 so'm.

6 km uchun ikkala tarif narxini chiqaring.

function taksi(km, tarif) {
  const narx = tarif(km);
  return `Narx: ${narx} so'm`;
}

const ekonom = (km) => 7000 + km * 2000;
const komfort = (km) => 10000 + km * 3000;

console.log(taksi(6, ekonom)); // Narx: 19000 so'm
console.log(taksi(6, komfort)); // Narx: 28000 so'm

3-mashq (qiyin): Ko'paytirish jadvali zavodi

Ikki funksiya yozing:

1. oraliqdaBajar(boshi, oxiri, amal) — boshi dan oxiri gacha har bir son uchun amal(son) ni chaqiradi.
2. jadvalYaratuvchi(son) — funksiya qaytaradi. Qaytgan funksiya i ni olib, 7 x 3 = 21 ko'rinishidagi qatorni chiqaradi.

Keyin ikkalasini birlashtirib, 7 ning jadvalini 1 dan 4 gacha chiqaring.

function oraliqdaBajar(boshi, oxiri, amal) {
  for (let i = boshi; i <= oxiri; i++) {
    amal(i);
  }
}

function jadvalYaratuvchi(son) {
  return (i) => console.log(`${son} x ${i} = ${son * i}`);
}

const yettilik = jadvalYaratuvchi(7);
oraliqdaBajar(1, 4, yettilik);

7 x 1 = 7
7 x 2 = 14
7 x 3 = 21
7 x 4 = 28

10. Real ishda

Callback va HOF — zamonaviy JavaScript'ning asosi. Deyarli har bir real loyihada ularni har kuni yozasiz:

• Massiv metodlari: map, filter, sort — hammasi callback qabul qiladigan HOF. Ular bilan map va filter darslarida ishlaymiz.
• Brauzer hodisalari: "tugma bosilganda shu funksiyani chaqir" — addEventListener aynan callback qabul qiladi.
• Server: Express'da har bir manzil (/login, /orders) uchun callback yoziladi — so'rov kelganda u chaqiriladi.
• React: onClick={() => ...} — tugmaga callback berish.
• Asinxron kod: taymerlar va serverdan javob kutish ham callback'lardan boshlanadi.

Intervyuda "callback nima?" va "HOF'ga misol keltiring" savollari juda ko'p beriladi. Yaxshi javob: "callback — boshqa funksiyaga argument sifatida beriladigan funksiya; HOF — funksiya qabul qiladigan yoki qaytaradigan funksiya, masalan map yoki setTimeout".

Xulosa

• JavaScript'da funksiya — qiymat: saqlanadi, argument qilib beriladi, qaytariladi.
• salom — funksiyaning o'zi, salom() — uni chaqirish natijasi. Callback qavssiz beriladi.
• Callback — boshqa funksiyaga berilib, o'sha funksiya ichida chaqiriladigan funksiya.
• HOF — funksiya qabul qiladigan yoki funksiya qaytaradigan funksiya.
• Funksiya qaytaradigan funksiya — "zavod": bitta shablondan ko'p sozlangan funksiya yasaydi.
• setTimeout(callback, ms) — callback'ni keyinroq chaqiradigan tayyor HOF.

Keyingi dars: Pure funksiya va side effect — qaysi funksiyaga ishonsa bo'ladi va nega ba'zi funksiyalar "tashqi dunyo" ni o'zgartirmasligi kerakligini o'rganamiz.