Funksiyalar — declaration, expression, arrow function
Muammodan boshlaylik
Bir xil kodni bir necha joyda yozish kerak bo'ldi. Foydalanuvchi ismini formatlash — bosh harfni katta qilish, bo'shliqlarni tozalash. Bu mantiqni 10 joyda yozdingiz. Keyin talablar o'zgardi — 10 joyni o'zgartirish kerak.
Funksiyalar — kodni bir joyda yozib, istalgan joydan chaqirish imkonini beradi. O'zgarish kerak bo'lsa — faqat bir joyda o'zgartirasiz.
Funksiya nima?
Funksiya — nom berilgan kod bloki. Chaqirilganda bajariladi, kerak bo'lsa qiymat qaytaradi.
function salomlash(ism) {
return "Salom, " + ism + "!";
}
console.log(salomlash("Ali")); // "Salom, Ali!"
console.log(salomlash("Vali")); // "Salom, Vali!"
Bir marta yozildi — ikki marta ishlatildi. Ism o'zgarsa — faqat chaqiruv joyida o'zgartiriladi.
Hayotiy o'xshatma
Restorandagi retsept. Oshpaz "plov" retseptini bir marta yozadi. Keyin har safar plov pishirish kerak bo'lganda — retseptni qaytadan o'ylab o'tirmaydi, shunchaki retseptga qaraydi. Funksiya — dasturlashdagi retsept.
Function Declaration — e'lon qilish
function qoshish(a, b) {
return a + b; // ← return — qiymat qaytarish
}
const natija = qoshish(3, 5);
console.log(natija); // 8
return — funksiyadan qiymat qaytaradi va funksiyani to'xtatadi. return dan keyingi kod bajarilmaydi:
function tekshir(son) {
if (son < 0) {
return "Manfiy"; // ← shu yerda to'xtaydi
}
return "Musbat"; // ← son >= 0 bo'lsa shu qaytadi
}
return bo'lmasa — funksiya undefined qaytaradi.
Parametrlar va argumentlar
Parametr — funksiya ta'rifidagi o'zgaruvchi (a, b).
Argument — chaqirishda beriladigan qiymat (3, 5).
function ko_paytir(a, b) { // ← a, b — parametrlar
return a * b;
}
ko_paytir(4, 6); // ← 4, 6 — argumentlar
Default parametrlar
Argument berilmasa ishlatiladi:
function salomlash(ism = "Mehmon") {
return "Salom, " + ism + "!";
}
salomlash("Ali"); // "Salom, Ali!"
salomlash(); // "Salom, Mehmon!" — default ishlatildi
Rest parametr
Nechta argument kelishini bilmasangiz:
function yig_indi(...sonlar) { // ← ...sonlar — massiv sifatida keladi
return sonlar.reduce((sum, n) => sum + n, 0);
}
yig_indi(1, 2, 3); // 6
yig_indi(1, 2, 3, 4, 5); // 15
Nima uchun shunday?
Nima uchun return kerak?
Funksiya hisoblaydi — natijani qaytarishi kerak. return bo'lmasa, funksiya undefined qaytaradi va natijani saqlab bo'lmaydi:
function qoshish(a, b) {
a + b; // ← return yo'q!
}
const natija = qoshish(3, 5);
console.log(natija); // undefined — natija yo'qoldi
Function Expression — o'zgaruvchiga tayinlash
Funksiyani o'zgaruvchiga tayinlash mumkin:
const qoshish = function(a, b) {
return a + b;
};
console.log(qoshish(3, 5)); // 8
Declaration va Expression — ikkalasi ham funksiya. Farqi — hoisting (keyingi darsda).
Arrow Function — qisqa yozuv
ES6 da kiritilgan. Qisqaroq sintaksis:
// Oddiy funksiya
const qoshish = function(a, b) {
return a + b;
};
// Arrow funksiya
const qoshish = (a, b) => {
return a + b;
};
// Yanada qisqa — bitta ifoda bo'lsa {} va return tushiriladi
const qoshish = (a, b) => a + b;
Bitta parametr bo'lsa — qavslar ham tushiriladi:
const ikki_baravar = x => x * 2;
ikki_baravar(5); // 10
Parametr bo'lmasa — bo'sh qavslar:
const sana = () => new Date().toLocaleDateString();
Arrow funksiya massiv metodlari bilan
Arrow funksiyalar map, filter, reduce da juda qulay:
const sonlar = [1, 2, 3, 4, 5];
const juftlar = sonlar.filter(n => n % 2 === 0); // [2, 4]
const ikki_baravar = sonlar.map(n => n * 2); // [2, 4, 6, 8, 10]
const yig_indi = sonlar.reduce((sum, n) => sum + n, 0); // 15
Declaration vs Expression vs Arrow — farqlari
Hoisting
Declaration — faylning istalgan joyidan chaqirish mumkin, hatto e'lon qilinishidan oldin ham:
salomlash(); // ✅ ishlaydi — hoisting
function salomlash() {
console.log("Salom!");
}
Expression va Arrow — e'lon qilinishidan oldin chaqirib bo'lmaydi:
salomlash(); // ❌ ReferenceError
const salomlash = () => {
console.log("Salom!");
};
this konteksti
Arrow funksiyaning o'z this i yo'q — tashqi kontekstdan oladi. Bu ob'ekt metodlarida muhim (keyingi darslarda batafsil).
const ob'ekt = {
ism: "Ali",
salomlash: function() {
console.log(this.ism); // "Ali" — this = ob'ekt
},
salomlash2: () => {
console.log(this.ism); // undefined — arrow this ni olmaydi
}
};
Qoida: Ob'ekt metodi uchun — oddiy funksiya. Callback, massiv metodlari uchun — arrow funksiya.
Funksiyalar birinchi darajali ob'ekt
JavaScript da funksiyalar — oddiy qiymat. O'zgaruvchiga tayinlash, parametr sifatida berish, qaytarish mumkin:
// Parametr sifatida
function bajar(fn, qiymat) {
return fn(qiymat);
}
bajar(x => x * 2, 5); // 10
// Qaytarish qiymati sifatida
function ko_paytiruvchi(n) {
return x => x * n; // ← funksiya qaytaradi
}
const uch_baravar = ko_paytiruvchi(3);
uch_baravar(5); // 15
Bu — Higher Order Functions (keyingi bo'limda batafsil).
Tez-tez uchraydigan xatolar
return unutish:
function kvadrat(x) {
x * x; // ❌ return yo'q
}
console.log(kvadrat(5)); // undefined
Arrow funksiyada ob'ekt qaytarish:
const yaratish = ism => { ism: ism }; // ❌ {} blok deb tushuniladi!
const yaratish = ism => ({ ism: ism }); // ✅ qavslar ichiga olinadi
Parametr soniga e'tibor bermaslik:
function qoshish(a, b) {
return a + b;
}
qoshish(3); // NaN — b undefined, 3 + undefined = NaN
qoshish(3, 5, 7); // 8 — uchinchi argument e'tiborga olinmaydi
this ni arrow funksiyada ishlatish:
const tugma = document.querySelector("button");
tugma.addEventListener("click", () => {
console.log(this); // ❌ window — tugma emas!
});
tugma.addEventListener("click", function() {
console.log(this); // ✅ tugma elementi
});
Xulosa
Funksiya — nom berilgan, qayta ishlatiladigan kod bloki. return qiymat qaytaradi.
Declaration — hoisting bor, istalgan joydan chaqirish mumkin.
Expression — o'zgaruvchiga tayinlanadi, hoisting yo'q.
Arrow — qisqa sintaksis, o'z this i yo'q.
Default parametrlar — argument berilmasa ishlatiladi. Rest ... — nechta argument kelishini bilmasangiz.
Ob'ekt metodi uchun — oddiy funksiya. Callback va massiv metodlari uchun — arrow funksiya.
Keyingi dars
9-dars: Scope — global, function, block scope