2.3-bob: Funksiyalar — parametr, return, scope, arrow functions

2-QISM — JavaScript (0 dan chuqurgacha) · 3-mavzu

1. Kirish va motivatsiya

Hozirgacha kod yuqoridan pastga bir marta ishlardi. Lekin real dasturda bir xil ishni ko'p marta bajarish kerak: "summani hisobla", "foydalanuvchini tekshir", "xabar yubor". Har safar qaytadan yozish — ahmoqlik va xatolar manbai. Funksiya bu muammoni hal qiladi.

Funksiya (function) — bir marta yozilib, ko'p marta ishlatiladigan kod bloki. U kirish (parametr) oladi, ish bajaradi va natija (return) qaytaradi — xuddi 0.1-dagi "input process output" mashinasidek.

O'xshatish: funksiya — oshxona kombayni. Ichiga masalliq (parametr) solasiz, tugmani bosasiz (chaqirasiz), u ishlaydi (jarayon) va natija (return) chiqaradi. Bir marta sotib olasiz (yozasiz), minglab marta ishlatasiz. Va undan ichida nima bo'layotganini bilishingiz shart emas (0.6: abstraction).

Funksiya — dasturlashning eng muhim qurilish bloki. Bu yerda o'rganasiz: e'lon usullari, parametr/argument, return, scope (0.6, 0.1: RAM bilan bog'liq), va zamonaviy arrow function. Bularsiz React (11) ham, Node (5) ham yozib bo'lmaydi.

2. Nazariya — chuqur tushuntirish

2.1. Funksiya e'lon qilishning usullari

JS'da funksiya yozishning bir necha yo'li bor:

// 1) Function Declaration (e'lon) — hoisting bor (2.4-bob)
function salomBer(ism) {
  return `Salom, ${ism}!`;
}

// 2) Function Expression (ifoda) — o'zgaruvchiga tayinlanadi
const salomBer2 = function (ism) {
  return `Salom, ${ism}!`;
};

// 3) Arrow Function (o'q funksiya) — zamonaviy, qisqa (2.5)
const salomBer3 = (ism) => `Salom, ${ism}!`;

Uchchalasi ham ishlaydi, lekin xulqi biroz farq qiladi (hoisting — 2.4-bob; this — 2.5, 2.5-bob).

Function expression nomli ham bo'lishi mumkin — named function expression:

// Nomli ifoda: nom (fakt) faqat funksiyaning ICHIDA ko'rinadi
const fakt = function hisobla(n) {
  return n <= 1 ? 1 : n * hisobla(n - 1);   // ichkarida o'z-o'zini chaqirish
};
fakt(5);        // 120
// hisobla(5);  //  ReferenceError — tashqarida nom ko'rinmaydi

Bu nomning ikki foydasi bor: (1) funksiya o'z-o'zini ichkaridan chaqira oladi (o'zini chaqirish — rekursiya, 3-QISM); (2) xato izida (stack trace) anonim <anonymous> o'rniga mazmunli nom ko'rinadi — debug osonlashadi.

2.2. Parametr va argument — kirish

• Parametr — funksiya e'lonidagi o'zgaruvchi (qabul qiluvchi joy).
• Argument — funksiya chaqirilganda beriladigan haqiqiy qiymat.

function qoshish(a, b) {       // a, b — PARAMETRlar
  return a + b;
}
qoshish(5, 3);                 // 5, 3 — ARGUMENTlar  8

Standart parametr (default) — argument berilmasa, standart qiymat:

function salom(ism = "Mehmon") {   // ism berilmasa "Mehmon"
  return `Salom, ${ism}!`;
}
salom();        // "Salom, Mehmon!"
salom("Ali");   // "Salom, Ali!"

Rest parametr (...) — noma'lum sondagi argumentlarni massivga yig'adi (2.8-bob):

function jami(...sonlar) {     // barcha argumentlar massivga
  let s = 0;
  for (const n of sonlar) s += n;
  return s;
}
jami(1, 2, 3, 4);             // 10

Spread argument (...) — rest'ning teskarisi: massivni alohida argumentlarga "yoyadi" (chaqirishda). Bir xil ... belgisi, lekin joyiga qarab ma'nosi farq qiladi — e'londa yig'adi (rest), chaqiriqda yoyadi (spread):

const sonlar = [1, 2, 3, 4];
jami(...sonlar);              // 10 — [1,2,3,4]  jami(1, 2, 3, 4)

// Foydali: Math.max massiv emas, alohida argument kutadi
Math.max(...[5, 9, 2]);      // 9 (Math.max(5, 9, 2) bilan bir xil)

Esda tuting: ... e'londa (parametr ro'yxatida) — rest (ko'pni bittaga yig'adi); chaqiriqda (argument ro'yxatida) — spread (bittani ko'pga yoyadi). Spread massiv va obyektni nusxalash uchun ham ishlatiladi (2.8-bob).

arguments obyekti — har bir oddiy funksiya ichida avtomatik mavjud bo'lgan, barcha argumentlarni saqlovchi maxsus obyekt (massivga o'xshash, lekin haqiqiy massiv emas):

