arrow va oddiy funksiya orasidagi farqlar

1. Sintaksis

Arrow funksiyalarda yozilishida strelka ishlatiladi: =>

const sayHello = (name) => {
  return 'Hello ' + name
}

Agar funksiya tanasi faqat bitta ifodadan tashkil topgan bo'lsa return kalit so'zini ishlatish shart emas

const sayHello = (name) => 'Hello ' + name

Agar argumentlar soni bir dona bo'lsa, qavslar ham shart bo'lmaydi

const sayHello = name => 'Hello ' + name

2. arguments o'zgaruvchisi

Funksiya noma'lum miqdordagi argumentlarni qabul qilganda biz maxsus argumentsdeb nomlangan o'zgaruvchidan foydalanishimiz mumkin

function logNumbers(num1, num2) {
  console.log(arguments)
}

logNumbers(8, 24) // 

Bu o'zgaruvchi orqali masalan quyidagicha funksiya yozishimiz mumkin:

function sum() {
  return Array.from(arguments).reduce((sum, item) => sum + item, 0);
}

sum(1, 2, 3, 4, 5) // natija: 15 qaytaradi

Lekin bu o'zgaruvchi arrow funksiyalarda mavjud emas. Agar arrow funksiya ichida argumentso'zgaruvchisini ishlatmoqchi bo'lsak JavaScript ReferenceError xatoligini qaytaradi.

const logNumbers = (num1, num2) => {
  console.log(arguments)
}

logNumbers(8, 24) // Uncaught ReferenceError: arguments is not defined

Arrow funksiyalarda barcha argumentlarni olish uchun spread sintaksisidan foydalanishimiz mumkin

const sum = (...numbers) => {
  return numbers.reduce((sum, item) => sum + item, 0);
}

sum(1, 2, 3, 4, 5);

3. Bir xil nomdagi takrorlangan argumentlar

Odatiy funksiyalarni e'lon qilishda bir xil nomdagi bir nechta parametr beradigan bo'lsak, eng oxirgisini oladi:

function exampleFunction(a, b, a) {
  console.log(a, b)
}

exampleFunction("first", "second", "third")

Natija:

Ko'rib turganingizdek, a parametrining qiymati sifatida 3-argumentda berilgan "third" matni chiqyapti.

Ammo qat'iy rejimda, ya'ni "use strict" ishlatganimizda syntax error xatoligi sodir bo'ladi

Arrow funksiyalarda esa "use strict"ishlatmasak ham syntax error xatoligi sodir bo'ladi.

const exampleFunction = (a, b, a) => {
  console.log(a, b)
}

exampleFunction("first", "second", "third")

4. Hoisting

JavaScript-da hoisting - bu o'zgaruvchilar va funksiyalarni kod bajarilishidan oldin, kompilyatsiya paytida o'zlarining qamrab oluvchi doirasi (scope) yuqorisiga ko'chirilishidir

Oddiy funksiyalar yuqoriga ko'tariladi. Ularni e'lon qilinishidan oldin ham ularga murojaat qilish va chaqirish mumkin.

regularFunction()

function regularFunction() {
  console.log("This is a regular function.")
}

Natija:

Arrow funksiyalar esa yuqoriga ko'tarilmaydi. Ularga faqat e'lon qilingandan so'nggina murojaat qilishimiz mumkin:

arrowFunction()

const arrowFunction = () => {
  console.log("This is an arrow function.")
}

Natija:

5. this binding

Oddiy funksiyalarning o'zlarining this konteksti mavjud. Va bu kontekst funksiyani qanday chaqirganingiz yoki bajarganingizga qarab dinamik ravishda aniqlanadi.

arrow funksiyalarining esathis konteksti yo'q. Buning o'rniga, ular o'zlari yaratilgan atrofdagi leksik kontekstdan this qiymatini oladi.

Oddiy funksiyalarda, oddiy funksiya chaqiruvi this qiymatini window obyektiga o'rnatadi (yoki agar siz "qat'iy rejim"dan foydalanayotgan bo'lsangiz, undefined ga o'rnatadi):

function myRegularFunction() {
  console.log(this)
}
    
myRegularFunction()

Arrow funksiyalarda esa, oddiy funksiya chaqiruvi this qiymatini qat'iy rejimdan foydalanayotganingiz yoki yo'qligingizdan qat'i nazar, atrofdagi kontekstga o'rnatadi. Quyidagi misolda, atrofdagi kontekst global window obyektidir.

const myArrowFunction = () => {
  console.log(this);
};

myArrowFunction()

Obyektning metodi sifatida chaqirilganda

Agar obyekt ichidagi oddiy funksiyani ishga tushirsak, this o'sha obyektga teng bo'ladi. Amma obyekt ichidagi funksiya arrow bo'lsa, this window global obyektiga teng bo'ladi.

const myObject = {
  regularExample: function() {
    console.log("REGULAR: ", this)
  },
    
  arrowExample: () => {
    console.log("ARROW: ", this)
  }
}
    
myObject.regularExample()
myObject.arrowExample()

Konstruktor funksiya sifatida ishlatish

Odatiy funksiyalarda new kalit so'zi orqali yangi obyekt hosil qilishimiz mumkin. Bu holatda this yaratilayotgan yangi obyektga teng bo'ladi.

Arrow funksiyalar bilan esa new orqali yangi obyekt yarata olmaymiz, sababi arrow funksiyalarida this yaratilayotgan obyektga emas, funksiyani o'rab turgan kontekstga teng bo'ladi. Shu sababli arrow funksiyalarni konstuktor sifatida ishlata olmaymiz.

function RegularFuncBird(name, color) {
  this.name = name
  this.species = color
  console.log(this)
}

const ArrowFuncBird = (name, color) => {
  this.name = name
  this.color = color
  console.log(this)
}

new RegularFuncBird("Parrot", "blue") 
new ArrowFuncBird("Parrot", "blue")

Maqolani tayyorlashda ishlatilgan resurslar:

https://www.freecodecamp.org/news/regular-vs-arrow-functions-javascript/

E'tiboringiz uchun rahmat!