JavaScript Arrow Function Kullanımı

Merhabalar. Bu yazımda JavaScript'te kullanılan Arrow Function özelliğinden bahsedeceğim. Arrow Function, ES6 ile sunulan özelliklerden biridir. Arrow Function özelliğinin temel amacı JavaScript'te kullanılan fonksiyon tanımlama yöntemini kısaltmak ve prartik bir kullanım sağlamaktır. 

Örnekler üzerinden gidelim. Diyelim ki sitenizi ziyaret eden kullanıcıya "Hoşgeldin" mesajı veren bir fonksiyon tanımlamak istiyorsunuz. Normal kullanım aşağıdaki gibidir;

function hosgeldin()
{
    return "Sitemize Hoş Geldiniz";
}

console.log(hosgeldin());

Aynı fonksiyonu aşağıdaki gibi tanımlamak da mümkündür.

var hosgeldin = function()
{
    return "Sitemize Hoş Geldiniz";
}

console.log(hosgeldin());

İşte Arrow Function özelliği bundan sonra devreye giriyor. Bu örnekte yer alan function ifadesini silip parametreleri yazacağımı parantez aç kapadan hemen sonra => işaretlerini koyarak bu tanımlamayı Arrow Function haline getirebiliriz.

var hosgeldin = () =>
{
    return "Sitemize Hoş Geldiniz";
}

console.log(hosgeldin());

Hızımızı düşürmeden devam edelim. Yukarıdaki fonksiyonda sadece bir durum vardır ve hoş geldiniz ifadesi döndürmektedir. İşte bu tür durumlarda fonksiyon yazımını biraz daha kısaltmak mümkündür.

var hosgeldin = () => "Sitemize Hoş Geldiniz";

console.log(hosgeldin());

"Allah Allah nasıl oldu ya :)" dediğinizi duyar gibiyim. Normalde 3-4 satırda tanımlanan bir fonksiyonu tek satırda halletmiş olduk. 

Peki parametre kullanırsak nasıl olur. Buna da farklı bir örnek üzerinden bakalım. Normal kullanım aşağıdaki gibidir.

function merhaba(isim){
    return "Merhabalar Sayın," + isim
}

console.log(merhaba("Celil Sağır"));

Bu kodların ekran çıktısı "Merhabalar, Sayın Celil Sağır" olacaktır. Yani fonksiyona bir isim göndermiş ve fonksiyon içinde kullanmış olduk. Aynı fonksiyonu Arrow Function şeklinde yazalım.

var merhaba = (isim) => {
    return "Merhabalar Sayın," + isim;
}

console.log(merhaba("Celil Sağır"));

Önceki örnekte yaptığımız gibi, tek bir durum olduğu için biraz daha kısaltabiliriz.

var merhaba = (isim) => "Merhabalar Sayın," + isim; 

console.log(merhaba("Celil Sağır"));

Gelelim Arrow Function'ların yeni bir özelliğine, yukarıdaki örnekte gördüğünüz gibi fonksiyona sadece bir parametre gönderdik, o da "isim" parametresi. İşte bu örnekte olduğu gibi eğer fonksiyona sadece bir parametre geliyorsa, bu parametreyi yazarken parantez aç kapa () yapmak zorunda değiliz. Yani aşağıdaki gibi daha da kısaltabiliriz. 

var merhaba = isim => "Merhabalar Sayın," + isim; 

console.log(merhaba("Celil Sağır"));

Gördüğünüz gibi Arrow Function'lar bize fonksiyon tanımlama işlemlerinde oldukça büyük kolaylık sağlamaktadır. Ancak bir projede Arrow Function kullanacaksanız tarayıcı desteğini mutlaka göz önünde bulundurunuz. Her ne kadar modern tarayıcılar desteklese de dinozorlar çağında kalma Internet Explorer'da sorun yaşabilirsiniz. Çünkü JavaScript bir front-end teknolojisidir yani tarayıcı tabanlı çalışır. 

Arrow Function tarayıcı desteği şu şekildedir: 
Chrome 45 ve üzeri versiyon (2015'ten beri)
Internet Exploer / Edge 12 ve üzeri versiyon (2015'ten beri)
Firefox 22 ve üzeri versiyon (2013'ten beri)
Safari 10 ve üzeri versiyon (2016'tan beri)
Opera 32 ve üzeri versiyon (2015'ten beri)

Soru, görüş ve önerilerinizi yorum olarak belirtebilirsiniz. Bir sonraki yazımızda görüşmek üzere İnşallah. Hayırlı çalışmalar dilerim.