JavaScript pure funksiya va side effect: ishonchli funksiya yozish

Qisqacha: Pure (toza) funksiya — bir xil argumentlarga doim bir xil natija qaytaradigan va tashqaridagi hech narsani o'zgartirmaydigan funksiya. Side effect (yon ta'sir) — funksiyaning natija qaytarishdan tashqari qiladigan ishi. Masalan, tashqi o'zgaruvchini o'zgartirish yoki konsolga yozish. Toza funksiyani tushunish, tekshirish va qayta ishlatish oson.

Bu darsda

• Pure funksiyaning ikki qoidasini tushuntira olasiz.
• Side effect nima ekanini va uning asosiy turlarini taniysiz.
• Funksiyaga qarab "toza yoki toza emas" deb ayta olasiz.
• Toza bo'lmagan funksiyani toza funksiyaga aylantira olasiz.
• Toza funksiyani oddiy tekshiruv bilan testlay olasiz.

Oldin bilishingiz kerak: return va erta qaytish, Scope asoslari, Funksiya — qiymat: callback va HOF.

1. Nega bu kerak?

Scope darsida funksiya tashqi let o'zgaruvchini o'zgartira olishini ko'rdik. O'tgan darsda esa funksiyalarni bir-biriga uzatishni o'rgandik. Endi muhim savol: qanday funksiyaga ishonsa bo'ladi?

Ikki narsani solishtiring:

• Kalkulyator. 2 + 2 ni bugun bossangiz ham, ertaga bossangiz ham — 4. U cho'ntagingizdagi pulga ham tegmaydi.
• Bankomat. Bir xil karta, bir xil "100 000 so'm yechish" tugmasi. Lekin har safar hisobingiz kamayadi. Uchinchi urinishda esa "mablag' yetarli emas" deyishi mumkin.

Kalkulyatorga o'xshagan funksiyalar toza deyiladi. Ular bilan ishlash xotirjam: nima qaytarishini oldindan bilasiz. Bankomatga o'xshaganlari esa kerak, lekin ehtiyotkorlik talab qiladi. Bu darsda ikkalasini farqlashni o'rganamiz.

2. Pure funksiya nima?

Avval misol:

function umumiyNarx(narx, soni) {
  return narx * soni;
}

console.log(umumiyNarx(3000, 2)); // 6000
console.log(umumiyNarx(3000, 2)); // 6000
console.log(umumiyNarx(3000, 2)); // 6000

Uch marta chaqirdik — uch marta 6000. Yuz marta chaqirsak ham shunday bo'ladi. Funksiya faqat o'z parametrlariga qaraydi va tashqarida hech narsani o'zgartirmaydi.

Nomga ham e'tibor bering: umumiyNarx — fe'l emas, ot. Funksiya e'lon qilish darsida aytganimizdek, natija qaytaradigan funksiyaga natijaning nomi berilishi ham odatiy: umumiyNarx — "umumiy narxni beradi". Bu darsdagi toza funksiyalar ko'pincha shunday nomlanadi.

Toza funksiya (pure function) — ikki qoidaga bo'ysunadigan funksiya. "Pure" va "toza" — bitta narsa. Dasturchilar ko'pincha inglizchasini aytadi, shuning uchun ikkalasini ham bilib qo'ying:

1. Bir xil kirish — bir xil natija. Argumentlar bir xil bo'lsa, natija doim bir xil.
2. Yon ta'sir yo'q. Funksiya tashqaridagi hech narsani o'zgartirmaydi (yon ta'sirni 4-bo'limda batafsil ko'ramiz). Uning yagona "izi" — return qilgan qiymati.

Ikki qoidadan bittasi buzilsa — funksiya toza emas. Keling, har bir qoidani alohida ko'ramiz.

3. 1-qoida: bir xil kirish — bir xil natija

Bu xususiyat determinizm deyiladi: natija oldindan aniq belgilangan, tasodifga bog'liq emas. Uni qanday buzish mumkinligini ko'raylik.

3.1 Global o'zgaruvchiga bog'liqlik

Jasur valyuta ayirboshlash funksiyasini yozdi:

let dollarKursi = 12600;

function somga(dollar) {
  return dollar * dollarKursi;
}

console.log(somga(100)); // 1260000
dollarKursi = 12750;
console.log(somga(100)); // 1275000

somga(100) — bir xil argument, lekin ikki xil natija. Chunki funksiya parametrdan tashqari yana bir narsaga — global dollarKursi ga qaraydi. Bu yashirin bog'liqlik: chaqiruvga qarab, natija nimaga bog'liqligini bilib bo'lmaydi.

