Bugünkü yazımda sizlere Ecmascript 6 ile birlikte gelen bir diğer işlevsel ve efektif üyesi olan Arrow Function’ı tanıtacağım.Bu fonksiyon Javascript fonksiyon yazımında adeta bir devrim yarattı. Her fonksiyon tanımında kullanılan function anahtar kelimesinin kullanımını kaldırarak, yerine
‘’( ) => { }’’ ifadesini getirdi. Arrow fonksiyonu detaylı bir şekilde inceleyeceğiz ama öncesinde biraz normal fonskiyonlarımızın ve arrow fonksiyonlarımızın yazımı arasındaki farkları inceleyelim.
1-Kod Fazlalığından Kurtarması
-Arrow fonksiyonu kodu kısaltarak şık bir görünüm sağlıyor.Bunun yanı sıra kodu inceleyen birisi tarafından kodun okunmasını daha anlaşılır kılıyor.
2-Callback Fonksiyonlarda Arrow Kullanımı
-Kullanım yerleri değişse bile mantık hep aynı. function anahtar kelimesinin yerine arrow function sembolünü getirip fonksiyonumuzu oluşturuyoruz.
3-Arrow Function’ın Sağladığı Bazı Ayrıcalıklar
3.1)Normal fonksiyonlarda fonksiyon parametre almasa dahi ( ) işaretlerini kullanmak zorundayız,fakat arrow fonksiyonlarda bunun içinde yine bir kolaylık sağlanmış. Yalnızca bir bağımsız değişken aktarırsanız, bağımsız değişkenleri çevreleyen parantezi kaldırabilirsiniz. Bağımsız değişken gerekmiyorsa, alt çizgi (_) yerine parantez (()) koyabilirsiniz.
3.2) Arrow Function için ikinci faktörümüz, bir return isteyip istemediğinizdir. Arrow Fonskiyonları, varsayılan olarak, kod yalnızca bir satırda yer alıyorsa ve bir blok içine alınmamışsa, otomatik olarak bir return anahtar sözcüğü oluşturur.
4-)The Lexical This Özelliği
-This, nasıl adlandırıldığına bağlı olarak değeri değişen benzersiz bir anahtar kelimedir. Herhangi bir işlevin dışında çağrıldığında, bu varsayılan olarak tarayıcıdaki Window nesnesine döner.
-Çağrılan bir fonkisyonda kullanılan this fonksiyonu da yine Window nesnesine ayarlanacaktır.
- Ancak obje içerisinde çağırıldığında this objenin kendisine atanacaktır.
- Yukarıda ki örneklerde de gördüğümüz gibi this’in değerini belirleyen şey onu çağıran fonksiyon tarafından atanmaktadır. Her fonksiyon kendi this değerini kendisi ayarlar.
- 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.
– Ö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. arrowfonk fonksiyonu içerisinde ki this, obj nesnesine atanması gerekirken obj nesnesini görmezden gelerek onu çevreleyen Window nesnesine atanmıştır.
5- Nested Arrow functions(İç içe Arrow Fonksiyonları)
Normal Fonksiyonlarımızı oluştururken iç içe fonksiyonlar yazılabildiği gibi,Arrow Functionlarda da iç içe fonksiyonlar oluşturabiliyor.
Verilen parametrelere göre çıkartma işlemi yapan iç içe fonksiyonlarımız örnekte görüldüğü gibi tanımlanmıştır.
Şimdi aynı örneğimizi bir de Arrow fonksiyonuyla yapalım :
-Ne kadar kolay ve güzel oldu değil mi ? Arrow fonksiyon, kod yazarken bizlere gerçekten büyük kolaylık sağlıyor.
Çok severek kullanacağınızı düşündüğüm ve size büyük fayda ve kolaylık sağlayacağına inandığım ‘Arrow Fonksiyonu yazımı okuduğunuz için teşekkür ederim.
Sonraki yazılarımda görüşmek dileğiyle…
Sağlıcakla kalın…
________________________________________________________________________
KAYNAKLAR :
https://aarslantas.medium.com/arrow-function-nedir-f4ef50cda66c
https://zellwk.com/blog/es6/#enhanced-object-literals
