13-dars

Arrow Function - to'liq tushuncha

Arrow function ES6 bilan kirgan bo'lib, function yozishni qisqa va aniq qiladi.

const sum = (a, b) => {
  return a + b;
};

Qisqartirilgan variant:

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

---

1️⃣ Arrow function nima?

Arrow function oddiy function'ning "qisqa yozuvi"ga o'xshaydi, lekin xatti-harakati bir xil emas.

const greet = (name) => "Hello " + name;

Oddiy function:

function greet(name) {
  return "Hello " + name;
}

---

2️⃣ Muhim: arrow function oddiy function emas

Arrow function'da quyidagi cheklovlar bor:

• ❌ O'zining this qiymatini yaratmaydi
• ❌ O'zining arguments obyektiga ega emas
• ❌ new bilan ishlamaydi (constructor emas)
• ❌ prototype yo'q

Shu sababli arrow function'ni hamma joyda bir xil ishlatib bo'lmaydi.

---

3️⃣ Eng katta farq: this

Oddiy function'da this

this qiymati function'ni kim chaqirganiga qarab aniqlanadi.

const user = {
  name: "Ali",
  greet: function () {
    console.log(this.name);
  },
};

user.greet(); // Ali

Arrow function'da this

Arrow function this ni tashqi scope'dan oladi (lexical this).

const user = {
  name: "Ali",
  greet: () => {
    console.log(this.name);
  },
};

user.greet(); // undefined

Bu yerda this — user emas, tashqi kontekstdagi this.

---

4️⃣ Lexical scope va lexical this

Arrow function quyidagilarni tashqi scope'dan oladi:

• this
• super
• arguments

Misol:

function outer() {
  const arrow = () => {
    console.log(arguments);
  };

  arrow(1, 2, 3);
}

outer(10, 20); // [10, 20]

arrow(1, 2, 3) chaqirilsa ham, chiqayotgan arguments — outer function'iniki.

---

5️⃣ arguments yo'q

const test = () => {
  console.log(arguments);
};

test(1, 2, 3); // ReferenceError

To'g'ri yechim: rest parameter ishlatish.

const test = (...args) => {
  console.log(args);
};

test(1, 2, 3); // [1, 2, 3]

---

6️⃣ Constructor bo'lolmaydi

const Person = (name) => {
  this.name = name;
};

new Person("Ali"); // TypeError

Sababi:

• Arrow function'da konstruktorga xos ichki mexanizmlar yo'q
• this konstruktor usulida bog'lanmaydi

---

7️⃣ prototype yo'q

const fn = () => {};
console.log(fn.prototype); // undefined

Oddiy function:

function normalFn() {}
console.log(normalFn.prototype); // {}

---

8️⃣ Implicit return

Bir qatordagi oddiy ifodada return yozmasangiz ham bo'ladi:

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

Agar {} ishlatilsa, return shart:

const sum = (a, b) => {
  return a + b;
};

Object qaytarishda ehtiyot bo'ling

const getUser = () => ({ name: "Ali" });

Agar qavs bo'lmasa:

const getUser = () => {
  name: "Ali";
}; // undefined

---

9️⃣ Callback'larda eng foydali

Arrow function callback'larda juda qulay:

const numbers = [1, 2, 3];
const doubled = numbers.map((n) => n * 2);
console.log(doubled); // [2, 4, 6]

map, filter, forEach, setTimeout kabi joylarda kodni ancha ixcham qiladi.

---

🔟 Qachon ishlatish kerak?

✅ Ishlatish tavsiya etiladi

• Callback function'larda
• Qisqa, bir martalik function'larda
• Tashqi scope'dagi this ni saqlab qolish kerak bo'lganda

❌ Ishlatmaslik kerak

• Object method'larida (this obyektga bog'lanishi kerak bo'lsa)
• Constructor kerak bo'lsa
• Dynamic this talab qilinadigan holatlarda

---

1️⃣1️⃣ Real hayotdagi keng tarqalgan xato

Noto'g'ri:

const user = {
  name: "Ali",
  greet: () => {
    console.log("Hello " + this.name);
  },
};

user.greet(); // Hello undefined

To'g'ri:

const user = {
  name: "Ali",
  greet() {
    console.log("Hello " + this.name);
  },
};

---

1️⃣2️⃣ Deep insight

Arrow function'ning eng asosiy g'oyasi:

Bu this binding qilmaydigan function.

Ya'ni:

• Oddiy function'da this runtime'da (chaqirilganda) aniqlanadi
• Arrow function'da this yaratilgan paytda tashqi scope'dan "olib qo'yiladi"

Shu farq this bilan bog'liq ko'plab xatolarni ham, ko'plab qulayliklarni ham tushuntirib beradi.

---

📝 Xulosa

• Arrow function yozuvni qisqartiradi, lekin oddiy function bilan bir xil emas
• this, arguments, super tashqi scope'dan olinadi
• new bilan ishlamaydi va prototype ga ega emas
• Callback'larda juda qulay
• Object method va constructor o'rnida ko'pincha oddiy function afzal

Arrow function'ni to'g'ri joyda ishlatsangiz, kod ham toza bo'ladi, xatolar ham kamayadi.