ES6 Arrow Functions ile JavaScript’e Başlangıç

ES6 Arrow Functions ile JavaScript’e Başlangıç

JavaScript’in ECMAScript 6 (ES6) ile gelen yenilikleri, geliştiricilere daha temiz, daha okunabilir ve daha güçlü kod yazma imkanı sunmuştur. Bu yeniliklerden biri de arrow functions (ok fonksiyonları)dır. Arrow functions, geleneksel JavaScript fonksiyonlarına göre daha kısa bir söz dizimine sahiptir ve özellikle this bağlamı konusunda önemli farklılıklar sunar. Bu rehberde, ES6 arrow functions’ın temellerini, söz dizimini, kullanım alanlarını ve geleneksel fonksiyonlarla arasındaki farkları detaylı bir şekilde inceleyeceğiz.

Arrow Functions’ın Temel Söz Dizimi

Arrow functions’ın en dikkat çekici özelliği, geleneksel function anahtar kelimesini kullanmadan fonksiyon tanımlama imkanı sunmasıdır. Söz dizimi oldukça basittir:

    // Geleneksel Fonksiyon
    const toplamaGeleneksel = function(a, b) {
      return a + b;
    };

    // Arrow Function
    const toplamaArrow = (a, b) => {
      return a + b;
    };
    

Yukarıdaki örnekte, toplamaArrow fonksiyonu toplamaGeleneksel fonksiyonu ile aynı işlevi yerine getirir ancak çok daha az kod kullanır. => sembolü, fonksiyonun parametrelerini gövdesinden ayırır.

Tek Parametre Durumu

Eğer arrow function’ınız sadece tek bir parametre alıyorsa, parantezleri kullanmanıza gerek yoktur:

    // Geleneksel Fonksiyon
    const kareAlGeleneksel = function(x) {
      return x * x;
    };

    // Arrow Function
    const kareAlArrow = x => {
      return x * x;
    };
    

Tek Satırlık Geri Dönüş Değeri

Eğer arrow function’ın gövdesi tek bir ifade içeriyorsa ve bu ifade geri döndürülen değer ise, süslü parantezleri {} ve return anahtar kelimesini kullanmanıza gerek yoktur. İfade doğrudan geri döndürülür:

    // Geleneksel Fonksiyon
    const cikarGeleneksel = function(a, b) {
      return a - b;
    };

    // Arrow Function (Tek satırda dönüş)
    const cikarArrow = (a, b) => a - b;
    

Bu söz dizimi, özellikle diziler üzerinde işlem yaparken veya basit matematiksel işlemler yaparken kodu çok daha okunabilir hale getirir.

Parametresiz Fonksiyonlar

Eğer fonksiyon hiçbir parametre almıyorsa, boş parantezler () kullanılmalıdır:

    const mesajGoster = () => {
      console.log("Merhaba, arrow functions!");
    };
    

Arrow Functions ve this Bağlamı

Arrow functions’ın geleneksel fonksiyonlardan en önemli farklarından biri, this anahtar kelimesinin nasıl davrandığıdır. Geleneksel fonksiyonlarda this değeri, fonksiyonun nasıl çağrıldığına bağlı olarak dinamik olarak değişir. Bu durum, özellikle nesne metotları veya event handler’ları içinde this ile çalışırken kafa karıştırıcı olabilir ve sıklıkla bind() metodu veya geçici değişkenler (that = this) kullanmayı gerektirir.

Arrow functions ise “lexical this” özelliğine sahiptir. Bu, arrow function’ın kendi this değerini bağlamadığı anlamına gelir. Bunun yerine, arrow function’ın tanımlandığı kapsamdaki this değerini miras alır. Bu, this ile çalışmayı çok daha öngörülebilir ve basit hale getirir.

Örnek: Nesne Metotları

Aşağıdaki örnekte, bir nesnenin metodu içinde geleneksel bir fonksiyon ve bir arrow function kullanarak this‘in davranışını gözlemleyelim:

    const kisi = {
      isim: "Ali",
      hobiler: ["kitap okumak", "yüzmek"],

      // Geleneksel Fonksiyon ile hobileri gösterme
      hobileriGosterGeleneksel: function() {
        const this = this; // this'i kaybetmemek için geçici değişken
        setTimeout(function() {
          console.log(${this.isim} hobileri: ${this.hobiler.join(", ")});
        }, 1000);
      },

      // Arrow Function ile hobileri gösterme
      hobileriGosterArrow: function() {
        setTimeout(() => {
          console.log(${this.isim} hobileri: ${this.hobiler.join(", ")});
        }, 1000);
      }
    };

    kisi.hobileriGosterGeleneksel(); // Hata verecektir veya undefined çıktı verecektir (tarayıcıya göre)
    kisi.hobileriGosterArrow();    // "Ali hobileri: kitap okumak, yüzmek" çıktısını verecektir
    

İlk örnekte, setTimeout içindeki geleneksel fonksiyon, this bağlamını kaybeder. setTimeout‘un callback fonksiyonu global kapsamda çalışır ve bu kapsamda this genellikle window nesnesine (tarayıcı ortamında) veya undefined‘a (strict mode’da) işaret eder. Bu yüzden this.isim ve this.hobiler erişilemez hale gelir. var that = this; gibi bir çözüm bu sorunu giderir.