Yechim — kursni ham parametr qilib berish:

function somga(dollar, kurs) {
  return dollar * kurs;
}

console.log(somga(100, 12600)); // 1260000
console.log(somga(100, 12750)); // 1275000

Endi natija faqat argumentlarga bog'liq. somga(100, 12600) qachon chaqirilmasin — doim 1260000.

Bo'sh joyni to'ldiring: toza somga funksiyasi nechta parametr qabul qiladi?

Maslahat: Global const dan o'qish tozalikni buzmaydi. const SOLIQ = 12; hech qachon o'zgarmaydi, demak natija ham o'zgarmaydi. Muammo faqat o'zgarishi mumkin bo'lgan let bilan. Nega SOLIQ katta harflarda? let va const darsida ko'rganimizdek, oldindan ma'lum sozlamalar (soliq foizi, narx) shunday yoziladi — const ekani darrov ko'rinsin.

3.2 Tasodif va vaqt

Math obyekti darsida Math.random() bilan tanishgan edik. U har safar yangi tasodifiy son beradi:

function omadliChegirma(narx) {
  const foiz = Math.floor(Math.random() * 30);
  return narx - (narx * foiz) / 100;
}

console.log(omadliChegirma(100000));
console.log(omadliChegirma(100000));

Bu kodni ishga tushirsangiz, har safar boshqa sonlar chiqadi — masalan 86000 va 93000. Bir xil argument, turli natija — funksiya toza emas.

Joriy vaqtni o'qiydigan funksiyalar ham shunday: bugun bir natija, ertaga boshqa. Sana va vaqt bilan Date darsida ishlaymiz.

Bu "yomon" degani emas. O'yinda tasodif kerak, chekda sana kerak. Faqat bunday funksiyalar toza emasligini bilib turish kerak.

Tekshirib ko'ring: Quyidagi funksiya toza bo'ladimi?

js

let chegirma = 5000;
function yakuniyNarx(narx) {
  return narx - chegirma;
}

4. 2-qoida: side effect yo'q

Dorining qutisida "nojo'ya ta'sirlar" ro'yxati bo'ladi. Dori asosiy ishini qiladi, lekin yo'l-yo'lakay boshqa narsaga ham ta'sir qiladi: uyqu keltiradi, ishtahani ochadi. Funksiyada ham shunday.

Yon ta'sir (side effect) — funksiyaning natija qaytarishdan tashqari qiladigan har qanday o'zgarishi. Ya'ni funksiya tugagandan keyin ham dunyoda qolgan "izi". "Yon ta'sir" va "side effect" — bitta narsa. Dasturchilar orasida inglizchasi ko'p ishlatiladi, shuning uchun bundan keyin "side effect" deymiz.

4.1 Eng ko'p uchraydigan side effect: tashqi o'zgaruvchi

let jami = 0;

function choyQosh(narx) {
  jami = jami + narx;
}

choyQosh(3000);
choyQosh(3000);
console.log(jami); // 6000

choyQosh hech narsa qaytarmaydi. Uning butun ishi — tashqaridagi jami ni o'zgartirish. Bu side effect.

Toza varianti — joriy summani parametr qilib olish va yangi summani qaytarish:

function choyBilanJami(jami, narx) {
  return jami + narx;
}

let hisob = 0;
hisob = choyBilanJami(hisob, 3000);
hisob = choyBilanJami(hisob, 3000);
console.log(hisob); // 6000

Natija bir xil. Nomini ham o'zgartirdik: "qo'sh" biror narsani o'zgartiradigandek eshitiladi, toza funksiya esa faqat yangi jamini hisoblab beradi.

"Lekin hisob ham let, u ham o'zgaryapti-ku?" — to'g'ri savol. O'zgarish yo'qolmadi. U endi funksiya ichida yashirinmay, ko'z oldimizdagi hisob = ... qatorlarida turibdi. Kodni o'qigan odam hisob qachon o'zgarishini darrov ko'radi. Nega bu muhimligini 7-bo'limda ko'ramiz.

4.2 Side effect turlari

Side effect faqat global o'zgaruvchi emas. Funksiya "tashqi dunyo" ga har qanday ta'sir qilsa — bu side effect:

Oxirgi to'rttasini hali o'rganmadik — hozir bilish shart emas, faqat qisqacha:

• DOM — sahifadagi tugma, matn, rasm kabi elementlar. JavaScript ularni o'zgartira oladi.
• Tarmoq so'rovi — internet orqali serverga xabar yuborish.
• Massiv — qiymatlar ro'yxati, obyekt — nomlangan qiymatlar to'plami. Ikkalasini keyingi modulda o'rganamiz.
• Backend — saytning serverda ishlaydigan, foydalanuvchiga ko'rinmaydigan qismi.

