JavaScript’te “Arrow Function” Kullanımı
JavaScript’te arrow function, ES6 (ECMAScript 2015) ile birlikte kullanıma giren fonksiyon tanımlama yöntemidir.
JavaScript’te “Arrow Function”
Şekli gereği “fat arrow” olarak da adlandırılan arrow function, () => şeklinde gösterilmektedir. En belirgin özelliği ise daha kısa bir söz dizimine sahip olmasıdır. Zira daha karmaşık fonksiyon kullanımında “arrow” fonksiyonları kodun daha temiz ve okunaklı olmasını sağlar.
Arrow fonksiyonun sahip olduğu avantajlardan biri de fonksiyon oluşturmamız gerektiğinde kullanılan “function” anahtar kelimesini yazmamızın gerekmemesidir.
Eğer “arrow” fonksiyonunun gövdesi tek satırlık bir bloktan oluşuyorsa küme parantezlerini { } yazmaya gerek yoktur. Aşağıdaki örneği inceleyiniz:
|
1 2 3 4 5 6 7 |
// Klasik fonksiyon tanımı function multiply(a, b) { return a * b; } // Arrow function kullanımı const multiply = (a, b) => a * b; |
Yukarıdaki örnekte fark edileceği üzere aynı fonksiyon “arrow” fonksiyonu şeklinde yazıldığında “return” ifadesi kullanılmamıştır. Zira fonksiyonun içinde tek bir ifade yazmak yeterliyse, otomatik olarak döndürüleceği için tekrardan bir “return” yazmaya gerek yoktur. Bu durum “implicit return” olarak adlandırılmaktadır.
|
1 2 3 4 5 6 7 8 |
// Single-Line Block const sumNumbers = (number) => number + number; // implicit return // Multi-Line Block const sumNumbers = (number) => { const sum = number + number; return sum; // return statement } |
Her ne kadar bazı programcılar “arrow fonksiyonları” bir tür syntactic sugar olarak görse de bu fonksiyonlar normal bir fonksiyondan biraz farklı çalışmaktadır:
- Arrow fonksiyonları “this”, “arguments”, “super” veya “new.target” anahtar kelimelerine binding yapmaz. Haliyle “arrow” fonksiyonlarını nesne metodu olarak tanımlamak “undefined” döndürecektir. Bakınız:
|
1 2 3 4 5 6 7 8 9 |
const person = { name: 'John', age: 30, sayHello: () => { console.log(`Hello, my name is ${this.name}.`); } }; person.sayHello(); // Hello, my name is undefined. |
Yukarıdaki örnekte, arrow fonksiyonunun içindeki this anahtar kelimesi, fonksiyonun tanımlandığı yere bağlıdır ve bundan dolayı undefined değeri alır. Haliyle, Hello, my name is undefined. mesajı görüntülenir.
Bu durum “this” nedeniyle olmaktadır. Normal fonksiyonlardan farklı olarak, arrow fonksiyonlarındaki “this”, fonksiyonun tanımlandığı yerdeki “this” değerini alır (lexical scope). Bu durum, özellikle “callback” fonksiyonları ve “event handlerları” (olay işleyicileri) ile çalışırken genellikle istenen bir davranıştır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//this var myObject = { myMethod: function() { console.log(this); // myObject setTimeout(function() { console.log(this); // window ya da global }, 1000); setTimeout(() => { console.log(this); // myObject }, 2000); } }; myObject.myMethod(); |
Onun dışındaki durumlarda, arrow fonksiyonlarını kullanmak doğru bir yöntem değildir. Bu durumda sayHello fonksiyonumuzu, normal fonksiyon oluşturma kuralları ile tanımlamamız gerekir:
|
1 2 3 4 5 6 7 8 9 10 11 |
// Normal fonksiyon ile const person = { name: 'John', age: 30, sayHello: function() { console.log(`Hello, my name is ${this.name}.`); } }; person.sayHello(); // Hello, my name is John. |
- Arrow fonksiyonları, constructor function (yapıcı fonksiyonları) olarak kullanılamazlar.
Arrow Fonksiyonları ile Parametre Kullanımı
“Arrow” fonksiyonları sahip oldukları parametre sayısına bağlı olarak farklı yazılış alternatiflerine sahiptir. Eğer “arrow” fonksiyonları tek bir parametre almışsa bu parametreyi parantez içine almasına gerek yoktur. Ancak, bir fonksiyon parametre almıyorsa veya birden fazla parametre alıyorsa parantezler gereklidir. Ayrıca her bir parametre arasına da virgül koyulur. Aşağıdaki örneği inceleyiniz:
|
1 2 3 4 5 6 7 8 |
//Zero Parameters - Parametre yoksa const functionName = () => {}; //One Parameter - Tek Parametre Varsa const functionName = parameterOne => {}; //Two or More Parameters - İki veya Daha Fazla Parametreye Sahipse const functionName = (parameterOne, parameterTwo) => {}; |