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