Hozircha shuni eslab qoling: bular ham "tashqi dunyoni" o'zgartiradi. Massiv yoki obyektni o'zgartirish mutatsiya deyiladi. Unga havola semantikasi darsida alohida to'xtalamiz — o'sha paytda hammasi tushunarli bo'ladi.

4.3 console.log ham side effect?

Ha. Konsolga yozish — funksiyadan tashqaridagi narsani (ekranni) o'zgartirish. Funksiya tugagandan keyin ham yozuv ekranda qoladi.

Unda oldingi darslardagi console.log li funksiyalarimiz noto'g'ri edimi? Yo'q. Ular o'rganish uchun konsolga yozdi — bu to'g'ri edi, console.log dan qo'rqish kerak emas. Endi faqat bitta yangi odat qo'shamiz: hisoblovchi funksiya natijani return qilsin, chiqarishni esa alohida qiling.

Ikkala variant farqini ko'ring:

// Toza emas: natijani o'zi chiqaradi
function salomChiqar(ism) {
  console.log(`Salom, ${ism}!`);
}

// Toza: natijani qaytaradi, nima qilishni chaqiruvchi hal qiladi
function salomMatni(ism) {
  return `Salom, ${ism}!`;
}

salomMatni natijasini konsolga chiqarsa ham, Telegram xabariga qo'shsa ham, sahifaga yozsa ham bo'ladi. salomChiqar esa faqat konsolga yozishni biladi. Toza funksiya ko'proq joyda qayta ishlatiladi.

Tekshirib ko'ring: function ikkilantir(son) { return son * 2; } toza funksiyami?

5. Toza yoki toza emas? Namunalar jadvali

Har bir funksiyani ikki qoida bo'yicha tekshiramiz. Avval "Sababi" ustuniga qaramay, o'zingiz javob berib ko'ring:

Ikkinchi qatorga e'tibor bering. Satr metodlari asl satrni o'zgartirmaydi — yangisini qaytaradi. Shuning uchun ular toza.

6. Nega toza funksiya yaxshi?

6.1 Tekshirish (test) oson

Test — kod to'g'ri ishlashini tekshiradigan kichik kod. Eng oddiy test: funksiyani chaqirib, natijani kutilgan qiymat bilan === orqali solishtirish.

Toza funksiyani testlash juda qulay:

function umumiyNarx(narx, soni) {
  return narx * soni;
}

console.log(umumiyNarx(3000, 2) === 6000); // true
console.log(umumiyNarx(8000, 0) === 0); // true
console.log(umumiyNarx(8000, 3) === 24000); // true

Hech qanday tayyorgarlik kerak emas. Testni istalgancha ishga tushiring — natija doim bir xil.

Endi toza bo'lmagan funksiyani testlab ko'ramiz:

let jami = 0;

function choyQosh(narx) {
  jami = jami + narx;
}

choyQosh(3000);
console.log(jami === 3000); // true

choyQosh(3000);
console.log(jami === 3000); // false

Bir xil chaqiruv, bir xil tekshiruv — birinchisi o'tdi, ikkinchisi yiqildi (ya'ni false chiqdi — test o'tmadi). Chunki funksiya natijasi global jami ning oldingi holatiga bog'liq. Bunday testlar "ba'zan o'tadi, ba'zan yo'q" — dasturchilarning eng yoqtirmagan narsasi.

6.2 Tushunish oson

Toza funksiyani tushunish uchun faqat uning o'zini o'qish kifoya. Parametrlarga qarang, return ga qarang — tamom. Qolgan 2000 qator kodni o'qish shart emas.

Toza funksiyaning chaqiruvini natijasi bilan almashtirsa ham bo'ladi. umumiyNarx(3000, 2) yozilgan joyga 6000 qo'ysangiz, dastur xuddi shunday ishlaydi. Toza bo'lmagan choyQosh(3000) bilan buni qilib bo'lmaydi — u jami ni ham o'zgartiradi.

6.3 Qayta ishlatish va xavfsizlik oson

Toza funksiyani istalgan joyga ko'chirib ishlatasiz — u hech narsani buzmaydi. Uni callback qilib HOF ga berish ham xavfsiz. Bir marta hisoblangan javobni saqlab qo'yib, keyingi safar qayta hisoblamaslik ham mumkin. Bu usul memoization deyiladi, saqlangan javoblar esa kesh deb ataladi. U faqat toza funksiyada ishonchli ishlaydi. Hozir bilish shart emas — Memoization darsida o'rganamiz.

