JavaScript funksiyalari: funksiya e'lon qilish va chaqirish

Qisqacha: Funksiya — nom berilgan kod bo'lagi. Uni bir marta yozib qo'yasiz, keyin nomi bilan xohlagancha ishga tushirasiz. JavaScript'da funksiya function so'zi bilan yoziladi va nomi yoniga qavs qo'yib chaqiriladi, masalan salomBer(). Funksiya bir xil kodni qayta-qayta yozishdan qutqaradi.

Bu darsda

• Funksiya nima ekanini va u qaysi muammoni hal qilishini tushunasiz.
• function kalit so'zi bilan funksiya e'lon qila olasiz.
• Funksiyani chaqira olasiz va chaqirish bilan e'lon qilish farqini bilasiz.
• Funksiyaga to'g'ri nom bera olasiz.
• Boshlovchilar eng ko'p qiladigan 4 ta xatoni taniysiz.

Oldin bilishingiz kerak: let va const bilan o'zgaruvchilar, Template literals, if / else, for sikli.

1. Nega bu kerak?

Tasavvur qiling: siz choyxona uchun kichik dastur yozyapsiz. Har bir buyurtmadan keyin konsolda chek sarlavhasi chiqishi kerak:

console.log("==========");
console.log("CHOYXONA «Bahor»");
console.log("==========");

Konsolda:

==========
CHOYXONA «Bahor»
==========

Bir buyurtma uchun bu yaxshi. Lekin kunda 50 ta buyurtma bo'lsa-chi? Shu 3 qatorni 50 marta ko'chirasizmi?

Undan ham yomoni bor. Ertaga choyxona nomi "Bahor"dan "Navro'z"ga o'zgardi deylik. Endi 50 ta joyni topib, hammasini tuzatishingiz kerak. Bittasini unutsangiz, chekda eski nom chiqib qoladi.

Dasturchilar bu muammoni funksiya bilan hal qiladi.

2. Funksiya nima?

Funksiya (function) — nom berilgan kod bo'lagi. Uni bir marta yozib, keyin xohlagancha ishlatasiz.

Hayotdan o'xshatish: retsept. Onangiz plov retseptini bir marta daftarga yozib qo'ygan. Har safar plov qilganda retseptni qaytadan o'ylab topmaydi. Shunchaki "plov retsepti" sahifasini ochadi va ishni bajaradi.

Funksiyada ham ikki bosqich bor:

Bu farq juda muhim. Retseptni yozib qo'yish bilan plov tayyor bo'lmaydi. Xuddi shunday, funksiyani e'lon qilish bilan uning ichidagi kod ishlamaydi. U faqat chaqirilganda ishlaydi.

