03.04. Arrow Fonksiyonu

Arrow fonksiyonları, fonksiyon ifadeleri yazmak için çok daha kısa bir sözdizimidir. “=>” şeklinde bir belirteç kullanır. Arrow fonksiyonu isimsizdir ve this ile fonksiyonlara bağlanma şeklini değiştirir. Bu bölüm, basit örneklerle karşılaştırmalı olarak Arrow fonksiyonlarına ayrılmıştır.Arrow fonksiyonu sayesinde function, return ve {…} ifadelerini kullanmaya gerek kalmaz. Basit örneklerle açıklayalım.

Çok parametreli bir arrow fonksiyonu

//çok parametreli 
// ES5
var carpES5 = function(x, y) {
    return x * y;
};
console.log(carpES5(5, 6))
  
// ES6
const carpES6 = (x, y) => { return x * y };
console.log(carpES6(5, 6))

//ES6, function tek satırsa paranteze gerek yok.
const carpES61 = (x, y) => x * y;
console.log(carpES61(5, 6))

//çok parametreli

// ES5

var carpES5 = function(x, y) {

return x * y;

};

console.log(carpES5(5, 6))

// ES6

const carpES6 = (x, y) => { return x * y };

console.log(carpES6(5, 6))

//ES6, function tek satırsa paranteze gerek yok.

const carpES61 = (x, y) => x * y;

console.log(carpES61(5, 6))

var yerine const kullanması önerilir. Özellikle fonksiyonlar değiştirilmeyecekse const ifadesi en mantıklı seçimdir. ES6 bölünde fonksiyon ifadesi kalkmış, => sonra sistem klasik bir kod gibi çalışmıştır. Kullanım çok daha kısaldığı görülmektedir. Aynı şekilde tek satırlık bir kod var ise “{…}” kullanmaya gerek yoktur.

Tek parametreli bir arrow fonksiyonu

Aslında sözdizimi açısından çok parametreli veya tek parametreli bir fark yoktur. Yukarıdaki örnekten farklı olarak bu bölümde değer olarak bir array döndüreceğiz.

//ES5
var phraseBolEs5 = function phraseBol(phrase) {
    return phrase.split(' ');
  };
console.log(phraseBolEs5("ES5 function açılmadan function olmaz"));
//ES6
const phraseBolEs6 = phrase => phrase.split(" ");
console.log(phraseBolEs6("ES6 tek satırda fonksiyon"));

//ES5

var phraseBolEs5 = function phraseBol(phrase) {

return phrase.split(' ');

};

console.log(phraseBolEs5("ES5 function açılmadan function olmaz"));

//ES6

const phraseBolEs6 = phrase => phrase.split(" ");

console.log(phraseBolEs6("ES6 tek satırda fonksiyon"));

Array(5) ["ES5", "function", "açılmadan", "function", "olmaz"]
Array(4) ["ES6", "tek", "satırda", "fonksiyon"]

1 2	Array(5) ["ES5", "function", "açılmadan", "function", "olmaz"] Array(4) ["ES6", "tek", "satırda", "fonksiyon"]

split fonksiyonu diğer bir çok programlama dilinde olduğu gibi bir metni istenilen karaktere göre ayırır ve dizi sonucu döndürür. Burada boşluk karakterini kullanıp metni buna göre kelimelere böldük. ES5’te return, function ve {…} var iken ES6’da bunları kullanmadan fonksiyon bir değişkene bağlanmış. Çok parametreli kullanımdan tek farkı: çok parametreli de parametreler parantez içinde örneğin (x, y) şeklinde gösterilirken tek parametreli de paranteze ihtiyaç yoktur.

Parametresiz bir arrow fonksiyonu

Bu bölümde hem parametresiz hem de değer döndürmeyen bir fonksiyon yapalım.

//ES5
var LogEs5 = function docLog() {
    console.log("Merhaba ES5");
};
LogEs5();