7. Side effect'siz dastur bo'lmaydi

"Unda hamma funksiyani toza qilamizmi?" — yo'q. Side effect'siz dastur hech narsa qilmaydi: ekranga chiqarmaydi, saqlamaydi, xabar yubormaydi. Foydalanuvchi aynan side effect'larni ko'radi.

Dasturchilar boshqa qoidaga amal qiladi: hisob-kitob — toza funksiyalarda, side effect'lar — alohida, bir joyda.

Oshxonani eslang. Oshpaz faqat taom tayyorlaydi — mijoz bilan gaplashmaydi, pul olmaydi. Ofitsiant esa tayyor taomni mijozga olib boradi. Toza funksiya — oshpaz: faqat hisoblaydi. Side effect'li funksiya — ofitsiant: natijani tashqi dunyoga yetkazadi.

Aralash — hisob va chiqarish bitta funksiyada:

function chekChiqar(taom, narx, soni) {
  const jami = narx * soni * 1.1; // +10% xizmat haqi
  console.log(`${taom} x${soni} — ${jami} so'm`);
}

chekChiqar("Osh", 30000, 2);

Konsolda:

Osh x2 — 66000 so'm

Ajratilgan — hisob toza, chiqarish alohida:

function jamiHisobla(narx, soni) {
  return narx * soni * 1.1; // +10% xizmat haqi
}

function chekMatni(taom, soni, jami) {
  return `${taom} x${soni} — ${jami} so'm`;
}

const jami = jamiHisobla(30000, 2);
console.log(chekMatni("Osh", 2, jami));

Konsolda:

Osh x2 — 66000 so'm

Natija bir xil. Lekin endi jamiHisobla va chekMatni ni alohida testlash mumkin. Ertaga chekni Telegram'ga yuborish kerak bo'lsa, faqat oxirgi qator o'zgaradi.

8. Ko'p uchraydigan xatolar

8.1 Global const ni funksiya ichida o'zgartirishga urinish

const jami = 0;

function qosh(narx) {
  jami = jami + narx;
}

qosh(5000);

TypeError: Assignment to constant variable.

Tarjimasi: "const bilan e'lon qilingan nomga yangi qiymat berib bo'lmaydi". E'tibor bering: xato const jami = 0 qatorida emas, qosh(5000) chaqirilganda chiqadi. Funksiya e'lon qilinganda uning ichi hali bajarilmaydi — qosh ni chaqirmasangiz, xato ham chiqmaydi. Funksiya side effect qilmoqchi bo'ldi, lekin const ruxsat bermadi. Bu xato aslida sizga yordam beryapti. const ni let ga almashtirish o'rniga, funksiyani toza qiling:

function qosh(jami, narx) {
  return jami + narx;
}

const yangiJami = qosh(0, 5000);
console.log(yangiJami); // 5000

8.2 return o'rniga console.log

function narxHisobla(narx, soni) {
  console.log(narx * soni);
}

const jami = narxHisobla(3000, 2) + 5000;
console.log(jami);

Konsolda:

6000
NaN

Funksiya natijani chiqardi, lekin qaytarmadi. return bo'lmagani uchun chaqiruv natijasi undefined, undefined + 5000 esa NaN. Xato matni chiqmaydi — shuning uchun bu xato ayyor. Yechim: hisoblovchi funksiya return qilsin, chiqarishni chaqiruvchi o'zi hal qilsin.

8.3 Nomi yolg'on gapiradigan funksiya

let balans = 100000;

function balansniKorsat() {
  balans = balans - 1000; // "xizmat haqi"
  return balans;
}

Nomi "ko'rsat" deydi, lekin funksiya yashirincha pul yechadi. Uni har chaqirganda balans kamayadi. Bunday funksiya haftalab xato qidirishga sabab bo'ladi.

Qoida: side effect qiladigan funksiya nomi buni aytsin: balansdanYech, chekniChiqar, buyurtmaniSaqla. Natija nomi bilan atalgan (umumiyNarx, taksiNarxi) yoki Hisobla bilan tugaydigan (jamiHisobla) funksiyalar esa toza bo'lsin — ular faqat javob beradi.

9. Mashqlar

1-mashq (oson): Toza yoki yo'q?

Har bir funksiya toza yoki yo'qligini va sababini ayting:

const QQS = 12;
let mehmonlar = 0;

const a = (narx) => narx + (narx * QQS) / 100;
const b = () => { mehmonlar = mehmonlar + 1; };
const c = (ism) => `Xush kelibsiz, ${ism}!`;
const d = (ism) => console.log(`Xush kelibsiz, ${ism}!`);

