[NODE JS] Arrow Function Kullanımı

[Silverhand]

[NODE JS] Arrow Function Kullanımı​

Merhaba arkadaşlar. ES6'nın en çok konuşulan özelliklerinden biri olan arrow function'ları detaylıca inceleyeceğiz. Arrow function'lar sadece kısa yazım kolaylığı sağlamaz, aynı zamanda this bağlamı konusunda klasik fonksiyonlardan farklı davranır. Bu farkı anlamak çok önemli çünkü yanlış kullanım ciddi buglara yol açıyor. Ben bir keresinde bir event handler'da arrow function kullandım ve this'in beklendiği gibi çalışmadığını anlamam yarım günümü aldı.

Temel Sözdizimi​

Arrow function'lar => operatörü ile tanımlanır. Klasik function anahtar kelimesini yazmak yerine daha kısa bir sözdizimi sunarlar. Tek parametreli ve tek satırlık fonksiyonlarda gerçekten çok az kod yazıyorsunuz.

Ben genelde callback fonksiyonlarında, array metodlarında ve kısa yardımcı fonksiyonlarda arrow function kullanıyorum. Ama her yerde arrow function kullanmak doğru değil, özellikle obje metodlarında ve constructor'larda klasik fonksiyon tercih edilmeli.

// === ARROW FUNCTION SÖZDİZİMİ ===

// Klasik fonksiyon tanımlama
function topla(a, b) {
    return a + b;
}

// Arrow function - tam yazım
const toplaArrow = (a, b) => {
    return a + b;
};

// Arrow function - kısa yazım (tek ifade, otomatik return)
const toplaKisa = (a, b) => a + b;

// Tek parametrede parantez opsiyonel
const karesi = x => x * x;
const selamla = isim => `Merhaba ${isim}!`;

// Parametresiz fonksiyon
const simdi = () => new Date();
const rastgele = () => Math.random();

// Obje döndürme (parantez gerekli!)
const kullaniciOlustur = (isim, yas) => ({
    isim,
    yas,
    olusturma: new Date().toISOString()
});

console.log(topla(3, 5));           // 8
console.log(toplaArrow(3, 5));      // 8
console.log(toplaKisa(3, 5));       // 8
console.log(karesi(4));             // 16
console.log(selamla('Ahmet'));      // Merhaba Ahmet!
console.log(simdi());              // Tarih objesi
console.log(kullaniciOlustur('Ayşe', 25));

// Array metodlarında kullanım (en sık kullanılan senaryo)
const sayilar = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const ciftler = sayilar.filter(n => n % 2 === 0);
const kareler = sayilar.map(n => n * n);
const toplam = sayilar.reduce((acc, n) => acc + n, 0);

console.log('Çiftler:', ciftler);   // [2, 4, 6, 8, 10]
console.log('Kareler:', kareler);   // [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]
console.log('Toplam:', toplam);     // 55

// Zincirleme kullanım
const sonuc = sayilar
    .filter(n => n % 2 === 0)
    .map(n => n * n)
    .reduce((acc, n) => acc + n, 0);
console.log('Çift karelerin toplamı:', sonuc); // 220

// Sıralama
const isimler = ['Zeynep', 'Ahmet', 'Buse', 'Can', 'Deniz'];
const sirali = [...isimler].sort((a, b) => a.localeCompare(b, 'tr'));
console.log('Sıralı:', sirali);

this Bağlamı Farkı​

İşte en kritik konu burası. Arrow function'lar kendi this bağlamını oluşturmaz, tanımlandıkları scope'taki this'i kullanır. Bu özellik bazen hayat kurtarır, bazen de sorun çıkarır. Klasik fonksiyonlarda this çağrıldığı yere göre değişir, arrow function'larda ise tanımlandığı yerdeki this her zaman geçerlidir.

Tecrübeme göre en sık karşılaşılan hata, obje metodu olarak arrow function kullanmak. Bu durumda this objeyi değil, dıştaki scope'u (genellikle global veya undefined) gösterir.

// === THIS BAĞLAMI ===

// Klasik fonksiyon - this çağrıldığı yere göre değişir
const kisi = {
    isim: 'Mehmet',
    selamla: function() {
        console.log(`Merhaba, ben ${this.isim}`);
    },
    // Arrow function - this dıştaki scope'a bakır
    selamlaArrow: () => {
        console.log(`Merhaba, ben ${this.isim}`); // undefined!
    }
};

kisi.selamla();       // "Merhaba, ben Mehmet"
kisi.selamlaArrow();  // "Merhaba, ben undefined"

// setTimeout ile klasik sorun ve çözüm
const sayac = {
    deger: 0,

    // Sorunlu versiyon (eski yöntem)
    baslatEski: function() {
        const self = this; // this'i kaydetmek gerekiyordu
        setTimeout(function() {
            self.deger++;
            console.log('Eski yöntem:', self.deger);
        }, 100);
    },

    // Arrow function ile temiz çözüm
    baslat: function() {
        setTimeout(() => {
            this.deger++; // Arrow function dıştaki this'i kullanır
            console.log('Arrow ile:', this.deger);
        }, 200);
    }
};

sayac.baslatEski();
sayac.baslat();

// Event handler örneği (Node.js EventEmitter ile)
const EventEmitter = require('events');

class Sunucu extends EventEmitter {
    constructor(isim) {
        super();
        this.isim = isim;
        this.istekSayisi = 0;

        // Arrow function: this otomatik olarak Sunucu instance'ını gösterir
        this.on('istek', (url) => {
            this.istekSayisi++;
            console.log(`[${this.isim}] İstek #${this.istekSayisi}: ${url}`);
        });
    }

    istekGonder(url) {
        this.emit('istek', url);
    }
}

const srv = new Sunucu('Ana Sunucu');
srv.istekGonder('/api/kullanicilar');
srv.istekGonder('/api/urunler');

// Arrow function kullanılmaması gereken durumlar
// 1. Obje metodları (yukarıda gördük)
// 2. Prototype metodları
// 3. Constructor fonksiyonları
// 4. arguments nesnesine erişim gerektiğinde

// arguments erişimi
function klasikFn() {
    console.log('Arguments:', arguments); // Çalışır
}
klasikFn(1, 2, 3);

const arrowFn = (...args) => {
    // console.log(arguments); // ReferenceError veya dış scope'un arguments'ı
    console.log('Rest params:', args); // Bunun yerine rest parametresi kullanın
};
arrowFn(1, 2, 3);

Özetlemek gerekirse: arrow function callback'lerde ve kısa yardımcı fonksiyonlarda harika, ama obje metodlarında ve this'e ihtiyaç duyulan yerlerde dikkatli olun. Ben genel kuralım olarak "kısa, callback, this'e ihtiyaç yok" üçlüsü sağlanıyorsa arrow function kullanıyorum. Aksi durumda klasik fonksiyon yazıyorum. Kolay gelsin.

 

[devemoji]

Paylaşım için teşekkür ederiz.