function eskicha() {
  // parametr e'lon qilmasak ham, argumentlar arguments'da
  return arguments.length;   // berilgan argumentlar soni
}
eskicha(10, 20, 30);         // 3

Diqqat: arguments — eski uslub. Zamonaviy JS'da rest parametr (...sonlar) afzal: u haqiqiy massiv (.map, .filter ishlaydi) va o'qishliroq. Bundan tashqari, arrow function'da arguments umuman yo'q 2.5-bob — shuning uchun ham rest tavsiya etiladi.

2.3. return — natija qaytarish

return funksiya natijasini qaytaradi va funksiyani to'xtatadi (undan keyingi kod ishlamaydi):

function yoshHolati(yosh) {
  if (yosh < 0) return "Noto'g'ri";   // erta chiqish (early return)
  if (yosh >= 18) return "Katta";
  return "Kichik";                     // bu yerga faqat yosh 0..17 da yetadi
}

Muhim: returnsiz funksiya undefined qaytaradi 2.1-bob. Va returndan keyingi kod hech qachon ishlamaydi (o'lik kod). Early return (shartda darrov return) — chuqur iflardan qochishning eng yaxshi usuli 2.2-bob.

2.4. Scope (ko'rinish doirasi) — 0.1 va 0.6 ning amaliyoti

Scope — o'zgaruvchi qayerdan ko'rinishi (qayerdan murojaat qilsa bo'ladi). JS'da:

• Global scope — fayl/dastur darajasida; hamma joydan ko'rinadi.
• Function scope — funksiya ichida e'lon qilingan o'zgaruvchi faqat shu funksiya ichida yashaydi.
• Block scope — {} ichidagi let/const faqat o'sha blokda 2.1-bob.

const global = "men hammaga ko'rinaman";

function test() {
  const ichki = "men faqat shu funksiyada";
  console.log(global);   //  ko'rinadi (tashqaridan)
  console.log(ichki);    //  ko'rinadi
}
test();
console.log(ichki);      //  ReferenceError — tashqarida ko'rinmaydi

Nega bu muhim: scope — ma'lumotni himoyalaydi va ajratadi (0.2: process xotirasiga o'xshash g'oya). Har funksiya o'z "shaxsiy makoni"ga ega. Bu — closure (2.4-bob) va toza kodning asosi.

2.5. Arrow function — zamonaviy, qisqa

Arrow function (=>) — funksiyaning qisqaroq va zamonaviy yozuvi:

// To'liq
const qosh = (a, b) => {
  return a + b;
};

// Bitta ifoda bo'lsa — {} va return tushiriladi (implicit return)
const qosh2 = (a, b) => a + b;

// Bitta parametr bo'lsa — qavs ham tushiriladi
const ikki = n => n * 2;

// Parametrsiz — bo'sh qavs shart
const salom = () => "Salom!";

// Obyekt qaytarish — qavsga olish shart (aks holda {} blok deb o'qiladi)
const yarat = (ism) => ({ ism: ism });

Arrow function — oddiy functiondan faqat qisqaligi bilan emas, xulqi bilan ham farq qiladi (2.5-bob, 2.5):

const Avto = () => {};
// new Avto();   //  TypeError: Avto is not a constructor

Maslahat: zamonaviy JS'da callback va qisqa funksiyalar uchun arrow (.map, .filter — 2.7; React — 11); metodlar, this yoki konstruktor kerak bo'lganda oddiy function.

2.6. Funksiya — "birinchi darajali fuqaro" (first-class)

JS'da funksiyalar — oddiy qiymat kabi: ularni o'zgaruvchiga tayinlash, boshqa funksiyaga argument berish, funksiyadan qaytarish mumkin. Bu — Higher-Order Function (HOF) asosi (2.15-bob):

// Funksiyani argument sifatida berish (callback)
function ishBajar(callback) {
  return callback(5);
}
ishBajar((x) => x * 2);   // 10

// Funksiyadan funksiya qaytarish (closure — 2.4-bob)
function kopaytuvchi(n) {
  return (x) => x * n;    // ichki funksiya tashqi n'ni "eslaydi"
}
const ikkilantir = kopaytuvchi(2);
ikkilantir(5);            // 10

Bu g'oya — .map/.filter 2.7-bob, event listener 2.16-bob, va butun funksional dasturlash 2.15-bob ning asosi.

Callback — boshqa funksiyaga argument sifatida berilgan funksiya (yuqorida ishBajarga berilgan (x) => x * 2). U "keyin chaqirilsin" deb beriladi: .map, setTimeout, event listener — barchasi callback qabul qiladi (2.7, 2.11, 2.16).

IIFE (Immediately Invoked Function Expression — darrov chaqiriladigan funksiya ifodasi) — e'lon qilinishi bilanoq o'sha zahoti chaqiriladigan funksiya. Funksiyani qavsga olib, oxiriga () qo'yiladi:

(function () {
  const maxfiy = "tashqaridan ko'rinmaydi";   // o'z scope'ida qamalgan
  console.log("darrov ishladi");
})();                                          //  shu () chaqiradi

// arrow bilan ham:
(() => {
  console.log("men ham darrov ishlayman");
})();

IIFE — o'zgaruvchilarni global scope'dan himoyalash (ifloslantirmaslik) uchun ishlatilgan. Bugun bu vazifani ko'proq modullar (2.14-bob) bajaradi, lekin IIFE'ni eski kod va ba'zi naqshlarda hali ham uchratasiz.

2.7. Pure function (toza funksiya) — yaxshi amaliyot

Toza funksiya (0.6, 2.15-bob): (1) bir xil kirishga doim bir xil natija beradi; (2) tashqi olamga ta'sir qilmaydi (side effect yo'q):

//  TOZA — faqat kirishga bog'liq, tashqariga tegmaydi
function qosh(a, b) { return a + b; }

//  NOTOZA — tashqi o'zgaruvchini o'zgartiradi (side effect)
let jami = 0;
function qoshDirty(x) { jami += x; }   // tashqi holatni buzadi

Toza funksiyalar — bashoratli, test qilish oson, xatosiz. Imkon qadar toza yozing (2.15-bob, 9.1-SOLID).

3. Sintaksis — tez ma'lumotnoma

function nom(p1, p2 = standart) { return natija; }   // declaration
const nom = (p1, p2) => natija;                       // arrow (qisqa)
const nom = (p1, p2) => { ...; return natija; };      // arrow (blokli)
const nom = (...args) => { };                          // rest parametr
const nom = () => ({ kalit: qiymat });                 // obyekt qaytarish

// chaqirish
nom(arg1, arg2);

4. Batafsil kod namunalari

Misol 1 — E'lon usullari va parametrlar

// Declaration + standart parametr (2.2)
function salomla(ism = "Mehmon", til = "uz") {
  const salomlar = { uz: "Salom", en: "Hello" };
  return `${salomlar[til]}, ${ism}!`;
}
console.log(salomla());              // "Salom, Mehmon!"
console.log(salomla("Ali"));         // "Salom, Ali!"
console.log(salomla("John", "en"));  // "Hello, John!"

// Arrow (2.5)
const kvadrat = (n) => n * n;
console.log(kvadrat(5));             // 25

Misol 2 — return va early return (2.3)

function bahoQoy(ball) {
  if (ball < 0 || ball > 100) return "Xato ball";  // erta chiqish (2.3)
  if (ball >= 90) return "A";
  if (ball >= 70) return "B";
  if (ball >= 50) return "C";
  return "F";
}
console.log(bahoQoy(85));   // "B"
console.log(bahoQoy(150));  // "Xato ball"

Misol 3 — Rest parametr va scope (2.2, 2.4)

// Rest — noma'lum sondagi argument (2.2)
function ortacha(...sonlar) {
  if (sonlar.length === 0) return 0;       // chegaraviy holat (0.6)
  let jami = 0;
  for (const n of sonlar) jami += n;        // jami — funksiya scope (2.4)
  return jami / sonlar.length;
}
console.log(ortacha(10, 20, 30));          // 20
console.log(ortacha(5, 15));               // 10
// console.log(jami);  //  ReferenceError — scope tashqarisida (2.4)

Misol 4 — Higher-order function va closure (2.6)

// Funksiya qaytaruvchi funksiya (closure — 2.4-bob)
function chegirmaYaratuvchi(foiz) {
  return (narx) => narx - (narx * foiz / 100);  // foiz'ni "eslaydi"
}

const yangiYil = chegirmaYaratuvchi(20);   // 20% chegirma funksiyasi
const qoraJuma = chegirmaYaratuvchi(50);   // 50% chegirma funksiyasi

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

5. To'g'ri va noto'g'ri holatlar

1) returnni unutish

//  natija qaytarmaydi  undefined (2.3)
function qosh(a, b) { a + b; }
const x = qosh(2, 3);   // undefined

//  return bilan
function qosh(a, b) { return a + b; }

2) Chuqur ichma-ich if (early return o'rniga)

//  "piramida" — o'qishsiz
function tekshir(u) {
  if (u) { if (u.faol) { if (u.yosh >= 18) { return "ok"; } } }
}

//  early return 2.3-bob — tekis
function tekshir(u) {
  if (!u) return "yo'q";
  if (!u.faol) return "faol emas";
  if (u.yosh < 18) return "yosh";
  return "ok";
}

3) Side effect (notoza funksiya)

