Arrow fonksiyonları

Mevcut ES5 kodunda, _this değişkenini (A satırında) oluşturduk, böylece UiComponent elementi B satırından erişilebilir.

function UiComponent() {
  var _this = this; // (A)
  var button = document.getElementById('myButton');
  button.addEventListener('click', function () {
    console.log('CLICK');
    _this.handleClick(); // (B)
  });
}
UiComponent.prototype.handleClick = function () {
  ···
};

ES6’da, arrow (ok) fonksiyonlarını kullanabiliriz :

function UiComponent() {
  var button = document.getElementById('myButton');
  button.addEventListener('click', () => {
    console.log('CLICK');
    this.handleClick(); // (A)
  });
}

Arrow fonksiyonları, ifadelerin sonuçlarını return eden kısa kullanımlar için kullanışlıdır.

ES5’te, bu tür kodlar nispeten ayrıntılıdır:

var arr = [1, 2, 3];
var squares = arr.map(function (x) { return x * x });

ES6’da, arrow fonksiyonları ile çok daha kısa:

const arr = [1, 2, 3];
const squares = arr.map(x => x * x);

Parametreler yalnızca tek bir değişken ise, parantezleri kullanmayabilirsiniz. Yani: (x) => x * x ve x => x * x aynıdır.

İlerleyen konularda arrow fonksiyonları data detaylı olarak ele alınacaktır.

Sıradaki Konu: Birden çok değer return etmek