JavaScript’te Map, Filter ve Reduce Kullanımı

JavaScript’te dizi işlemleri yaparken en çok kullanılan ve en güçlü üç fonksiyon olan map(), filter() ve reduce(), modern geliştiriciler için vazgeçilmezdir. Bu üç fonksiyon, kodunuzu daha kısa, okunabilir ve fonksiyonel hale getirir. Bu rehberde, her birini detaylı olarak inceleyecek ve gerçek dünya örnekleriyle açıklayacağız.

1. map() Fonksiyonu

Bir dizinin her elemanını işleyerek yeni bir dizi oluşturur.
Önemli bir not olarak, map() orijinal diziyi değiştirmez, bu da onu güvenli hale getirir.

Kullanım Senaryoları:

• Dizideki her elemanı belirli bir değerle çarpmak.
• API’den gelen verileri formatlamak.
• React’te listeleri render etmek.

2. filter() Fonksiyonu

Belirli bir koşulu sağlayan elemanları süzerek yeni bir dizi döndürür.
Diğer yandan, filter() da map() gibi orijinal diziyi değiştirmez.

Kullanım Senaryoları:

• Belirli bir değerin üzerindeki sayıları seçmek.
• Kullanıcıları yaşa göre filtrelemek.
• Fiyatı 100 TL’den yüksek ürünleri listelemek.

3. reduce() Fonksiyonu

Amacı: Bir diziyi tek bir değere indirger (toplama, ortalama alma, gruplama vb.).

Kullanım Senaryoları:

• Toplam hesabı.
• Alışveriş sepetindeki ürünlerin toplam fiyatını hesaplamak.
• Kelime sayımı yapmak.

4. map(), filter() ve reduce() Birlikte Kullanımı

Bu fonksiyonlar zincirleme (chaining) yöntemiyle birleştirildiğinde bu aşağıdaki yapı ortaya çıkar.

5. Farklar

Pratik İpuçları:

1. map() ve filter() saf fonksiyonlardır (orijinal diziyi değiştirmez).
2. reduce() çok güçlüdür ama basit senaryolarda map() veya filter() tercih edilebilir.
3. Zincirleme yaparken performans için gereksiz işlemlerden kaçının.
4. React’te listeleri render ederken map() kullanılır, ancak her elemana unique key verilmelidir.

Biraz Daha Örnek:

1. map() Örneği: Fiyatlara KDV Ekleme

2. filter() Örneği: Yetişkinleri Filtreleme

3. reduce() Örneği: Sepet Toplamı Hesaplama

Bonus: Zincirleme Örnek (map + filter)