JavaScript’te Arrow Function (Ok Fonksiyonları)

eminbasbayan

4 dk okuma

JavaScript’te Arrow Function (Ok Fonksiyonları)

🔍 Büyütmek için tıklayın

İçindekiler

Bu yazıda neler var?

JavaScript öğrenmeye başlayan birçok kişinin karşılaştığı modern yazım biçimlerinden biri arrow function (ok fonksiyonları) olarak bilinir. Fonksiyonlar, bir işlemi tekrar tekrar yapmamız gerektiğinde kodu tek yerde tanımlamamızı sağlar. Ancak klasik fonksiyon yazımı zaman zaman uzun ve karmaşık olabilir. Arrow function, bu noktada daha kısa, sade ve okunabilir bir alternatif sunar. Ayrıca bazı durumlarda return kelimesini bile yazmamıza gerek kalmaz; bu özelliğe implicit return (örtük dönüş) denir.

Bu makalede, arrow function’ların temelini, kullanım kurallarını ve implicit return özelliğini örneklerle birlikte ele alacağız.

1. Geleneksel Fonksiyon Yazımı

Klasik fonksiyon tanımı şu şekilde yapılır:

function selamVer(isim) {
  return `Merhaba, ${isim}`;
}

Bu fonksiyon bir isim parametresi alır ve ona göre bir selam döndürür. Ancak her defasında function kelimesini yazmak kodu uzatabilir.

2. Arrow Function ile Aynı Fonksiyon

Yukarıdaki fonksiyonu arrow function ile şöyle yazabiliriz:

const selamVer = (isim) => {
  return `Merhaba, ${isim}`;
}

Burada function yerine => (ok işareti) kullanılır. Daha kısa ve okunabilir bir yapı sunar.

3. Tek Parametrede Parantezleri Kaldırmak

Eğer fonksiyon sadece bir parametre alıyorsa parantezler opsiyoneldir:

const kareAl = sayi => {
  return sayi * sayi;
}

Ama parametre yoksa veya birden fazla parametre varsa parantezler zorunludur.

4. Parametresiz Fonksiyonlarda Parantez Zorunluluğu

Fonksiyon parametre almıyorsa () mutlaka yazılır:

const rastgeleSayi = () => {
  return Math.floor(Math.random() * 100);
}

Aksi halde JavaScript hata verir.

5. Implicit Return Nedir?

Arrow function’ların en önemli özelliklerinden biri implicit return yani örtük dönüş’tür.

Eğer fonksiyonunuz sadece tek satırlık bir işlem yapıyorsa return yazmadan da değer döndürebilirsiniz.

Örnek:

const ciftMi = sayi => sayi % 2 === 0;

Burada süslü parantez ({}) kullanılmadığı için JavaScript otomatik olarak işlem sonucunu döndürür.

Aynı şekilde şu fonksiyon da implicit return ile yazılabilir:

// Normal
const kare = (sayi) => {
  return sayi * sayi;
}

// Implicit return
const kare = sayi => sayi * sayi;

6. Implicit Return Kullanılamayan Durumlar

Eğer fonksiyon gövdesinde birden fazla işlem varsa, return yazmak zorunludur.

Geçersiz Örnek:

// Hata verir
const tersCevir = kelime => (
  let harfler = kelime.split(""); // hata!
  harfler.reverse().join("");
);

Doğru Yazım:

const tersCevir = kelime => {
  let harfler = kelime.split("");
  return harfler.reverse().join("");
};

Yani tek satırlık – tek işlem dışındaki durumlarda süslü parantez {} ve return kullanmalıyız.

7. Birden Fazla Parametrede Kullanım

Fonksiyon birden fazla parametre alıyorsa parantez mecburidir:

const carp = (a, b) => a * b;

8. Gerçek Hayattan Kısa Örnekler

Pozitif mi?

const pozitifMi = n => n > 0;
İki sayının farkı

const fark = (a, b) => a - b;
Dizi metotlarında kullanım

const notlar = [40, 55, 70, 85, 90]; const gectiMi = notlar.map(n => n >= 50);

Bu örnekte map fonksiyonuyla her notun 50’den büyük olup olmadığı kontrol edilir.

9. Arrow Function Ne Zaman Tercih Edilmeli?

Callback fonksiyonlarda (map, filter, forEach gibi).
Tek satırlık kısa işlemlerde.
Kodun okunabilirliğini artırmak istediğinizde.
Modern projelerde standart hale geldiği için.

Ancak her durumda arrow function kullanmak zorunda değiliz.

Özellikle this bağlamı gereken yerlerde klasik fonksiyon daha uygun olabilir.

10. Özet Tablo

Durum	Yazım Şekli
Tek işlem – tek satır	`const f = x => x + 1;`
Tek işlem – süslü parantez varsa	`return` zorunlu
Birden fazla işlem	`const f = x => { let y = x*2; return y }`
Tek parametre	Parantez opsiyoneldir (`x => ...`)
Parametre sayısı 0 veya 2+	Parantez zorunlu (`() => ...`, `(a, b) => ...`)