ECMAScript 6 Arrow Fonksiyon Notasyonu Kullanımı

ES6 ile gelen özellikler arasında en beğendiğim özelliklerin başında gelen arrow notasyonu, kodlama sırasında büyük bir pratik sağlıyor.

Arrow notasyonu (=>) alışageldiğimiz biraz da “gereksiz” syntaxa sahip satır içi Javascript fonksiyonlarını daha kolay ve okunur hale getirmeyi sağlıyor.

Şöyle basit bir örnek verelim;

~~~~
function ikiyekatla(sayi){
return sayi * 2;
}
console.log(ikiyekatla(5));
~~~~

Bu örnek gayet basit bir Javascript fonksiyonu. Buna ek olarak Javascript’te hali hazırda fonksiyonları metod gibi (bir nevi değişken) düşünerek de tanımlama yapabiliyorsunuz.

Onu da örneği düzenleyerek gösterelim;

~~~~
var ikiyetkatla = function(sayi){
return sayi * 2;
}
console.log(ikiyekatla(5));
~~~~
Bu örnek ve önceki örnek arasında fonksiyonların registry yapısı arasında hiç bir fark bulunmuyor.

Peki aynı örneği satır içinde arrow notasyonu ile nasıl kullanacağız?
~~~~
var ikiyekatla = sayi => { return sayi * 2; }
console.log(ikiyekatla(5));
~~~~

ES6 ile artık “function” kelimesini kullanmamıza gerek olmadığını görüyorsunuz. Aslında `=>` notasyonunun fonksiyon tanımlandığını belirttiğini de söyleyebiliriz.

> Bahsettiğim gibi ES6’daki çoğu özellik geliştiricinin alışkanlarını değiştirmeden daha hızlı ve anlaşılır bir şekilde Javascript yazmasını sağlamak için oluşturulmuş.

Arrow notasyonu ile birden fazla fonksiyon değişkeni de kullanabilirsiniz.

~~~~
var carp = (sayi1, sayi2) => { return sayi1 * sayi2; }
console.log(carp(5,3));
~~~~

Arrow notasyonunun hoş durduğu ve okunabilirliği arttırdığı bir diğer yer ise callback fonksiyonları.

Callback’in fazla kullanıldığı jQuery’den bir örnek verirsek;
~~~~
$(“#buton”).click(function() {
alert(“Buton Tıklandı”);
});
~~~~

Kodu Arrow notasyonu ile şu hali alacak;

~~~~
$(“#buton”).click( () => { alert(“Buton Tıklandı”); });
~~~~

Tüm bunlara ek olarak eğer satır içi fonksiyon veya arrow notasyonu ile oluşturulan fonksiyonun scope’u için bir string verilirse, bu string direkt olarak return üzerine dönecektir.

Bir örnek verirsek;
~~~~
var f = () => `Merhaba Dünya!`;
console.log(f());
~~~~

ES6 kullanılarak yazılan kodlarda `function` ve `return` keywordlerine artık fazla rastlamayacak gibiyiz.

Yorumları Göster veya Yeni Yorum Yaz