2-mashq (o'rta): Bankomatni toza qiling

Quyidagi funksiya global balans ni o'zgartiradi:

let balans = 100000;

function pulYech(summa) {
  balans = balans - summa;
}

Uning o'rniga toza yangiBalans(balans, summa) funksiyasini yozing. U yangi balansni qaytarsin. Agar summa balansdan katta bo'lsa — balans o'zgarmasin (eski balansni qaytarsin). Uchta test yozing.

function yangiBalans(balans, summa) {
  if (summa > balans) {
    return balans;
  }
  return balans - summa;
}

console.log(yangiBalans(100000, 30000) === 70000); // true
console.log(yangiBalans(100000, 150000) === 100000); // true
console.log(yangiBalans(100000, 100000) === 0); // true

3-mashq (qiyin): Taksi buyurtmasini ajrating

Bu funksiya uch ishni aralash bajaradi: narxni hisoblaydi, global hisoblagichni oshiradi va chek chiqaradi.

let buyurtmalar = 0;

function buyurtmaBer(ism, km) {
  const narx = 7000 + km * 2500;
  buyurtmalar = buyurtmalar + 1;
  console.log(`${buyurtmalar}. ${ism}: ${km} km — ${narx} so'm`);
}

Uni qayta yozing:

1. Toza taksiNarxi(km) — narxni qaytaradi.
2. Toza chekQatori(tartib, ism, km, narx) — chek satrini qaytaradi.
3. buyurtmaBer(ism, km) — ikkalasidan foydalanadi va barcha side effect'lar faqat shu yerda bo'ladi. Nomi fe'l bilan, chunki u ish bajaradi.

So'ng Ali (4 km) va Malika (10 km) uchun buyurtma bering.

function taksiNarxi(km) {
  return 7000 + km * 2500;
}

function chekQatori(tartib, ism, km, narx) {
  return `${tartib}. ${ism}: ${km} km — ${narx} so'm`;
}

let buyurtmalar = 0;

function buyurtmaBer(ism, km) {
  const narx = taksiNarxi(km);
  buyurtmalar = buyurtmalar + 1;
  console.log(chekQatori(buyurtmalar, ism, km, narx));
}

buyurtmaBer("Ali", 4);
buyurtmaBer("Malika", 10);

1. Ali: 4 km — 17000 so'm
2. Malika: 10 km — 32000 so'm

10. Real ishda

Toza funksiya — faqat nazariya emas, zamonaviy loyihalarda talab:

Bu bo'limdagi React va Vitest nomlaridan qo'rqmang: React — sayt yasash kutubxonasi, Vitest — test yozish vositasi. Ikkalasini kursda alohida o'rganamiz, hozir bilish shart emas.

• React: sahifa bo'laklari (komponentlar) toza bo'lishi shart — bir xil ma'lumotga doim bir xil ko'rinish. React buni tekshirish uchun ishlab chiqish paytida komponentni ikki marta chaqiradi. Bu haqda Pure komponentlar darsida gaplashamiz.
• Testlar: real loyihalarda testlar Vitest kabi vositalar bilan yoziladi. Ular aynan biz qilgandek ishlaydi — chaqir va solishtir. Eng oson va eng ko'p yoziladigan testlar — toza funksiyalar uchun. Vitest bilan birinchi testlar darsida ko'ramiz.
• Arxitektura: tajribali jamoalar biznes mantiqini (narx, chegirma, soliq hisoblash) toza funksiyalarga, baza va tarmoq bilan ishlashni esa alohida qatlamga ajratadi.
• Intervyu: "Pure function nima?" va "side effect'ga misol keltiring" — frontend intervyularining doimiy savoli. Ikki qoidani va 2–3 ta side effect turini aytsangiz, javob to'liq bo'ladi.

Xulosa

• Pure funksiya — bir xil kirishga doim bir xil natija va side effect yo'q.
• Global let, Math.random() va joriy vaqtga bog'liq funksiya 1-qoidani buzadi.
• Side effect — tashqi o'zgaruvchi, konsol, sahifa, tarmoq, fayl yoki massiv/obyektni o'zgartirish.
• Toza funksiyani testlash, tushunish va qayta ishlatish oson.
• Side effect'siz dastur bo'lmaydi: hisobni toza funksiyalarga, side effect'larni bir joyga yig'ing.
• Hisoblovchi funksiya console.log emas, return qilsin.

Keyingi dars: Rekursiya asoslari — funksiya o'zini o'zi chaqirib, katta masalani kichik bo'laklarga qanday bo'lishini ko'ramiz.