//ES6
var LogEs6 = () => { console.log("Merhaba ES6"); };
LogEs6();

//ES5

var LogEs5 = function docLog() {

console.log("Merhaba ES5");

};

LogEs5();

//ES6

var LogEs6 = () => { console.log("Merhaba ES6"); };

LogEs6();

Nesne döndürme

Fonksiyon sonuç olarak bir nesne döndürebilir. Nesneyi birden fazla olabilir ve döndürülen değerlerinin bir anahtar değeri vardır. Örneğin,

 //ES5
 var nesneEs5 = function setNesne(id, name) {
    return {
      id: id,
      name: name
    };
  };
  console.log(nesneEs5(2009, "ES5")); 
  
  // ES6
  var nesneEs6 = (id, name) => ({ id: id, name: name }); 
  console.log(nesneEs6(2015, "ES6"));

//ES5

var nesneEs5 = function setNesne(id, name) {

return {

id: id,

name: name

};

console.log(nesneEs5(2009, "ES5"));

// ES6

var nesneEs6 = (id, name) => ({ id: id, name: name });

console.log(nesneEs6(2015, "ES6"));

Object {id: 2009, name: "ES5"}
Object {id: 2015, name: "ES6"}

1 2	Object {id: 2009, name: "ES5"} Object {id: 2015, name: "ES6"}

Döndürülen değer bir nesnedir. Aslında bunu bir JSON olarak düşünebiliriz. Anahtar değer ve value’lar içeren bir Javascript nesnesidir.

this

this kullanımı ES6 öncesi problemdi. this o nesnesi işaret ediyordu, ancak aynı nesne içindeki bir fonksiyon içinden ulaşılamıyordu. Öncelikle problemi bir görelim:

//"this" problemi
  function kisi1() {
    this.yas = 0;
    setInterval(function buyu() {
      this.yas++; //ne yazık ki bu işlem kisi fonksiyonuna işlemez!
      console.log("kisi1: " + this.yas);
    }, 1000);
  }
  var p1 = new kisi1();

//"this" problemi

function kisi1() {

this.yas = 0;

setInterval(function buyu() {

this.yas++; //ne yazık ki bu işlem kisi fonksiyonuna işlemez!

console.log("kisi1: " + this.yas);

}, 1000);

}

var p1 = new kisi1();

Burada setInternal sayesinde fonksiyon saniye bir defa çalışır. Ancak, buyu() fonksiyonu içinden this.yas fonksiyonuna ulaşılamaz. Çözüm için:

//Çözüm ES5
  function kisi2() {
    var that = this;
    that.yas = 0;
  
    setInterval(function buyu() {
      that.yas++; //ne yazık ki bu işlem kisi fonksiyonuna işlemez!
      console.log("kisi2: " + that.yas);
    }, 1000);
  }
  var p2 = new kisi2();

//Çözüm ES5

function kisi2() {

var that = this;

that.yas = 0;

setInterval(function buyu() {

that.yas++; //ne yazık ki bu işlem kisi fonksiyonuna işlemez!

console.log("kisi2: " + that.yas);

}, 1000);

}

var p2 = new kisi2();

Çözümde this bir değişken içine atıldığında o değişken üzerinden yas değişkenine ulaşmak mümkündür. ES5’te bu çözüm yerine ES6’da tam çözüm gelmiştir.

  function kisi3(){
    this.yas = 0;
  
    setInterval(() => {
      this.yas++; // kisi2 nesnesine atıfta bulunur.
      console.log("kisi3: " + this.yas);
    }, 1000);
  }
  var p3 = new kisi3();

function kisi3(){

this.yas = 0;

setInterval(() => {

this.yas++; // kisi2 nesnesine atıfta bulunur.

console.log("kisi3: " + this.yas);

}, 1000);

}

var p3 = new kisi3();

ES6’da nesnenin this ifadesine erişmek mümkündür.