//  tashqi holatni o'zgartiradi (2.7)
let total = 0;
function add(x) { total += x; }

//  toza — natija qaytaradi
function add(total, x) { return total + x; }

4) Arrow'da obyekt qaytarishni qavssiz

//  {} blok deb o'qiladi  undefined
const f = () => { ism: "Ali" };

//  qavsga ol (2.5)
const f = () => ({ ism: "Ali" });

6. Keng tarqalgan xatolar va yechimlari

Xato 1 — TypeError: x is not a function

Sababi: funksiya bo'lmagan narsa chaqirildi (imlo xatosi, yoki o'zgaruvchi funksiya emas). Yechimi: nomni tekshiring; typeof f === "function" 2.1-bob.

Xato 2 — Funksiya undefined qaytaradi

Sababi: return yo'q 2.3-bob. Yechimi: natija qaytarishi kerak bo'lsa return qo'shing.

Xato 3 — ReferenceError (scope tashqarisida)

Sababi: funksiya ichidagi o'zgaruvchiga tashqaridan murojaat 2.4-bob. Yechimi: o'zgaruvchini kerakli scope'da e'lon qiling yoki funksiyadan return qiling.

Xato 4 — Argument tartibi/soni xato

function bol(a, b) { return a / b; }
bol(2, 10);   // 0.2 (kutilgani 5 edi — tartib teskari)

