Arrow Functions

React öğrenmek için bilmeniz gerekenlerden birisi de arrow functions. Gelin bu ifadeye yakından bakalım.

Nedir?

Arrow Functions JavaScript içerisindeki geleneksel fonksiyon tanımının alternatifidir. Normal tanımlamaya göre farklıdır, artıları ve eksileri vardır.

function greetings() {
  return "Hello world";
}
const greetings2 = () => "Hello world";

Bu örneğimizde iki greetings adında bir fonksiyon oluşturduk. Bu fonksiyon bize "Hello world" değerini döndürüyor. Aynı fonksiyonu arrow function olarak yazmak istediğimde bir return ifadesi kullanmadık. Bu ifadelerin en önde gelen özelliğinden biridir. Genelde tek satırlık bir return işlemi yapılacağı zaman daha çok kullanılırlar.

 materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
]

console.log(materials.map(material => material.length));
// [8, 6, 7, 9]

Bu örneğimiz de en çok kullanılan yerlerden birisi.

let fnc = (a,b) => a + b;
let fnc2 = a => a + 100

Yukarıdaki örnekte gördüğümüz gibi eğer fonsiyon içerisinde kullanacağımız değer bir tane ise parantez içine almamıza gerek yok.

let fnc = data => ({ value:data })

Bir obje döndürmek istediğimiz zaman ise bunu parantez içine alarak tek satırda return yapabiliriz.

Arrow functions örneklerde gösterdiğim gibi basit metotlar için kullanılmalıdır. Class yapısı için uygun değildir. class'larda kullanığımız this, super, bind, apply, call yapısını desteklemez. Ayrıca new, prototype gibi yapıları da desteklemez. Tek satırda return yapmak istediğimizde satır atlamayı desteklemez.

Sonuç olarak arrow functions basit methodlar için kullanıldığı zaman yararlıdır.