Arrow functions hala Function bir ornegidir ve typeof operetoru hala function ifadesini dondurur. Bunun yaninda arrow functions'i new ile kullanamayiz bu nedenle constructor olarak kullanmamizda mumkun degildir.

Ancak arrow functions siradan fonksiyonlardan bir kac noktada ayrilir. Bu noktalardan en onemlisi this ifadesinin kulanimidir. Bu ayrimin nedenleri ve kullanimina gecmeden once syntax'i ve kullanimini inceleyelim.

Syntax

Basitce arrow functions'in soz diziminden bahsetmis olsakta kullanim alanina gore farkliliklar gostermektedir. Birkac kullanim ornegini vermek en aciklayici yontem olacaktir.

Yazim boyunca eski kullanim sekillerini verdikten sonra yeni kullanim sekillerini sunmaya calisacagim.

// ES6 Oncesi
var a = function(value) {
	return value;
};
//ES6
var a = value => value;

Eger fonksiyonunuz sadece bir paremetresine sahipse baska bir soz dizimine ihtiyac duymadan kullanilabilir sonrasinda ok sozdizimini (=>) ekler ve return ifadesinde yer alacak degeri yazariz.

Eger birden fazla parametreye sahipse bu degerleri parantez icerisine alabiliriz.

// ES6 Oncesi
var toplam = function(a,b){
	return a+b;
};
//ES6
var toplam = (a,b) => a+b;

Eger fonksiyonunuz her hangi bir parametre almiyorsa sadece parantez ifadesini kullaniriz. Yukaridaki toplam fonksiyonunu tekrar kullanirsak.

// ES6 Oncesi
var toplam = function(){
	return 1+2;
};
// ES6 
var toplam = () => 1+2;

Eger fonksiyon iceriginiz daha komplike bir yapiya sahipse fonksiyon icerigini suslu parentezler icerisine alabiliriz.

// ES6 Oncesi
var toplam = function(a,b){
	return a+b;
};
// ES6 
var toplam = (a,b) => { return a+b; }

Eger bir obje dondurmek istersek durum biraz karisabilir gibi gorunsede ifademizi normal parantezler icerisine almamiz yeterli gelecektir.

// ES6 Oncesi
var bilgi = function(el){
	return {
		el: el,
		attr: "list"
	};
};
// ES6 
var bilgi = el => ({ el:el,attr:"list"});

ARROW FUNCTIONS ve THIS

Javascript'te uzun suredir kafa agritan konulardan biridir this kullanimi, ozellikle yeni baslayanlar icin. Bende burada kafanizi pek agritmayacagim cunku javacriptte this'e girdigimizde cikmamiz biraz zaman alabilir.

Ufak bir ornek vermek gerekirse.

var yeniObje = {
	hideDiv: function(){
  	console.log(this);
    setTimeout(function(){
    	console.log(this);
    },350);
  }
};

var a = yeniObje;
a.hideDiv();
};

Bu kodu tarayicinizda denediginizde ustteki console.log ifadesi uzerinde calistigimiz objeyi dondururken alttaki ise Window objesini bize donderecektir. setTimeout icerisinde uzerinde calistigimiz objeyi kullanmak istiyorsak bunun bir kac yolu vardir.

Tasiyici Kullanmak

Uzerinde calistigimiz objeyi bir degiskene atayip setTimeout fonksiyonu icerisinde kullanabilir. Bu genelde en cok kullandigim yontemdir. AmaranJS kaynak kodlarinda bolca gorebilirsiniz.

var yeniObje = {
	hideDiv: function(){
  	console.log(this);
    var that = this;
    setTimeout(function(){
    	console.log(that);
    },350);
  }
};

var a = yeniObje;
a.hideDiv();

Bind kullanmak

ECMASript 5.1 ile gelen bir ozellik olan bind sayesinde de amacimiza ulasabiliriz. Aslinda bind fonksiyonunuz icerisinde bulunan this'e disinda bulunan this'i atamamizi saglar ve ekstradan bir fonksiyon daha eklemis oluruz.

var yeniObje = {
	hideDiv: function(){
  	console.log(this);
    setTimeout(function(){
    	console.log(this);
    }.bind(this),350);
  }
};

var a = yeniObje;
a.hideDiv();

Evet bu iki yontemlede amacimiza ulastik ama arrow functions burada bize nasil yardimci oluyor?

Arrow fonksiyonlariyla kullanim Arrow fonksiyonlarinda this ifadesi olusturuldugu fonksiyonun baglaminda yer alir yani arrow fonksiyonu disindaki this ifadesini icerisinde de kullanabilirsiniz. Bu ozelligi kullanarak yukardaki objemizi duzenlersek;

var yeniObje = {
	hideDiv: function(){
  	console.log(this);
    setTimeout(()=>{ console.log(this); },350);
  }
};

var a = yeniObje;
a.hideDiv();

Javascript gelistiricileri olarak isimizi oldukca kolaylastiracak bir ozellik ve sanirim ES6'in en sevilen ozelliklerinden birisi olmayi boylelikle basardi.