Sababi: argumentlar tartibi. Yechimi: tartibga e'tibor; ko'p parametr bo'lsa — obyekt parametri (function f({a, b}) — 2.8-bob).

Xato 5 — Arrow function va this

Sababi: arrow thisni meros qiladi — metod sifatida this kutsa, xato (2.5-bob). Yechimi: obyekt metodida oddiy function (2.5-bob da chuqur).

7. Integratsiya — bu mavzu stack'ning qayerida uchraydi

• Closure, scope 2.4-bob: funksiya scope va HOF — closure'ning asosi (Misol 4).
• Array metodlari 2.7-bob: .map/.filter/.reduce — callback funksiya qabul qiladi (HOF — 2.6).
• Funksional dasturlash 2.15-bob: pure function, HOF, immutability.
• Asinxron 2.11-bob: callback, Promise then — funksiyalar.
• DOM 2.16-bob: event listener — callback funksiya.
• React (11): komponent — funksiya; hook'lar — funksiya; arrow callback'lar.
• SOLID 9.1-bob: "bitta funksiya — bitta ish" (Single Responsibility).

8. Eng yaxshi amaliyotlar (best practices)

• Bitta funksiya — bitta ish (Single Responsibility — 9.1). Kichik, fokuslangan funksiyalar.
• Early return bilan chuqur iflardan qoching 2.3-bob — tekis, o'qishli kod.
• Imkon qadar toza funksiya (pure — 2.7): kirishga bog'liq, side effect'siz.
• Mazmunli nom (hisoblaJami, tekshirEmail) — fe'l bilan; nima qilishini aytsin.
• Standart parametr bilan undefineddan himoyalaning 2.2-bob.
• Callback va qisqa funksiya — arrow; metod va this kerak — function 2.5-bob.
• Ko'p parametr (4+) o'rniga obyekt parametri — o'qishli, tartib muhim emas (2.8-bob).
• Funksiyani qisqa tuting — ekranga sig'sin; uzun bo'lsa, bo'lib tashlang.

