Arrow Function nedir ?
Ecmascript 6 ile beraber gelen arrow function, javaScript fonksiyon yazımında adeta küçük bir devrim yaptı. Her fonksiyon tanımında kullanılan function anahtar kelimesinin kullanımını kaldırarak, yerine
( ) => { }
bu şık ifadeyi getirdi. Arrow fonksiyonlar tanıtıldıktan sonra normal(regular) fonksiyonlar kalktı gibi bir mantık doğru değildir. Çünkü arrow fonksiyonlar, normal fonksiyonların yerine getirilmemiştir. Arrow fonksiyonlar, normal fonksiyonlara alternatiftir. Arrow fonksiyonu detaylı bir şekilde inceleyeceğiz ama öncesinde hepimizin aşina olduğu normal fonksiyonların yazımı ile arrow fonksiyonun yazımı nasıl buna bakalım
Arrow fonksiyonu kodu kısaltarak zarif bir görünüm sağlıyor. Söz dizimine alıştıktan sonra anlaşılması kolay kod yazmamıza yardımcı oluyor.
Arrow fonksiyonların en çok kullanıldığı durumlardan biri de callback fonksiyonlar
Görüldüğü gibi arrow fonksiyonlar nerede kullanılırlarsa kullanılsınlar mantık aynı. function anahatar kelimesinin yerine arrow function sembolü geliyor.
Arrow fonksiyonun Yapısı
Arrow fonksiyonlar, normal fonksiyonlar gibi içerisine parametreler alabilir ve bu değerleri return anahtar kelimesiyle döndürebilir. Normal fonksiyonlarda olduğu gibi arrow fonksiyonlarda da bu iş keyfidir.
Normal fonksiyonlarda fonksiyon parametre almasa dahi ( ) işaretlerini kullanmak zorundayız fakat arrow fonksiyonlarda bunun içinde kolaylık sağlanmış. Eğer tek bir parametremiz varsa ( ) kullanmamıza gerek kalmıyor. Fonksiyon parametre almıyorsa ( ) yerine _ kullanabiliyoruz. İki veya ikiden fazla parametre var ise mecbur ( ) kullanmak zorundayız.
Normal fonksiyonlardan farklı olarak arrow fonksiyonlarda return anahtar kelimesi kullanılmadan da geriye değer döndürülebilir. Bunun için kodun yalnızca bir satırdan oluşması ve süslü parantez içine alınmaması gerekir. Eğer birden fazla satır varsa kod, süslü parantez içerisine alınmalı ve return anahtar kelimesi kullanılmalıdır.
Arguments
Arrow fonksiyonu normal fonksiyondan ayıran en önemli özelliklerden biri fonksiyonun içerisinde arguments nesnesine ulaşama imkanı vermemesidir. arguments dizi benzeri bir nesnedir ve fonksiyona geçilen argümanlara fonksiyonun içerisinde ulaşma imkanı sağlar.
The lexical this
Arrow fonksiyonu normal fonksiyondan ayıran en önemli özelliklerden bir diğeri ise this anahtar kelimesidir. JavaScript’te ki this anahtar kelimesi yazılımcılarda kafa karıştırıcı konuların başında gelmektedir. this’in kafa karıştıcı olmasının nedeni ise nerede çağırıldığına bağlı olarak değerinin değişmesindendir. Herhangi bir fonksiyonun dışında çağrıldığında, this varsayılan olarak tarayıcıdaki Window nesnesidir.
Aşağıda global kapsamda çağrılan merhaba fonksiyonu da Window nesnesine ayarlanacaktır.
Bir objenin içerisinde çağrıldığında ise this objenin kendisine atanacaktır.
constructor olarak çağrıldığında, this yeni oluşturulan nesneyi ifade eder.
Event Listener olarak çağırıldığında this elementin kendisini ifade eder.
Yukarıda ki örneklerde de gördüğümüz gibi this’in değeri onu çağıran fonksiyon tarafından atanmaktadır. Her fonksiyon kendi this değerini ayarlamaktadır.
Arrow fonksiyonlarda this, fonksiyon nasıl çağrılırsa çağrılsın asla yeni bir değere bağlanmaz. this her zaman onu çevreleyen kodun this değeriyle aynı değerde olacaktır.
Bu ifade biraz kafa karıştırıcı olabilir fakat örneklerle daha iyi anlayacaksınız
Örnekte de görüldüğü gibi bir nesnenin içerisindeki normal fonksiyonda ki this nesnenin kendisine ayarlanırken, arrow fonksiyonda ki this global kapsamdaki Window nesnesine ayarlanmıştır. fnArrow fonksiyonu içerisinde ki this, obj nesnesine atanması gerekirken obj nesnesini görmezden gelerek onu çevreleyen Window nesnesine atanmıştır. Pekişmesi için bir kaç örnek daha yapalım.
En üstteki this.sayi global kapsamda yer almaktadır ve değeri 10 olarak atanmıştır. obj nesnesinin bir property’si olan sayi ise 18' e eşitlenmiştir. obj nesnesine ait fn fonksiyonu normal bir fonksiyondur ve onun içerisinde ise geriye dönen bir arrow fonksiyon vardır. Burada ki soru şu: Arrow fonksiyonun içerisindeki this.sayi geriye 18 mi , yoksa 10 değerini mi döndürecek ?
x değişkenine atanmış obj.fn() fonksiyonu, geriye arrow fonksiyonu döndürecek ve x değişkenine bu fonksiyonu atayacaktır. x() komutu çalıştırıldığında arrow fonksiyonu çalışacak ve this.sayi değerini dönecek. Sonuç 18 olacaktır. Peki ama neden 10 değil de 18 ?
Her fonksiyon kendi this değerini oluşturur fakat arrow fonksiyonu kendi this değerini oluşturamaz. Kendisini çevreleyen scope’a ait this değerini alır.
Burada arrow fonksiyonu kendi this değerini oluşturamadığı için arrow fonksiyonun this değeri, üst scope’un this değerine atanır. Dolayısıyla sonuç olarak this değeri obj nesnesinin kendisi olur. Bundan ötürü global context’te ki 10 değeri yerine obj nesnesinin property’si olan sayi değeri 18 döner.
Nested Arrow functions
Normal fonksiyonlarda iç içe fonksiyon yazabildiğimiz gibi arrow fonksiyonlarda da bunu yapabiliyoruz. Aşağıda iç içe yazılmış normal fonksiyonlar ile ilgili örnek var.
Birde aynı örneği arrow fonksiyonla yapalım
Ne kadar kısa ve öz değil mi ? Arrow fonksiyon, kod yazarken bizlere gerçekten büyük kolaylık sağlıyor. Normal fonksiyonlara göre sade bir görüntü sunuyor.
Arrow fonksiyonları nerelerde kullanmamalıyız sorusuyla yazımızı bitirelim.
1- Arrow fonksiyonlar, function anahtar kelimesi kullanmadıkları için constructor olarak kullanılamazlar.
2- Arrow fonksiyonları kullanırken dikkat edilmesi gereken yerlerden biriside click handle’ lar dır.
Yukarıdaki kod çalıştırıldığında TypeError, cannot read property ‘toggle’ of undefined şeklinde hata alacağız. Çünkü this anahtar kelimesi butona değil Windows nesnesine atanmıştır. Hatırlarsanız arrow fonksiyonların içerisindeki this anahtar kelimesi nesnenin kendisine değil, Window nesnesine atanmaktadır. Hatayı önlemek için arrow fonksiyon yerine normal(regular) fonksiyon kullanmamız gerekir.