İkinci örnekte ise arrow function, hobileriGosterArrow metodu içinde tanımlandığı için, dışarıdaki this bağlamını (yani kisi nesnesini) miras alır. Bu sayede this.isim ve this.hobiler doğrudan erişilebilir olur.

Örnek: Array Metotları (map, filter, forEach)

Arrow functions, dizi işleme metotları ile birlikte kullanıldığında da büyük kolaylık sağlar:

    const sayilar = [1, 2, 3, 4, 5];

    // Sayıların karesini alma
    const kareler = sayilar.map(sayi => sayi * sayi);
    console.log(kareler); // [1, 4, 9, 16, 25]

    // Sadece çift sayıları filtreleme
    const ciftSayilar = sayilar.filter(sayi => sayi % 2 === 0);
    console.log(ciftSayilar); // [2, 4]

    // Her sayıyı yazdırma
    sayilar.forEach(sayi => console.log(sayi));
    // 1
    // 2
    // 3
    // 4
    // 5
    

Bu örneklerde, arrow function’ların kısa söz dizimi ve return anahtar kelimesini gerektirmemesi, kodu çok daha akıcı ve okunabilir hale getirir.

Arrow Functions Kullanılmaması Gereken Yerler

Arrow functions this bağlamını miras aldığı için bazı durumlarda geleneksel fonksiyonlar tercih edilmelidir:

• Nesne Metotları: Eğer bir metot, kendi this bağlamına sahip olmalı ve bu this‘in dinamik olarak değişmesi gerekiyorsa (örneğin, bir constructor fonksiyonunda), arrow function kullanmak doğru olmayabilir.
• Event Handler’ları: Bazı durumlarda, event listener’larının this‘inin tıklanan elemente işaret etmesi gerekebilir. Bu gibi durumlarda geleneksel fonksiyonlar daha uygundur.
• Constructor Fonksiyonları: new anahtar kelimesi ile çağrılacak fonksiyonlar (constructor’lar) arrow function olamaz. Arrow function’lar new ile çağrıldığında hata verir.
• arguments Objesi: Arrow function’lar kendi arguments nesnesine sahip değildir. Eğer bir fonksiyonda arguments nesnesine erişmeniz gerekiyorsa, geleneksel fonksiyon kullanmalısınız.

Pratik İpuçları ve Kullanım Alanları

• Daha Az Kod, Daha Fazla Okunabilirlik: Basit fonksiyonlar ve callback’ler için arrow functions’ı tercih edin. Bu, kodunuzu daha kısa ve anlaşılır hale getirecektir.
• this Yönetimi: Özellikle setTimeout, setInterval veya dizi işleme metotları içinde this ile çalışırken arrow functions, kodunuzu gereksiz karmaşıklıktan kurtarır.
• Chaining (Zincirleme): Dizi işleme metotları ile birlikte kullanıldığında, arrow functions zincirleme işlemleri (örneğin, map‘ten sonra filter uygulamak) çok daha temiz bir şekilde ifade etmenizi sağlar.
• Anonim Fonksiyonlar: Genellikle bir kere kullanılan ve isimlendirilmesine gerek olmayan fonksiyonlar için arrow functions idealdir.

Sonuç

ES6 arrow functions, JavaScript’e getirilen en kullanışlı yeniliklerden biridir. Daha kısa ve öz söz dizimi, geliştiricilerin daha hızlı kod yazmasına olanak tanırken, lexical this özelliği this bağlamı ile ilgili sık karşılaşılan sorunları ortadan kaldırır. Dizi işleme metotları, setTimeout gibi zamanlanmış fonksiyonlar ve basit tek satırlık işlemler için arrow functions mükemmel bir tercihtir. Ancak, this‘in dinamik olarak değişmesi gereken veya constructor fonksiyonu olarak kullanılacak durumlarda geleneksel fonksiyonların tercih edilmesi gerektiğini unutmamak önemlidir.

Sıkça Sorulan Sorular (SSS)

Arrow function ile geleneksel fonksiyon arasındaki temel farklar nelerdir?

En temel farklar şunlardır: söz dizimi (daha kısa), this bağlamı (lexical vs. dinamik) ve arguments nesnesinin olmaması. Arrow function’lar new ile kullanılamaz.

Arrow function’da this nasıl çalışır?

Arrow function, kendi this değerini tanımlamaz. Bunun yerine, arrow function’ın tanımlandığı kapsamdaki this değerini miras alır.

Ne zaman arrow function kullanmamalıyım?

Nesne metotlarında this‘in tıklanan elemente işaret etmesi gerektiğinde, constructor fonksiyonlarında veya arguments nesnesine erişmeniz gerektiğinde arrow function yerine geleneksel fonksiyonları tercih etmelisiniz.

Arrow function’lar arguments objesini kullanabilir mi?

Hayır, arrow function’lar kendi arguments objesine sahip değildir. Eğer arguments objesine erişmeniz gerekiyorsa, geleneksel fonksiyon kullanmalısınız. Bunun yerine rest parametreleri (...args) kullanabilirsiniz.

Arrow function’da return zorunlu mu?

Eğer arrow function’ın gövdesi tek bir ifade içeriyorsa ve bu ifade geri döndürülecekse, return anahtar kelimesi ve süslü parantezler {} kullanılmayabilir. Birden fazla ifade varsa veya return‘ü açıkça belirtmek istiyorsanız, süslü parantezler ve return kullanılır.