9. Amaliy loyiha: "Funksiyalar Kutubxonasi (Utility Belt)"

Qayta ishlatiladigan funksiyalar to'plami — har biri toza, fokuslangan.

Maqsad

Funksiya e'loni, parametr, return, scope va arrow function'larni amalda qo'llab, foydali utility funksiyalar yozish; toza funksiya va early return tamoyillarini mustahkamlash.

Talablar (requirements)

Quyidagi funksiyalarni yozing (har biri toza va returnli):

1. salomla(ism, til) — standart parametr bilan (ism="Mehmon", til="uz") 2.2-bob.
2. ortacha(...sonlar) — rest parametr; bo'sh bo'lsa 0 qaytarsin (chegaraviy holat — 2.2).
3. engKatta(massiv) — massivdagi eng katta son (0.6-dagi pseudokodni eslang); bo'sh massivni tekshiring.
4. bahoQoy(ball) — early return bilan A/B/C/F (Misol 2) 2.3-bob.
5. chegirma(foiz) — closure: chegirma funksiyasini qaytaradi (Misol 4) 2.6-bob.
6. takrorla(matn, n) — matnni n marta qaytaradi.
7. tekshirEmail(email) — @ va . borligini tekshirib boolean qaytaradi (oddiy).
8. Har funksiyani kamida 2 ta misol (jumladan chegaraviy holat) bilan sinang.
9. (Bonus) Bitta higher-order function: funksiyani argument oladi (masalan qoshHar(massiv, fn) — har elementga fn'ni qo'llaydi).

Maslahatlar (hint)

• Hammasini arrow yoki declaration bilan yozing — izchil uslubda (8-bo'lim).
• Har funksiyada chegaraviy holatni tekshiring (bo'sh, undefined — 0.6, 2.3).
• Closure misolida ichki funksiya tashqi parametrni "eslashini" ko'rsating 2.6-bob.
• Funksiyalarni alohida fayl/modul qilib saqlasangiz yaxshi (modullar — 2.14-bob).
• Hamma funksiya return qilsin (console.log emas) — qayta ishlatiladigan bo'lsin.

"Tayyor" mezonlari (acceptance criteria)

• Barcha 7 funksiya ishlaydi va return qiladi.
• Standart va rest parametr ishlatilgan.
• Kamida bitta closure (funksiya qaytaruvchi) bor.
• Early return ishlatilgan (bahoQoy).
• Funksiyalar toza (side effect yo'q).
• Har funksiya chegaraviy holat bilan sinalgan.
• Nomlar mazmunli (fe'l bilan).

Yechim kodi ataylab berilmagan — bu loyihani o'zingiz yozib ko'ring.

10. Xulosa va keyingi bobga ko'prik

Bu bobda dasturlashning eng muhim qurilish blokini — funksiyalarni o'rgandik:

• Funksiya = qayta ishlatiladigan "input process output" mashinasi.
• E'lon usullari: declaration, expression, arrow (=> — zamonaviy, qisqa).
• Parametr (e'lon) vs argument (chaqiriq); standart (=) va rest (...) parametr.
• return — natija + to'xtatish; early return — chuqur iflardan qochish.
• Scope (global/function/block) — o'zgaruvchining ko'rinish doirasi; ma'lumotni ajratadi/himoyalaydi.
• Funksiya — first-class qiymat (HOF, callback, closure — 2.6); toza funksiya — bashoratli va test qilish oson.

Keyingi bob — 2.4-bob: Execution context, hoisting, scope chain, closure (chuqur). Bu bobda scope va funksiyani yuzaki ko'rdik; keyingi bobda ularning ichki mexanizmini — JS kod aslida qanday ishga tushishini, hoisting nima uchun sodir bo'lishini va closurening haqiqiy sehrini chuqur ochamiz. Bu — JS'ni chinakam tushunish nuqtasi (intervyularning eng sevimli mavzusi).

Foydalanilgan rasmiy/ishonchli manbalar

• MDN Web Docs — Functions, arrow functions, default/rest parameters
• MDN Web Docs — return, scope, first-class functions
• MDN Web Docs — closures (HOF asoslari)