DarslarWeb dasturlash

Funksiyalar — declaration va expression

Funksiya yaratishning turli usullari: declaration, expression, arrow. Parametr, argument, return va scope.

50 daqiqa

JavaScript — Dars 10

Funksiyalar — kodni qayta ishlatish

Bir marta yozing, ming marta chaqiring. Funksiyalar — dasturlashning asosiy poydevori.

functionreturn=>parametr

Dars rejasi

6 ta mavzu

01Nega funksiya kerak?
02Function Declaration
03Function Expression
04Arrow funksiyalar
05Parametrlar va return
06Scope — qo'llanish doirasi

1. Nega funksiya kerak?

Bir xil kodni qayta-qayta yozmaslik uchun. Bir marta funksiya yozib, istalgan joyda chaqirasiz.

Funksiyasiz — takror

1console.log("Salom, Ali!");
2console.log("Salom, Vali!");
3console.log("Salom, Hasan!");

Funksiya bilan — toza

1function salomBer(ism) {
2  console.log("Salom, " + ism + "!");
3}
4
5salomBer("Ali");
6salomBer("Vali");
7salomBer("Hasan");

2. Function Declaration

Eng klassik usul — function kalit so'zi bilan yaratish. «Ko'tarilish» (hoisting) xususiyati bor — e'lon qilishdan oldin ham chaqirish mumkin.

1// E'lon qilishdan OLDIN chaqirsa ham ishlaydi!
2qoshish(5, 3);  // 8
3
4function qoshish(a, b) {
5  return a + b;
6}
7
8console.log(qoshish(10, 20));  // 30

3. Function Expression

Funksiya o'zgaruvchiga qiymat sifatida beriladi. E'lon qilishdan oldin chaqirib bo'lmaydi.

1// Bu oldin chaqirib bo'lmaydi!
2// qoshish(5, 3);  // XATO: Cannot access before initialization
3
4const qoshish = function(a, b) {
5  return a + b;
6};
7
8console.log(qoshish(5, 3));  // 8
9
10// Nomli expression (kam ishlatiladi)
11const ayirish = function ayir(a, b) {
12  return a - b;
13};

4. Arrow funksiyalar

ES6 da kelgan qisqa yozuv. Zamonaviy kodda eng ko'p ishlatiladi — ayniqsa map/filter bilan.

1// Oddiy
2const qoshish = (a, b) => {
3  return a + b;
4};
5
6// Bitta ifoda — return avtomatik
7const qoshish2 = (a, b) => a + b;
8
9// Bitta parametr — qavssiz
10const ikki = x => x * 2;
11
12// Parametrsiz — qavs majburiy
13const salom = () => "Salom!";
14
15// Obyekt qaytarish — qavs ichida
16const user = () => ({ ism: "Ali", yosh: 17 });
17
18// map/filter bilan kombinatsiya
19const sonlar = [1, 2, 3, 4, 5];
20const juftlar = sonlar.filter(x => x % 2 === 0);
21const ikkibar = sonlar.map(x => x * 2);

Declaration

function nom(). Hoisting bor. Obyekt metodlari, rekursiya uchun qulay.

Expression

const nom = function(). Hoisting yo'q. Shartli yaratish mumkin.

Arrow

const nom = () =>. Qisqa. Callback'lar uchun eng yaxshisi.

5. Parametrlar va return

1// Bir nechta parametr
2function toliqIsm(ism, familiya) {
3  return ism + " " + familiya;
4}
5toliqIsm("Ali", "Valiyev")  // "Ali Valiyev"
6
7// Default qiymat
8function salom(ism = "mehmon") {
9  return "Salom, " + ism + "!";
10}
11salom()           // "Salom, mehmon!"
12salom("Ali")      // "Salom, Ali!"
13
14// Rest parametr — noma'lum sondagi argument
15function yigindi(...sonlar) {
16  return sonlar.reduce((a, b) => a + b, 0);
17}
18yigindi(1, 2, 3)           // 6
19yigindi(1, 2, 3, 4, 5, 6)  // 21
20
21// return — funksiyani tugatadi
22function absolyut(x) {
23  if (x < 0) return -x;
24  return x;
25}

6. Scope — qo'llanish doirasi

1// Funksiya ichidagi o'zgaruvchilar tashqariga chiqmaydi
2function hisoble() {
3  const ichki = 100;
4  console.log(ichki);  // 100
5}
6
7hisoble();
8// console.log(ichki);  // XATO: ichki is not defined
9
10// Global o'zgaruvchini ko'radi
11const pi = 3.14;
12function radius(r) {
13  return pi * r * r;
14}
15
16// Bloklar ham o'z scope'iga ega (let, const)
17if (true) {
18  let x = 5;
19  const y = 10;
20}
21// console.log(x);  // XATO

Mini kalkulyator — funksiyalar bilan

HTML

<div class="row">
  <input type="number" id="a" value="10">
  <select id="op">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
  <input type="number" id="b" value="5">
  <button onclick="hisobla()">=</button>
</div>
<div id="r">Natija...</div>

function hisobla() {
    const a = Number(document.getElementById("a").value);
    const b = Number(document.getElementById("b").value);
    const op = document.getElementById("op").value;

let natija;
    switch (op) {
      case "+": natija = qoshish(a, b); break;
      case "-": natija = ayir(a, b); break;
      case "*": natija = kopay(a, b); break;
      case "/": natija = bol(a, b); break;
    }
    document.getElementById("r").innerText = a + " " + op + " " + b + " = " + natija;
  }
</script>

Natijajonli

Kichik test

0 / 5

1.Qaysi funksiya turini e'lon qilishdan oldin chaqirish mumkin?

2.Arrow funksiyada bitta parametr qanday yoziladi?

3.return yo'q funksiya nima qaytaradi?

4.Default parametr qanday beriladi?

5.Funksiya ichidagi const x = 5; tashqarida?

Mustaqil ish

0 / 7