Nedir bu Arrow Function (ES6)

EcmaScript 6’nın işimizi kolaylaştıran güzelliklerinden bir diğeri ise Arrow Function. Arrow function javascript’de fonksiyon tanımlamanın diğer bir yolu olmasına rağmen standart fonksiyon yazımına göre çok daha az satırda işimizi halletmemize olanak tanıyor.

Bir kaç örnekle nasıl kullanabileceğimize bakalım

// kişiler adında bir array'imiz var
const kisiler = [{name: 'ali', age: 30}, {name: 'veli', age: 5}, {name: 'ayşe', age: 9}]

// Bu kişilerin sadece isimlerini ekrana yazdırmak istedeydik standart fonksiyon tanımıyla
const isimler = kisiler.map(function (kisi) {
  return kisi.name
})

console.log(isimler) // konsola ["ali", "veli", "ayşe"] yazar

// Şimdi bu işi arrow function ile yapalım ve kişilerin yaşlarını konsola yazdıralım
const yaslar = kisiler.map((kisi) =&gt; {
  return kisi.age
})

console.log(yaslar) // konsola [30, 5, 9] yazar

// Eğer fonksiyonunuz sadece tek satırdan oluşuyor ve bu satırı return ediyorsa süslü parantez kullanmanıza gerek yoktur
// Eğer fonksiyonunuz sadece tek bir parametre alıyorsa parantez kullanmanıza da gerek yoktur.
// Yaşı 18'den küçük olan kişileri filtreleyelim
const cocuklar =  kisiler.filter(kisi =&gt; kisi.age &lt; 18)

// Çocukların isimlerini yaşları ile birlikte ekrana yazdıralım.
const cocuklarIsımYas = cocuklar.map(cocuk =&gt; `${cocuk.name} ${cocuk.age} yaşındadır.`)
console.log(cocuklarIsımYas)

EcmaScript 6 öncesi bir fonksiyon içerisinde başka bir fonksiyon kullandığımız zaman eğer this keyword’üne ihtiyacımız varsa this keyword’ünü önce self ya da that gibi bir isim verdiğimiz bir değişkene atıyorduk ki bir alt fonksiyonda da bu kapsamdaki this’e erişebilelim. Örnekle açıklamak gerekirse

// sayfada bir butonumuz var ve tıkladığımızda önce active class'ı ekliyoruz ve belirli bir süre sonra active class'ını kaldırıyoruz. Aşağıdaki örnekte setTimeout fonksiyonu içerisindeki this window'a tekabül ettiğinden butona eklenen class kaldırılamaz

<button class="my-button">My Button<button>;

var button = document.querySelector('.my-button')
button.addEventListener('click', function () {
  console.log(this) // this bu aşamada buton'un kendisidir.
  this.classList.add('active')

  setTimeout(function () {
    console.log(this) // this bu aşamada Window objesine tekabül eder
    this.classList.remove('active') // çalışmaz
  }, 500)
})

// Bu yüzden this'i önce başka bir değişkene atamamız gerekiyor

<button class="my-button">My Button<button>;

var button = document.querySelector('.my-button')
button.addEventListener('click', function () {
  var that = this
  this.classList.add('active')

  setTimeout(function () {
    console.log(that) // artık that ile setTimeout fonksiyonunun içerisinde de butona erişebiliyoruz
    that.classList.remove('active') // çalışır
  }, 500)
})

// arrow function kullandığımızda bu tip bir arkadan dolanmaya gerek kalmıyor.
<button class="my-button">My Button<button>;

var button = document.querySelector('.my-button')
button.addEventListener('click', function () {
  this.classList.add('active')

  setTimeout(() =&gt; {
    console.log(this) // artık this ile setTimeout fonksiyonunun içerisinde de butona erişebiliyoruz
    this.classList.remove('active') // çalışır
  }, 500)
})