Arrow Function: Nerede kullanıyoruz? Neden Kullanıyoruz?

Özer Yılmaztekin
3 min readApr 2, 2018

--

Arrow fonksiyon, kısaltılmış bir fonksiyon ifadesidir. Tam anlamıyla bildiğimiz, deklare edilmiş bir fonksiyon gibi çalışmaz. Sadece kendi fiziksel ortamını etkileyen, girdisi ve çıktısı olan matematiksel bir ifadeye benzer. Özellikle first-class ve high order işlemleri ( insertation, sort, map, concatenation, mutation, permutation vs.. çoğu built-in fonksiyon olarak tanımlıdır ) daha da kolaylaştırarak anlaşılabilir şekilde yazmamızı sağlıyor.

Arr değişkenine tanımlanmış Array içerisindeki sayıları kendisiyle çarparak sonuçları yeni bir array olarak döndüren high-order Arrow fonksiyon
menü field ı true olanları ve kategorisi boş olanları ana menü olarak belirleyip yeni bir json arrayi döndüren high-order arrow function

Fonksiyonun JavaScript’de bir obje olduğunu ve referans olarak geçtiğini düşünürsek arrow fonksiyonun scope zincirini değiştirerek yan etkiyi minumuma indirdiğini de söylemek gerekiyor. Buna özel olarak değinmeyi düşünüyorum.

Arrow fonksiyon ile ilgili olarak internette yazılmış onlarca makale ve dökümantasyon mevcut. Ben, bu yazımda, Arrow Fonksiyonun JavaScript scope ortamını nasıl etkilediğini ve scope zincirinden nasıl etkilendiğine değinmeye çalışacağım.

Lexical Scope

Fiziki olarak yazdığınız kodun nerede bulunduğu, değişkenlerin nerede tanımlandığı ile alakalı konsepttir. Yani neyi nereye yazdığımızın önemli olduğu programlama dillerinde geçerlidir. Örneğin bir değişkeni fonksiyon içerisinde tanımladığınızda o değişken fonksiyonun oluşturduğu contexte dahil olur.

Sonuç = NaN (Not a Number). Aynı zamanda “this” de Window objesini gösteriyor. Ne oldu peki? Scope fazlalığından patron çıldırdı. 😃 Mevzuyu daha iyi ifade edebilmek adına debugging yaparak ekran videosu kaydettim. Özellikle sağda watch kısmına eklenen this contextinin nereyi referans gösterdiğine ve işlem sırasına özellikle dikkat edin.

Prototip zincirinde bir değişken bulunamazsa, bir üst zincirde aranır. (prototype chain)

Biraz Debugging

Yani ne oldu? this.OneUp kendi içerisinde this.count değerini aradı. Bulamayınca da aldı bastı Window Objesini. Doğal olarak undefined veri tipini de arttırma(++) işlemini uygulayamadığı için yapıştırdı NaN’ı. Evlere şenlik…

Bir metod (objeye ait fonksiyon) deklare edildiği değil, çağrıldığı scope un contextiyle yaratılır.

Bütün fonksiyonlar kendi evveliyatı ve contexiyle beraber gelir. Fonksiyon sayımız çoğaldıkça elimizdeki context sayısı da çoğalmaya başlayacak, birçoğu prortip zincirinde öngörmediğimiz şekilde dizilmeye başlayacaktır. “thisExecution Context’e girip oluştuğu zaman, outer environmentını(kendi dış ortamını) referans alarak gelir. Farklı bir ifadeyle Execution Context’den geçen herşey outer environmentı oluşmuş ve kendi dış ortamında referanslanmış olarak gelir. Doğal olarak “this” çoğu zaman bu scope zincirinden ve referanslanmasından etkilenir ve context, scope zinciri bozulur. Eğer değişken mevcut execution context içerisinde bulunmazsa outer environmentda aranır.

Prototipsel Kalıtımın(Prototypal Inharitance) ne olduğu bilinmeden JavaScript tam bir ucube olarak anlaşılmaya devam edecektir.

Her ne kadar bu davranış biçimi garip görünse de prototip zincirinin(Prototype Chain) nasıl işlediğini düşününce mantıklı görünmeye başlayacaktır. Her mefhum kendi gelişimi ve çevresiyle beraber değerlendirilmek zorundadır. Bu biyoloji ile jeoloji arasındaki ilişkisiye benzer… Canlıların adaptasyonu, dünyanın evrimi bilinmeden koca bir gizemden ibarettir. Aynı şekilde Prototipsel Kalıtımın ne olduğu bilinmeden JavaScript tam bir ucube olarak anlaşılmaya devam edecektir.

Nasıl Çözeriz?

Fonksiyon execution context e her girdiğinde this keywordünü tekrar oluşturmaya zorlayarak self e eşitledik. lexical olarak yazdığımız yerde this oluşturuldu ve self e eşitlendi. Bu sayede tam belirttiğimiz fiziki alanda this oluşturuldu ve scope zinciri bizim isteğimiz şekilde düzenlenlendi.

Hani Nerede Arrow function?…

Konuyu fazla dallandırıp budaklandırdık bence. Arrow function; fonksiyonun sadece tanımlandığı yerdeki scope kapmasını, contextini almasını istediğimizde kullanırız ve yine problemi lexical olarak çözeriz. Çünkü arrow fonksiyonda this tamamen lexical olarak çalışır.

Nerelerde kullanmamalıyız?

Her ne kadar çok istesem de bu konuyu, nedenleriyle beraber detaylıca izah etmeye kalkarsak bu yazıyı biraz zor bitiririz gibi görünüyor. Bu yüzden tek bir gist koduyla bu konuyu da özetlemek istiyorum.

Sonuç

Context problemlerini lexical olarak çözmek veya hızlı bir expression işlemi yapmak istemiyorsak(map veya matematiksel bir işlem gibi…) normal fonksiyon ile işimizi görebiliriz. Eğer ne yaptığımızdan hiç şüphemiz yoksa ve sadece bulunduğumuz fiziki satırda işlem yapıp sonrasında bu fonksiyonu contextiyle kullanmayacaksak arrow fonksiyon yazabiliriz. Yok mevzu biraz şüpheliyle normal fonksiyondan şaşmamak en iyisi.

Kaynaklar

--

--