12-dars

Function Declaration vs Function Expression

JavaScript'da function yozishning asosiy 2 xil usuli bor:

1. Function Declaration
2. Function Expression

Bu ikki usul tashqi ko'rinishda o'xshash bo'lsa ham, hoisting va ishlash tartibida muhim farqlarga ega.

---

1️⃣ Function Declaration

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

console.log(add(2, 3)); // 5

Bu usul function declaration deyiladi.

Xususiyatlari

• ✅ Hoisting bor
• ✅ Function'ni e'lon qilishdan oldin ham chaqirish mumkin

console.log(add(2, 3)); // 5

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

Bu ishlaydi, chunki JavaScript function declaration'ni oldindan xotiraga joylaydi.

---

2️⃣ Function Expression

const add = function (a, b) {
  return a + b;
};

Bu esa function expression.

Bu yerda function alohida nom sifatida e'lon qilinmaydi, balki o'zgaruvchi ichida saqlanadi.

Muhim farq

console.log(add(2, 3)); // ReferenceError

const add = function (a, b) {
  return a + b;
};

Nega xato bo'ladi?

• const ham hoisting bo'ladi
• Lekin const o'zgaruvchi initialize bo'lmaguncha ishlatib bo'lmaydi
• Shu oraliq holat Temporal Dead Zone (TDZ) deyiladi

---

3️⃣ Real hayotdagi ishlatilishi

Function declaration ko'pincha qayerda ishlatiladi?

Utility function

Kichik yordamchi funksiyalar uchun juda qulay (masalan, narx formatlash).

function formatPrice(amount) {
  return "$" + amount.toFixed(2);
}

console.log(formatPrice(5)); // $5.00

Real hayot: online do'konda narxlarni standart formatda ko'rsatish.

Helper function

Murakkab logikani kichik bo'laklarga ajratishda foydali.

function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

console.log(calculateTotal([{ price: 10 }, { price: 20 }])); // 30

Real hayot: shopping cart'dagi jami narxni hisoblash.

---

Function expression ko'pincha qayerda ishlatiladi?

Callback

Boshqa funksiyaga argument sifatida beriladigan funksiyalar.

const numbers = [1, 2, 3];

numbers.forEach(function (num) {
  console.log(num * 2);
});
// 2, 4, 6

Real hayot: array'dagi har bir elementga bir xil amal qo'llash.

Closure

Ichki function tashqi function o'zgaruvchilarini "eslab qoladi".

function makeCounter() {
  let count = 0;
  return function () {
    count++;
    return count;
  };
}

const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2

Real hayot: "like" tugmasi bosilganda foydalanuvchi bo'yicha alohida hisoblagich yuritish.

Module pattern

Private o'zgaruvchilarni tashqaridan yashirish uchun.

const Cart = (function () {
  let items = [];
  return {
    add(item) {
      items.push(item);
    },
    getTotal() {
      return items.length;
    },
  };
})();

Cart.add("Apple");
console.log(Cart.getTotal()); // 1

Real hayot: cart ichki holatini to'g'ridan-to'g'ri o'zgartirishdan himoya qilish.

---

4️⃣ Yana bir expression turi: Arrow Function

const add = (a, b) => a + b;

Arrow function ham function expression'ning qisqa yozilish ko'rinishi hisoblanadi.

---

📝 Xulosa

• Function declaration hoisting sababli oldin chaqirilsa ham ishlaydi
• Function expression (const/let bilan) initialize bo'lmaguncha ishlamaydi
• Bu farq Temporal Dead Zone tufayli yuz beradi
• Declaration odatda utility/helper funksiyalar uchun qulay
• Expression callback, closure va module pattern'da juda ko'p ishlatiladi
• Arrow function — expression'ning ixcham ko'rinishi

Bu mavzuni yaxshi tushunsangiz, keyingi bosqichda:

• Scope
• Closure
• this va arrow function farqlari

mavzularini ancha oson o'zlashtirasiz.