v2.5.2
Giriş yap

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]
tayfunerbilen
1255 gün önce yazdı - 1113 kez görüntülendi.
Önceki Javascript ES6 Spread Operatörü Sonraki jQuery kodlarını Javascript'e çevirin