Evet bildiğiniz gibi es6 ile birlikte javascript dünyasında büyük değişimler yaşandı.Bunlardan biriside arrow functions olarak tanımladığımız normal fonksiyonlardan farklı olarak çalışan fonksiyonlardır.
BASİT ÖRNEK BİR ARROW FONKSYİON:
Evet basit bir arrow function bu şekilde çalışır parantez koymassanız yanına yazdığınız değeri return eder.Normal fonksiyonlardan farklı olarak arrow fonksiyonlar this parametresini farklı şekilde çalıştırır.Normal fonksiyonlarda this parametresi sadece bulunduğu scope ve parent scope'u kapsarken arrow fonksyionlarda this parametresi bütün global scope'u kapsar.
ÖRNEK UYGULAMA
Evet eğer bu kodu uygular isek neler olacağına bir göz atalım.
Gördüğünüz gibi arrow fonksiyon yani ilk basılan fonksiyon isim nesnesini değiştirmekte başarısız oldu.Çünkü arrow fonksiyonlar tüm alanı kapsarlar.zaten yazdırdığımızda window'u kapsadığıda gözükmektedir.Fakat normal fonksiyon ile yazdırdığımızda isim nesnesini this parametresinden ulaşıp değiştirebildik çünkü normal fonksiyonlarda this parametresi sadece kendi ve bir üst parent scope'u kapsar.Arrow fonksiyon ile normal fonksiyon arasındaki ana fark budur.Elinizden geldiğince eğer ayrı bir şekilde parent scope'a ulaşma isteğiniz yoksa arrow fonksiyonları kullanınız.Kodunuzu daha temiz tutar ve daha kullanışlıdır.
BASİT ÖRNEK BİR ARROW FONKSYİON:
Kod:
const arrow = (x,y)=>x+y;
Evet basit bir arrow function bu şekilde çalışır parantez koymassanız yanına yazdığınız değeri return eder.Normal fonksiyonlardan farklı olarak arrow fonksiyonlar this parametresini farklı şekilde çalıştırır.Normal fonksiyonlarda this parametresi sadece bulunduğu scope ve parent scope'u kapsarken arrow fonksyionlarda this parametresi bütün global scope'u kapsar.
ÖRNEK UYGULAMA
Kod:
const kisi = {
isim: "Mehmet",
yazdirNormal: function () {
this.isim = "Fahrettin";
console.log(this);
},
yazdirArrow: () => {
this.isim = "Fahrettin";
console.log(this);
},
};
kisi.yazdirArrow();
console.log(kisi.isim);
kisi.yazdirNormal();
console.log(kisi.isim);
Evet eğer bu kodu uygular isek neler olacağına bir göz atalım.
Gördüğünüz gibi arrow fonksiyon yani ilk basılan fonksiyon isim nesnesini değiştirmekte başarısız oldu.Çünkü arrow fonksiyonlar tüm alanı kapsarlar.zaten yazdırdığımızda window'u kapsadığıda gözükmektedir.Fakat normal fonksiyon ile yazdırdığımızda isim nesnesini this parametresinden ulaşıp değiştirebildik çünkü normal fonksiyonlarda this parametresi sadece kendi ve bir üst parent scope'u kapsar.Arrow fonksiyon ile normal fonksiyon arasındaki ana fark budur.Elinizden geldiğince eğer ayrı bir şekilde parent scope'a ulaşma isteğiniz yoksa arrow fonksiyonları kullanınız.Kodunuzu daha temiz tutar ve daha kullanışlıdır.