JavaScript'de Arrow Functions nedir?

JavaScript'te Arrow Functions

Arrow Functions, ES6 (ECMAScript 2015) ile birlikte JavaScript'e eklenen ve daha kısa ve okunması kolay olan yeni bir fonksiyon tanımlama syntax'ıdır. Arrow Functions, genellikle anonim fonksiyonların daha kısa ve net bir şekilde tanımlanmasını sağlar.

Temel Sözdizimi

Arrow Function tanımlamak için şu sözdizimi kullanılır:

(parametre1, parametre2, ...) => {
  // fonksiyonun içinde yapılacak işlemler
}

Eğer fonksiyon sadece bir ifade döndürüyorsa süslü parantezler { } ve return anahtar kelimesi kullanmaya gerek yoktur:

(parametre1, parametre2, ...) => ifade

Eğer fonksiyon tek bir parametre alıyorsa, parantezlere () gerek yoktur:

parametre => ifade

Arrow Function Kullanımı

Arrow Functions'lar, hemen hemen her yerde standart fonksiyonlar gibi kullanılabilir. Örneğin, bir dizi üzerinde .map() veya .filter() metodlarında kısa fonksiyonlar tanımlamak için yaygın olarak kullanılırlar. Örnekler:

// Standart fonksiyon
function toplam(a, b) {
  return a + b;
}

// Arrow Function
const toplam = (a, b) => a + b;

// Standart fonksiyon
const kareleriAl = function(arr) {
  return arr.map(function(x) {
    return x * x;
  });
};

// Arrow Function
const kareleriAl = arr => arr.map(x => x * x);

`this` Bağlamı

Arrow Functions, this bağlamını kendi tanımlandıkları ortama bağlarlar (lexical this). Bu, standart fonksiyonlarla karşılaştırıldığında farklılık gösterir. Arrow Functions içinde this kullanırken, fonksiyonun doğrudan tanımlandığı kapsamı (window gibi) gösterir.

const obj = {
  num: 10,
  say: function() {
    setTimeout(function() {
      console.log(this.num);
    }, 1000);
  }
};

obj.say(); // sonuç: undefined

// Yerine

const obj = {
  num: 10,
  say: function() {
    setTimeout(() => {
      console.log(this.num);
    }, 1000);
  }
};

obj.say(); // sonuç: 10

Arrow Functions ile Callback Fonksiyonları

Arrow Functions, callback fonksiyonları tanımlamak için de yaygın olarak kullanılır. Özellikle kısa ve tek satırlık callback fonksiyonları Arrow Functions ile tanımlamak genellikle tercih edilir.

const users = ['Alice', 'Bob', 'Charlie'];

// Standart callback fonksiyonu
users.forEach(function(user) {
  console.log(user);
});

// Arrow Function ile callback fonksiyonu
users.forEach(user => console.log(user));

Sonuç