JavaScript arrow funksiyalar (=>)

Massiv metodlari darsida narx => narx * 0.9 kabi yozuvni ko’rgansiz. Bu — arrow funksiya: qisqa va callback uchun maxsus qulay shakl.

Oddiy funksiyadan arrow’ga

Bir xil ish, uch xil yozuv:

JavaScript

function kvadrat1(n) {
return n * n;
}

const kvadrat2 = (n) => {
return n * n;
};

const kvadrat3 = (n) => n * n;

console.log(kvadrat1(5));
console.log(kvadrat2(5));
console.log(kvadrat3(5));

Uchalasi bir xil natija beradi. Farq — faqat yozuvda.

Qisqartirish qoidalari

Arrow funksiyani bosqichma-bosqich qisqartirish mumkin:

JavaScript

const a = (n) => { return n + 1; };

const b = (n) => n + 1;

const c = n => n + 1;

console.log(a(10), b(10), c(10));

Tana bitta return bo’lsa — figurali qavs va return tushiriladi (yashirin return);
parametr bitta bo’lsa — qavs ham tushiriladi.

Nol yoki ikki parametr — qavs shart

Parametr bo’lmasa yoki bittadan ko’p bo’lsa, qavs majburiy:

const salom = () => "Salom";        // qavs bo'sh, lekin bor
const yigindi = (a, b) => a + b;    // ikkita — qavs shart

Obyekt qaytarish

Yashirin return bilan obyekt qaytarishda tuzoq bor:

JavaScript

const notogri = (ism) => { ism: ism };
console.log(notogri("Aziz"));

const togri = (ism) => ({ ism: ism });
console.log(togri("Aziz"));

Birinchi holatda { ni JavaScript funksiya tanasi deb o’qidi, obyekt deb emas — natija undefined. Obyektni yumaloq qavsga o’rash muammoni hal qiladi.

Callback’da eng foydali

Arrow funksiya massiv metodlari bilan birga eng ko’p ishlatiladi:

JavaScript

const sonlar = [5, 12, 8, 130, 44];

console.log(sonlar.map(n => n * 2));
console.log(sonlar.filter(n => n > 10));
console.log(sonlar.reduce((a, b) => a + b, 0));
console.log(sonlar.sort((a, b) => a - b));

Eski yozuv bilan solishtiring:

sonlar.map(function (n) {
  return n * 2;
});

Bir amal uchun uch qator — arrow bilan bitta.

this — asosiy farq

Arrow funksiyaning oddiy funksiyadan haqiqiy farqi sintaksis emas, balki this ga munosabati. Oddiy funksiya this ni o’zi hosil qiladi; arrow funksiya esa uni tashqi kontekstdan oladi:

JavaScript

const hisoblagich = {
soni: 0,
qadamlar: [1, 2, 3],

hisobla() {
  this.qadamlar.forEach((q) => {
    this.soni += q;
  });
  return this.soni;
},
};

console.log(hisoblagich.hisobla());

Bu yerda forEach ichidagi arrow funksiya this ni tashqaridagi hisobla metodidan oldi — shuning uchun this.soni ishladi.

Oddiy funksiya bilan bu buziladi:

JavaScript

const hisoblagich = {
soni: 0,
qadamlar: [1, 2, 3],

hisobla() {
  this.qadamlar.forEach(function (q) {
    this.soni += q;
  });
  return this.soni;
},
};

console.log(hisoblagich.hisobla());

Natija 0 — ichkaridagi this boshqa narsani ko’rsatdi. this mavzusi alohida darsda batafsil ko’riladi.

Qachon ishlatmaslik kerak

Arrow funksiya obyekt metodi sifatida yaramaydi:

JavaScript

const talaba = {
ism: "Aziz",
salomlash: () => {
  console.log("Men " + this.ism);
},
};

talaba.salomlash();

undefined chiqdi — arrow this ni obyektdan olmaydi. Metod uchun qisqa yozuvni ishlating:

JavaScript

const talaba = {
ism: "Aziz",
salomlash() {
  console.log("Men " + this.ism);
},
};

talaba.salomlash();

Amaliy mashq

(a, b) => a * b ko’paytirish funksiyasini yozing;
uni to’liq function shaklida qayta yozing;
massivdagi matnlarni bosh harfga o’girish uchun map + arrow ishlating;
{ ism, yosh } obyekt qaytaradigan arrow funksiya yozing (qavsni unutmang);
obyekt metodini arrow bilan yozib ko’ring — this nima bo’ladi?

5-qadam arrow funksiyani qayerda ishlatmaslik kerakligini ko’rsatadi.

Qisqacha xulosa

Arrow funksiya => bilan yoziladi: (a, b) => a + b.
Tana bitta ifoda bo’lsa return yozilmaydi — yashirin return.
Bitta parametrda qavs tushadi; nol yoki ikkitada — shart.
Obyekt qaytarishda yumaloq qavsga o’rash kerak: () => ({ ... }).
Arrow this ni tashqi kontekstdan oladi — callback uchun ideal, obyekt metodi uchun yaramaydi.

Keyingi darsda callback funksiyalar va ular orqali asinxron kodga o’tamiz.