Javascript ES6 Arrow Fonksiyon

Javascript ES6 ile birlikte gelen bir güzel yenilikte Arrow Fonksiyonlar. Bu özellik yakın zamanda PHP içinde gelmişti.

Temel olarak fonksiyonların yazımını daha kolay ve daha az hale getiren bir özellik. O yüzden iki farklı şekilde fonksiyonları yazarak örneklerle anlamaya çalışacağız.

En temelinden bir fonksiyonu iki farklı şekilde yazmayı görelim.

Normal Fonksiyon

const hello = function(){
    return "hello world"
}
console.log(hello())

Arrow Fonksiyon

const hello = () => {
    return "hello world"
}
console.log(hello())

Gördüğünüz gibi, function(){} yerine () => {} şeklinde kullandık. Eğer geriye tek satırda bir şey return ediyorsak o zaman süslü parantezlere de gerek kalmadan kullanabiliriz.

Normal Fonksiyon

const hello = function(){
    return "hello world"
}
console.log(hello())

Arrow Fonksiyon

const hello = () => "hello world"
console.log(hello())

Eğer parametre alacağım bir fonksiyon yazacaksam ise o da ikiye ayrılıyor. Tek parametre alanlar ve birden fazla parametre alanlar olarak. Örneğin tek parametre alıyorsa şöyle kullanabiliriz.

Normal Fonksiyon

const say = function(hi){
    return hi
}
console.log(hello("hello world"))

Arrow Fonksiyon

const say = hi => hi
console.log(hello("hello world"))

Eğer birden fazla alıyorsa o zaman parantezler ile birlikte kullanacağız. Örneğin;

Normal Fonksiyon

const plus = function(number1, number2){
    return number1 + number2
}
console.log(hello())

Arrow Fonksiyon

const plus = (number1, number2) => number1 + number2
console.log(hello())

Kısaca bunu fonksiyon gördüğünüz her yerde kullanabilirsiniz. Örneğin spread operatörünü kullanarak bir kare alma fonksiyonu yazalım.

Normal Fonksiyon

const square = function(...numbers){
    return numbers.map(function(number){
        return number * 2
    })
}
console.log(square(2, 4, 6)) // Çıktı -> [4, 8, 12]

Arrow Fonksiyon

const square = (...numbers) => numbers.map(number => number * 2)
console.log(square(2, 4, 6))  // Çıktı -> [4, 8, 12]