Javascript | ES6 | Arrow Functions nədir?

Javascriptdə ES6 ilə gələn yenilikləridən biri də Arrow Functions-dır. Hərfi mənası ingiliscədən tərcümədə “ox funksiyalar” olan Arrow Functions, javascripdə bildiyimiz funksiyaların qısaldılmış və qısa sintaksis hala gətirilmiş formasıdır. Arrow funksiyalar gəldi deyə normal(regular) funksiyalar aradan çıxdı deyə bir şey yoxdur. Arrow funksiyalar normal funksiyaların alternatividir. Normal javascript funksiyası,

function myFun() {
return “Hello ES6”
}
document.write(myFun());

Bu funksiyanı bir dəyişənə mənimsədib yazmaq da olar. Tutaq ki,

const myFun=function() {
return “Hello ES6”
}
document.write(myFun());

ES6 ilə gələn yeni özəllik sayəsində funkisyanı daha qısa formada yazmaq mümkün oldu. Bəs Necə? Burada “function” söz silinir və əvəzinə => işarə yazılır.

const myFun=()=>{
return “Hello ES6”
}
document.write(myFun());

Adından da gördüyümüz kimi “ox” formasında bir sintaksisə malikdır. Tək sətirlik funksiyada fiqurlu mötərizəyə və “return” -ə ehtiyac yoxdur. Amma yaxşı olar ki, yazılsın çünki, çox sətirlik kod əlavə edilsə mötərizə və “return”unudula bilər.

const myFun=()=>”Hello ES6"
document.write(myFun());

Başqa bir nümunə kimi parametrli funksiya ilə də yoxlayaq,

const myFun=(x,y,c)=>{
return x+y*c;}
document.write(myFun(3,5,7));
//38

Arrow funksiyaların əsas istifadə forması callback funkiyalardır.

//Normal funksiya.
let clickBtn=document.querySelector('button');
clickBtn.addEventListener('click',function(){
console.log('Hello ES6');
});
//Arrow funksiya
let clickBtn=document.querySelector('button');
clickBtn.addEventListener(‘click’,() =>{ console.log(‘Hello ES6’);})

‘this’ keyword

Arrow funksiyaları normal funksiyalardan fərqləndirən əsəs cəhət this açar sözü ilə əlaqəlidir. Buda öz növbəsində scope ilə əlaqəlidir. Yəni normal funksiyalar, sadəcə çağrıldığı scope-ni əhatə ediyi halda arrow funkisyalarda bu bele deyil.

Bu da this -in harada çağrılmasından asılı olaraq onun mənasının öyrənilməsində çətinlik törədir. Əvvəlcə normal funksiyalar ilə mövzunu aydınlaşdıraq. Məsələn, qlobal olaraq çağrıldıqda window obyektlərin çıxaraqcaq.

console.log(this)
//
Window
alert: ƒ alert()
applicationCache: ApplicationCache
atob: ƒ atob()
blur: ƒ blur()…

Başqa bir hal, obyektin içərisində çağrıldıqda obyektin içinə aid olacaq. Məsələn,

var list={
car:’BMW’,
carsName:function () {
  console.log(this.car);
  }
}
list.carsName();
// BMW

Event Listener funksiyalarda çağırıldıqda isə çağrılan elementin özünə aid olur.

let clickBtn=document.querySelector(‘button’);
clickBtn.addEventListener(‘click’,function () {
console.log(this);
})
//<button>TRY</button>

Arrow funkisyalarda isə this-in daşıdığı məna fərqlidir. Əgər arrow funksiya ilə localda və qlobalda bir dəyişənə müraciət etmək istədikdə bu zaman o qlobalda olan dəyişəni çağıracaq. Bunu nümunədə daha aydın anlaya bilərsiniz;

var name = "Gulbahar";
var person = {
    name: "Bahar",
myFn: function () {
        console.log("my name is ", this.name);
    },
    myFn2: () => {
        console.log("my name is ", this.name);
    }
  
};
person.myFn();  // my name is Bahar
person.myFn2(); // my name is Gulbahar

Ümid edirəm faydalı olmuşdur.Oxuduğunuz üçün təşəkkülər!