Biz ko'p hollarda, JS faylimizning ko'p nuqtalarida bir-biriga o'xshash amallarni bajarishimizga to'g'ri keladi.

Masalan, foydalanuvchi biror amalni bajarganidan so'ng, unga bu haqida xabar berish, login yoki logout holatlaridagi amallar.

Funksiyalar bu holatlarda bizga yordam beradi. Har qanday sayt yoki ilovalarda funksiyalar asosiy ro'lda bo'ladi, ya'ni ular "g'ishtlar" hisoblanadi.

O'tgan postlarimizda biz alert(message) , confirm(message), yoki prompt(message) kabi JS'ning tayyor funksiyalarini ko'rdik. Lekin, biz o'zimiz ham funksiyalarimizni yaratishimiz mumkin.

Funksiya Deklaratsiyasi - Function Declaration

Funksiya yaratishning keng qo'llaniladigan yo'li - function declaration.

function sayHello(){
    alert("Salom!");
}

function kalitso'zi birinchi, keyin esa funksiya nomi, qavs ichida parametrlar funksiyaga o'tkaziladi, va {} qavslari ichida funksiya kodi yoziladi.

function funksiyaNomi(parametr1, parametr2, ...parametrN){
    // function body
}

Xo'sh, funksiyalarni qanday ishlatamiz?

Masalan,

function sayHello(){
    alert("Salom!");
}

sayHello(); // Salom!
sayHello(); // Salom!

Local O'zgaruvchilar

Funksiya ichida yaratilgan o'zgaruvchilar faqatgina funksiya ichida ishlatilishi mumkin.

Masalan:

function sayHello(){
    let message = "Hello Uzbekistan!"
    console.log(message);
}

sayHello(); // Hello Uzbekistan!
console.log(message) // Error! O'zgaruchi funksiya ichida

Tashqi O'zgaruvchilar

Funksiyalar tashqarida yaratilgan o'zgaruvchilarni ham qabul qiladi.

let user = "Ali";

function showUser(){
    let message = "Salom, " + user;
    console.log(message);
}

showUser(); // Salom, Ali

Funksiya user ni o'zgartirishi ham mumkin.

Masalan:

let user = "Ali";

function showUser(){
    user = "Behzod" // user o'zgardi
    let message = "Salom, " + user;
    console.log(message);
}

console.log(user); // user = Ali

showUser(); 

console.log(user); // user = Behzod

Masalan, let user = "Ali" o'zgaruvchisi global o'zgaruvchi hisoblanadi. Ular butun JS faylidagi funksiyalar tomonidan foydalanilsa bo'ladi.

Parametrlar

Parametr sifatida har qanday data'ni o'tkazishimiz mumkin. Masalan:

function showParamter(from, to){
    console.log(from + "dan " + to + "gacha");
}

showParamter(500, 800); // 500 dan 800 gacha
showParamter("Anvar", "Oydin") // Anvardan Oydingacha

Standart Qiymatlar

Funksiya chaqirilgan lekin parametrga qiymat berilmasa, u parametr undefined bo'ladi.

Masalan:

showParamter("Anvar")

Bu xato. Biz birinchi parametrga from ga qiymat berdik, to ga esa yo'q, va avtomatik tarzda u undefined bo'ladi.

Shunday holatlarda, "standart qiymat" lardan foydalansak bo'ladi. Masalan:

function showParamter(from, to = "Nukus"){
    console.log(from + "dan " + to + "gacha");
}

showParamter("Nasaf"); // Nasafdan Nukusgacha

Bu kabi paramterlar bilan ishlashning bir nechta yo'llari bor. Aytaylik, to parametri undefined :

function showParamter(from, to){
    if(to === undefined){
        to = 'Nukus'
    }
    console.log(from + "dan " + to + "gacha");
}

undan keyin || yoki ?? operatorlari bilan ham:

function showParamter(from, to){
    to = to || "Nukus"
    console.log(from + "dan " + to + "gacha");
}


showParamter("Nasaf"); // Nasafdan Nukusgacha

function showParamter(from, to){
    to = to ?? "Nukus"
    console.log(from + "dan " + to + "gacha");
}

showParamter("Nasaf"); // Nasafdan Nukusgacha

Qiymat qaytarish

Ma'lum amallar bajarilgach, funksiya uning javobini ham qaytarishi mumkin.

Masalan:

function sum(a,b){
    return a + b;
}

console.log(sum(2 , 3));

return kalitso'zi funksiyaning istalgan joyida, masalan loop to'xtaganida, funksiya to'xtaganida, if/else holatlarida ishlatiladi.

Masalan:

function driverLicence(age){
    if(age >= 20){
        return "Sizga mumkin."
    } else {
        return "Sizga mumkin emas!"
    }
}    

console.log(driverLicence(16)) // Sizga mumkin emas!
console.log(driverLicence(25)) // Sizga mumkin.

Masalan:

return 
(juda + uzun + gap + yoki + biron + nima);

aslida esa:

return; 
(juda + uzun + gap + yoki + biron + nima);

Natijada, funksiya hech nima yoki bo'sh qiymat qaytaradi. Agar, haqiqatdan yangi qatorlar sizga kerak bo'lsa, qavslardan foydalaning:

return (
juda + uzun + 
gap + yoki + biron 
+ nima);

Funksiyalarni nomlash

Ularning nomi odatda bajaradigan vazifasiga qarab nomlanadi, odatda ingliz tilida nomlanadi. Undan keyin, harflarning katta yoki kichik bo'lishi borasida ham umumiy konvensiya bor va ularni quyidan misollarda tushunib olasiz.

Nimanidi ko'rsatadigan funksiya show bilan, hisoblaydigani esa calculate so'zlari bilan boshlanishi mumkin.

Masalan:

showMessage(..) // xabarni ko'rsatadi
sayHello(..) // salom beradi
getApiData(..) // API data oladi
createTable(..) // table yaratadi
doSometing(..) // nimadir qiladi

Xulosa

Funksiyalar quyidagi usulda yasaladi:

function fnName(param1, param2, ...paramN){
    // code
}

Kodni tartibli, tushunishga oson va xavfsiz qilish uchun asosan lokal o'zgaruvchilar yoki parametrlardan foydalanishni afzal ko'ring. Global o'zgaruvchilar ko'plab kutilmagan qiymat yoki amallarga olib kelishi mumkin.

Chunki, 200-chi qatorda turgan, lekin faqat qabul qilgan parametr va lokal o'zgaruvchilari bilan ishlaydigan funksiya, 1-chi qatordagi global o'zgaruvchi bilan ishlaydigan funksiyadan ko'ra eslab qolish osonroq.

Nomlash:

• funksiya nima amalni bajarsa, nomi ham shunga mos bo'lishi

• nomi kesim shaklida bo'lishi

• doSomethingOneMoreTime konvensiyasiga amal qilishi kerak.

Funksiyalarni yaxshilab tushunib oling, ular siz yaratadigan ilovalarning g'ishtlari hisoblanadi. Bu darsda albatta biz eng boshlang'ich ta'limotlar bilan tanishdik.

E'tiboringiz uchun rahmat. Sizga foydali bo'ladi degan umiddaman. Sizga maslahatim, pastda "Subscribe to my newsletter" bo'limida email pochtangizni qoldiring va darslarni e'lon qiligandayoq pochtangizga qabul qiling.

Agar darsliklar sizga yoqayotgan bo'lsa, bizni kuzatib borishingiz mumkin:

• Telegram: t.me/devlabuz

• Youtube: youtube.com/@devlabuz