Maslahat: Dasturchilarda "o'zingizni takrorlamang" degan oltin qoida bor. Inglizcha qisqartmasi — DRY (Don't Repeat Yourself). Bir xil kod ikki-uch joyda takrorlansa, uni bitta funksiya ichiga yozib qo'yish vaqti keldi.

3. Funksiyani e'lon qilish

Chek sarlavhasini funksiyaga aylantiramiz:

function sarlavhaChiqar() {
  console.log("==========");
  console.log("CHOYXONA «Bahor»");
  console.log("==========");
}

Bu kodni ishga tushirsangiz, konsolda hech narsa chiqmaydi. Chunki biz faqat funksiyani e'lon qildik — "retseptni yozib qo'ydik".

Keling, har bir qismini ko'rib chiqamiz:

• function — kalit so'z. JavaScript'ga "hozir funksiya yozaman" deydi.
• sarlavhaChiqar — funksiya nomi. Uni o'zingiz tanlaysiz, xuddi o'zgaruvchi nomi kabi.
• () — qavslar. Hozircha bo'sh, lekin ular majburiy: qavs JavaScript'ga "bu oddiy nom emas, funksiya" deb bildiradi. Keyingi darsda qavs ichiga qiymat berishni o'rganamiz.
• { ... } — funksiya tanasi (body). Funksiya chaqirilganda aynan shu jingalak qavslar ichidagi kod bajariladi.

Umumiy shakli:

function nomi() {
  // chaqirilganda bajariladigan kod
}

Tekshirib ko'ring: Quyidagi kod ishga tushirilsa, konsolda nima chiqadi?

js

function salom() {
  console.log("Salom!");
}

4. Funksiyani chaqirish

Funksiyani ishga tushirish uchun uning nomini yozib, oxiriga qavs qo'yamiz:

function sarlavhaChiqar() {
  console.log("==========");
  console.log("CHOYXONA «Bahor»");
  console.log("==========");
}

sarlavhaChiqar();

Konsolda:

==========
CHOYXONA «Bahor»
==========

sarlavhaChiqar() — bu chaqiruv (call). Farqqa e'tibor bering: oldida function so'zi turgan qavslar — e'lon qilish. Oldida function yo'q, faqat nom va qavs — "shu funksiyani hozir bajar" degan buyruq.

Maslahat: Aslida siz funksiya chaqirishni birinchi darslardan beri qilyapsiz! console.log(...) — JavaScript'ning tayyor funksiyasi. Uni kimdir allaqachon e'lon qilib qo'ygan, siz faqat chaqirasiz. Qavs ichiga qiymat berish — keyingi dars mavzusi.

Endi eng qiziq joyi. Funksiyani xohlagancha chaqirish mumkin:

function sarlavhaChiqar() {
  console.log("==========");
  console.log("CHOYXONA «Bahor»");
  console.log("==========");
}

sarlavhaChiqar();
console.log("2 ta choy — 6 000 so'm");
sarlavhaChiqar();
console.log("1 ta somsa — 8 000 so'm");

Konsolda:

==========
CHOYXONA «Bahor»
==========
2 ta choy — 6 000 so'm
==========
CHOYXONA «Bahor»
==========
1 ta somsa — 8 000 so'm

Endi choyxona nomi o'zgarsa, faqat bitta joyni — funksiya ichini — tuzatasiz. Bundan keyin chiqadigan hamma cheklarda yangi nom bo'ladi.

4.1 Kod qanday tartibda bajariladi?

Bu savol boshida chalkash tuyulishi tabiiy. Keling, sekin ko'ramiz.

JavaScript kodni yuqoridan pastga, qatorma-qator bajaradi. Yo'lda funksiya e'loniga duch kelsa, uni eslab qoladi, lekin ichini bajarmaydi — xuddi daftardagi retseptni varaqlab o'tib ketgandek. Funksiya chaqiruviga yetganda esa u:

1. Funksiya ichiga "sakraydi".
2. Uning tanasini boshidan oxirigacha bajaradi.
3. Chaqirilgan joyga qaytib keladi va keyingi qatordan davom etadi.

function ikkinchi() {
  console.log("2. Funksiya ichidaman");
}

console.log("1. Dastur boshlandi");
ikkinchi();
console.log("3. Funksiyadan qaytdim");

Konsolda:

1. Dastur boshlandi
2. Funksiya ichidaman
3. Funksiyadan qaytdim

Birinchi qatordagi function ikkinchi() o'tkazib yuborildi — u faqat eslab qolindi. Shuning uchun konsolga birinchi bo'lib "1. Dastur boshlandi" chiqdi.

Hayotdan o'xshatish: osh damlab qo'yib, nonga chiqasiz. Non olib qaytasiz va qozon oldida to'xtagan joyingizdan davom etasiz. Funksiya chaqiruvi — o'sha "nonga chiqib kelish".

4.2 Funksiya ichida boshqa funksiyani chaqirish

Funksiya ichida boshqa funksiyani ham chaqirish mumkin. Katta ishni kichik bo'laklarga bo'lish shunday bo'ladi:

function uygon() {
  console.log("Uyg'ondim");
}

function nonushtaQil() {
  console.log("Nonushta qildim");
}

function kunniBoshla() {
  uygon();
  nonushtaQil();
  console.log("Ishga tayyorman!");
}

kunniBoshla();

Konsolda:

Uyg'ondim
Nonushta qildim
Ishga tayyorman!

kunniBoshla ichida ikki funksiya navbat bilan chaqiriladi. Har biri ishini tugatib, kunniBoshla ga qaytadi.

E'tibor bering: nom uyg'on emas, uygon — funksiya nomida apostrof bo'lmaydi. Nomlash qoidalarini 5-bo'limda ko'ramiz.

Tekshirib ko'ring: Konsolda qaysi tartibda chiqadi?

js

function a() { console.log("A"); }
function b() { console.log("B"); a(); }
b();
a();

4.3 Funksiya va sikl birga

Funksiyani sikl ichida ham chaqirsa bo'ladi. Masalan, 3 ta mijozni kutib olamiz:

function mijozniKutibOl() {
  console.log("Xush kelibsiz!");
}

for (let i = 1; i <= 3; i++) {
  mijozniKutibOl();
}

Konsolda:

Xush kelibsiz!
Xush kelibsiz!
Xush kelibsiz!

Bu yerda i faqat sanash uchun kerak: sikl 3 marta aylanadi va har safar funksiya chaqiriladi.

Funksiya ichida ham if, for va o'zgaruvchilar ishlataverasiz. Funksiya tanasi — oddiy kod. Faqat u "o'ralgan" va nomlangan.

Diqqat: Funksiya ichida let yoki const bilan yaratilgan o'zgaruvchi faqat shu funksiya ichida ko'rinadi. Tashqarida ishlatsangiz, ReferenceError chiqadi. Nega shunday ekanini scope darsida batafsil ko'ramiz.

5. Funksiyaga qanday nom berish kerak?

Nom — funksiyaning "yorlig'i". Yaxshi nomni o'qib, ichiga qaramasdan nima qilishini tushunasiz.

Texnik qoidalar (o'zgaruvchi nomlari bilan bir xil):

• Harf, raqam, _ va $ bo'lishi mumkin. Raqam bilan boshlanmaydi.
• Bo'sh joy bo'lmaydi. Shuning uchun so'zlar camelCase bilan qo'shiladi, xuddi o'zgaruvchilardagidek: birinchi so'z kichik harf bilan, keyingilari katta harf bilan (sarlavhaChiqar, menyuniKorsat).
• Katta-kichik harf farqlanadi: salom va Salom — ikki xil nom.
• Nomda apostrof (') bo'lmaydi: uyg'onish emas, uygon.

Yaxshi amaliyot:

• Nom fe'l bilan boshlansin, chunki funksiya ish bajaradi: hisobla, korsat, tekshir, yubor. Bu qat'iy qonun emas, odat: keyingi darslarda natija qaytaradigan funksiyalarga natijaning nomi berilganini ham ko'rasiz (kvadrat, taksiNarxi). Asosiysi — nomdan funksiya nima qilishi yoki nima berishi tushunilsin.
• Bitta funksiya — bitta ish. Nomida "va" so'zi kerak bo'lsa (hisoblaVaYubor), ehtimol bu ikki funksiya bo'lishi kerak.

Maslahat: Bu kursning dastlabki darslarida nomlarni o'zbekcha yozyapmiz. Shunda JavaScript so'zlari (function, let) bilan siz o'ylab topgan nomlarni farqlash oson. Real loyihalarda nomlar inglizcha yoziladi (printHeader, showMenu) — nomlashni to'liq Toza kod: nomlash darsida o'rganamiz.

Tekshirib ko'ring: Qaysi nomlar yaxshi? hisobla, 2chek, narxniTekshir, chek chiqar, x.

6. Ko'p uchraydigan xatolar

6.1 Qavslarni unutish

function salom() {
  console.log("Salom!");
}

salom;

Bu kod xato bermaydi, lekin hech narsa ham chiqarmaydi. salom — bu funksiyaning o'zi, salom() esa uni chaqirish. Qavssiz yozsangiz, retsept daftarini ochib qo'yib, ovqat qilmagandek bo'lasiz.

Agar uni console.log ga bersangiz, funksiyaning o'zi ko'rinadi:

function salom() {
  console.log("Salom!");
}

console.log(salom); // [Function: salom]

Bu xato emas. JavaScript "bu nom ostida funksiya bor" deb xabar beryapti, lekin qavs yo'qligi uchun uni ishga tushirmadi. Brauzer konsolida xuddi shu narsa ƒ salom() ko'rinishida chiqadi — ma'nosi bir xil.

Konsolda [Function: salom] yoki ƒ salom() ko'rsangiz — demak qavsni unutgansiz.

6.2 Nomda xato

function sarlavhaChiqar() {
  console.log("CHOYXONA");
}

chekSarlavhas();

Konsolda qizil xato chiqadi:

ReferenceError: chekSarlavhas is not defined

Tarjimasi: "chekSarlavhas degan narsa aniqlanmagan". JavaScript bunday nomli funksiyani topmadi, chunki oxirida i harfi tushib qolgan. Bu xatoni ko'rsangiz, avval nomni harfma-harf solishtiring. Katta-kichik harfni ham tekshiring.

6.3 function so'zida xato

funtion salom() {
  console.log("Salom!");
}

SyntaxError: Unexpected identifier 'salom'

SyntaxError — "yozuv qoidasi buzildi". Unexpected identifier 'salom' — "kutilmagan nom: salom".

G'alati, to'g'rimi? Xato funtion da, lekin JavaScript salom ni ko'rsatyapti. Sababi: u funtion ni oddiy o'zgaruvchi nomi deb o'yladi. Nomdan keyin yana bir nom (salom) kelishini esa kutmagan edi. Qoida: xato ko'rsatilgan so'zdan oldingi so'zni ham tekshiring. Bunday xatoda kod umuman ishga tushmaydi.

6.4 Jingalak qavsni yopmaslik

function salom() {
  console.log("Salom!");

salom();

SyntaxError: Unexpected end of input

"Kod kutilmaganda tugab qoldi" — ya'ni ochilgan { yopilmagan. VS Code juft qavslarni bir xil rangga bo'yaydi — shunga qarab topish oson.

6.5 Bir xil nomli ikki funksiya

function salom() {
  console.log("Salom!");
}

function salom() {
  console.log("Xayr!");
}

salom();

Konsolda:

Xayr!

JavaScript xato bermadi, lekin birinchi funksiya umuman ishlamadi — ikkinchisi uni "bosib" ketdi. Katta faylda buni sezmay qolish oson: siz bitta funksiyani tuzatasiz, ishlayotgani esa boshqasi bo'ladi. Har bir funksiya nomi takrorlanmas bo'lsin.

Maslahat: Bu oddiy <script> va node fayl.js dagi xatti-harakat. Zamonaviy modul fayllarda (<script type="module">, .mjs — modullar qismida o'rganamiz) JavaScript bunga umuman yo'l qo'ymaydi: SyntaxError: Identifier 'salom' has already been declared — "salom nomi allaqachon e'lon qilingan". Bu yaxshi: xato darhol ko'rinadi.

7. Qiziq fakt: funksiyani e'londan oldin chaqirsa bo'ladi

salom();

function salom() {
  console.log("Salom!");
}

Konsolda:

Salom!

Chaqiruv funksiyadan yuqorida turibdi, lekin kod ishlaydi. Qanday qilib? Axir kod yuqoridan pastga bajariladi-ku?

Ikkalasi ham rost. Kod haqiqatan qatorma-qator bajariladi. Lekin bajarishdan oldin JavaScript faylni bir marta tez ko'zdan kechirib, function bilan e'lon qilingan barcha funksiyalarni yozib oladi. Shuning uchun birinchi qatorga yetganda salom allaqachon ma'lum. Bu hodisa hoisting ("ko'tarish") deb ataladi.

Bu qanday ishlashini hoisting darsida batafsil ko'ramiz. Hozircha odat qiling: avval e'lon qiling, keyin chaqiring. Ikki sabab bor. Birinchisi: boshqa dasturchi kodingizni yuqoridan o'qiydi — chaqiruvni ko'rib, funksiyani pastdan qidirib yurmasin. Ikkinchisi: keyingi darslardagi funksiya turlarida bu "hiyla" ishlamaydi.

8. Mashqlar

1-mashq (oson): Salomlashish

salomBer nomli funksiya yozing. U konsolga Assalomu alaykum! IlmHamroh'ga xush kelibsiz. deb chiqarsin. Funksiyani 2 marta chaqiring.

Ishora: matnda apostrof bor — satrni qo'shtirnoq "..." bilan yozing.

function salomBer() {
  console.log("Assalomu alaykum! IlmHamroh'ga xush kelibsiz.");
}

salomBer();
salomBer();

Assalomu alaykum! IlmHamroh'ga xush kelibsiz.
Assalomu alaykum! IlmHamroh'ga xush kelibsiz.

2-mashq (o'rta): Chek ramkasi

Ikki funksiya yozing:

• chiziqChiz — konsolga 20 ta - belgisidan iborat chiziq chiqaradi. Satr metodlari darsidagi "-".repeat(20) ni ishlating: u "-" ni 20 marta takrorlaydi. (Xohlasangiz, 20 ta tireni qo'lda yozsangiz ham bo'ladi.)
• chekChiqar — avval chiziqChiz() ni chaqiradi, keyin Non — 4 000 so'm qatorini chiqaradi, oxirida yana chiziqChiz() ni chaqiradi.

So'ng chekChiqar() ni bir marta chaqiring.

function chiziqChiz() {
  console.log("-".repeat(20));
}

function chekChiqar() {
  chiziqChiz();
  console.log("Non — 4 000 so'm");
  chiziqChiz();
}

chekChiqar();

--------------------
Non — 4 000 so'm
--------------------

3-mashq (qiyin): Ko'paytirish jadvali

yettiningJadvaliniChiqar funksiyasini yozing. U for sikli yordamida 7 ning ko'paytirish jadvalini chiqarsin: 7 x 1 = 7 dan 7 x 5 = 35 gacha. Keyin funksiyani chaqiring.

Bonus: jadvalning boshida --- 7 ning jadvali --- sarlavhasi chiqsin.

function yettiningJadvaliniChiqar() {
  console.log("--- 7 ning jadvali ---");
  for (let i = 1; i <= 5; i++) {
    console.log(`7 x ${i} = ${7 * i}`);
  }
}

yettiningJadvaliniChiqar();

--- 7 ning jadvali ---
7 x 1 = 7
7 x 2 = 14
7 x 3 = 21
7 x 4 = 28
7 x 5 = 35

9. Real ishda

Funksiyalar — har qanday dasturning asosiy qurilish bloki. Quyidagi nomlarning ko'pini hali bilmaysiz — bu normal, har biriga kursda alohida qism bor. Hozir faqat funksiya hamma joyda ekanini ko'ring:

• Telegram bot: har bir buyruq (/start, /help) uchun alohida funksiya yoziladi.
• Veb-sayt: tugma bosilganda bajariladigan kod — funksiya.
• React (sayt yasash uchun eng mashhur vosita): ekrandagi har bir bo'lak — tugma, menyu, kartochka — aslida funksiya.
• npm (dasturchilar uchun tayyor kodlar "do'koni"): u yerdan olinadigan paketlar sizga tayyor funksiyalar beradi.

Intervyularda ham "funksiya nima va nega kerak?" savoli boshlang'ich darajadagi dasturchiga albatta beriladi. Javob: "takrorlanadigan kodni nomlab, bir joyda saqlash va xohlagan joyda chaqirish uchun".

Xulosa

• Funksiya — nom berilgan, qayta ishlatiladigan kod bo'lagi.
• E'lon qilish: function nomi() { ... } — kod yoziladi, lekin hali bajarilmaydi.
• Chaqirish: nomi() — qavslar kodni ishga tushiradi. Xohlagancha chaqirsa bo'ladi.
• Chaqirilgan funksiya ishini tugatib, chaqirilgan joyga qaytadi.
• Nom — fe'l bilan, camelCase'da, bitta ish uchun.
• ReferenceError: ... is not defined — ko'pincha nomdagi xato.

Keyingi dars: Parametrlar, argumentlar va default qiymatlar — funksiyaga ma'lumot berib, uni har safar boshqacha ishlashga majbur qilamiz.