JavaScript callback funksiyalar

JavaScript’da funksiya ham qiymat: uni o’zgaruvchiga berish, massivga solish va boshqa funksiyaga uzatish mumkin. Oxirgisi — callback, va u asinxron kodning poydevori.

Funksiya — qiymat

JavaScript

function salom() {
return "Salom!";
}

console.log(salom);
console.log(salom());

const nusxa = salom;
console.log(nusxa());

Qavssiz salom — funksiyaning o’zi; qavs bilan salom() — uni chaqirish natijasi. Bu farq callback’da hal qiluvchi.

Callback uzatish

JavaScript

function bajar(vazifa) {
console.log("Boshlandi");
vazifa();
console.log("Tugadi");
}

bajar(() => {
console.log("  → asosiy ish");
});

bajar funksiyasi o’ziga berilgan funksiyani o’zi chaqiradi. Bu qachon va necha marta chaqirishni tashqaridagi funksiya hal qilishini anglatadi.

Callback bilan moslashuvchan funksiya

Callback bir funksiyani turli vazifalarga moslaydi:

JavaScript

function qayta(massiv, amal) {
const natija = [];
for (const element of massiv) {
  natija.push(amal(element));
}
return natija;
}

const sonlar = [1, 2, 3, 4];

console.log(qayta(sonlar, n => n * 2));
console.log(qayta(sonlar, n => n * n));
console.log(qayta(sonlar, n => "№" + n));

Bitta qayta funksiyasi — uch xil natija. Aynan shu tamoyil ustiga massiv metodlari qurilgan.

Asinxron callback — setTimeout

Shu paytgacha kod yuqoridan pastga ketma-ket bajarildi. setTimeout esa callback’ni keyinroq chaqiradi:

JavaScript

console.log("1 — birinchi");

setTimeout(() => {
console.log("3 — bir soniyadan keyin");
}, 1000);

console.log("2 — ikkinchi");

Tartibga e’tibor bering: 2 3 dan oldin chiqdi. setTimeout kodni to’xtatmaydi — u callback’ni navbatga qo’yadi va keyingi qatorga o’tadi.

Natijani callback orqali qaytarish

Asinxron funksiya natijani return bilan qaytara olmaydi:

JavaScript

function malumotOl() {
setTimeout(() => {
  return "ma'lumot";
}, 500);
}

console.log(malumotOl());

undefined chiqdi — malumotOl setTimeout ni ishga tushirib, javob kelishini kutmasdan tugadi. Yechim: natijani callback’ga uzatish:

JavaScript

function malumotOl(tayyor) {
setTimeout(() => {
  tayyor("ma'lumot");
}, 500);
}

malumotOl((natija) => {
console.log("Keldi:", natija);
});

Xatoni ham uzatish

An’anaviy yondashuv — callback’ning birinchi argumenti xato:

JavaScript

function bolish(a, b, tayyor) {
if (b === 0) {
  tayyor("Nolga bo'lib bo'lmaydi", null);
  return;
}
tayyor(null, a / b);
}

bolish(10, 2, (xato, natija) => {
if (xato) console.log("Xato:", xato);
else console.log("Natija:", natija);
});

bolish(10, 0, (xato, natija) => {
if (xato) console.log("Xato:", xato);
else console.log("Natija:", natija);
});

Callback hell

Bir necha asinxron amal ketma-ket kerak bo’lsa, callback’lar ichma-ich joylashadi:

malumotOl((foydalanuvchi) => {
  buyurtmalarOl(foydalanuvchi, (buyurtmalar) => {
    tafsilotOl(buyurtmalar[0], (tafsilot) => {
      console.log(tafsilot);
    });
  });
});

Har qadamda chuqurlik oshadi, xato ushlash qiyinlashadi. Bu naqsh callback hell (yoki “halokat piramidasi”) deb ataladi.

Aynan shu muammoni hal qilish uchun Promise yaratilgan — keyingi darsning mavzusi.

Amaliy mashq

Funksiyani o’zgaruvchiga bering va o’zgaruvchi orqali chaqiring;
massivdagi har elementga callback qo’llaydigan funksiya yozing;
setTimeout bilan 2 soniyadan keyin xabar chiqaring;
callback’ga natija uzatadigan asinxron funksiya yozing;
(xato, natija) naqshi bilan yoshni tekshiruvchi funksiya tuzing;
setTimeout ni 0 ms bilan yozib, u baribir oxirida chiqishini ko’ring.

6-qadam JavaScript’ning navbat tizimini ko’rsatadi.

Qisqacha xulosa

Funksiya — qiymat: uzatish, saqlash va qaytarish mumkin.
Callback — boshqa funksiyaga uzatiladigan va u chaqiradigan funksiya.
Qavssiz f — funksiyaning o’zi, f() — chaqiruv natijasi.
setTimeout callback’ni navbatga qo’yadi, kodni to’xtatmaydi.
Asinxron natija return bilan emas, callback orqali qaytariladi.
Ichma-ich callback’lar callback hell ga olib keladi.

Keyingi darsda Promise — shu muammoning yechimi.