Giriş

JavaScript'te dizilerle çalışırken map, filter ve reduce sık kullanılan, fonksiyonel programlama tarzını kolaylaştıran yöntemlerdir. Bu yazıda her birinin ne yaptığını, birbirleriyle nasıl zincirlenebileceğini ve object destructuring ile birlikte nasıl daha okunabilir kod yazılacağını örneklerle göstereceğim. Örnekler ES6+ sözdizimini varsayar.

Temel Tanımlar ve Kaynaklar

map(): Her dizi elemanına bir dönüşüm fonksiyonu uygular ve dönüşümlerin sonucundan yeni bir dizi döndürür. Resmî tanım ve örnekler için MDN dokümanına bakabilirsiniz: Array.prototype.map() - MDN.

filter(): Dizideki öğeleri belirli bir koşula göre süzer ve koşulu sağlayan öğelerden yeni bir dizi döndürür. Genel array metodları özetleri ve örnekler için bkz: JavaScript Array Methods — Coddy.

reduce(): Dizi öğelerini tek bir değere indirger; toplama, gruplama gibi işlemler için kullanışlıdır. reduce ile ilgili dikkat edilmesi gereken noktalar ve başlangıç değeri (initial value) kullanımı hakkında daha fazla bilgi için aynı kaynak faydalıdır: JavaScript Array Methods — Coddy.

Object destructuring: Nesne ve dizilerden atanacak alanları doğrudan çıkarma (destructure) sağlar; daha kısa ve okunabilir kod yazmaya yardımcı olur. Kullanım örnekleri için MDN dokümanına bakabilirsiniz: Destructuring — MDN.

map(), filter(), reduce() — Temel Örnekler

map örneği
Örnek dizi ve dönüşüm:

const nums = [1, 2, 3, 4];
const doubled = nums.map(n => n * 2);
// doubled = [2, 4, 6, 8]

Açıklama: Her eleman 2 ile çarpılır; orijinal dizi değişmez, yeni bir dizi döner.

filter örneği
Çift sayıları seçme:

const evens = nums.filter(n => n % 2 === 0);
// evens = [2, 4]

reduce örneği
Dizi elemanlarını toplama:

const total = nums.reduce((acc, n) => acc + n, 0);
// total = 10

Açıklama: reduce, her adımda birikeni (acc) güncelleyerek tek bir değer üretir. initial value (burada 0) belirtilmesi pratik ve güvenlidir; boş diziler için hata riskini azaltır.

Pratik Örnek: Ürün Listesinden Kategori Gelirini Hesaplama

Gerçek bir senaryo düşünün: ürünler diziniz var ve 'coffee' kategorisindeki ürünlerin toplam gelirini hesaplamak istiyorsunuz. Hem filter hem reduce kullanarak kısa ve okunabilir bir çözüm elde edebilirsiniz.

const products = [
{ id: 1, category: 'coffee', price: 5 },
{ id: 2, category: 'tea', price: 3 },
{ id: 3, category: 'coffee', price: 7 }
];

const coffeeRevenue = products
.filter(p => p.category === 'coffee')
.reduce((sum, p) => sum + p.price, 0);
// coffeeRevenue = 12

Alternatif olarak reduce tek başına da kullanılabilir; bu durumda filtre koşulunu reduce içinde uygulamak kodu tek bir adımda toplar:

const coffeeRevenue2 = products.reduce((sum, p) => p.category === 'coffee' ? sum + p.price : sum, 0);

Her iki yaklaşım da okunabilirlik ve amaç açısından değerlendirilebilir; filter + reduce, mantıksal adımları ayırdığı için çoğu zaman daha anlaşılırdır.

Object Destructuring ile Daha Temiz Kod

Destructuring, nesne içindeki alanları doğrudan değişkenlere atamayı kolaylaştırır:

const person = { name: 'Ayşe', age: 28, address: { city: 'İzmir' } };
const { name, age } = person;
// name = 'Ayşe', age = 28

İç içe alanları çıkarmak:

const { address: { city } } = person;
// city = 'İzmir'

Fonksiyon parametresinde destructuring kullanımı:

function greet({ name, age }) {
return `Merhaba ${name}, ${age} yaşındasınız.`;
}
greet(person);

Ayrıca alanları yeniden adlandırma ve varsayılan değer verme mümkündür:

const { name: firstName = 'Anon' } = person;
// firstName = 'Ayşe'

Map ile Nesne Dönüşümleri (Destructuring kombinasyonu)

Genelde API'dan gelen veri yapısını uygulamanızın ihtiyaçlarına göre dönüştürürsünüz. map ve destructuring bu işi sadeleştirir:

const items = [ { id: 1, name: 'A', price: 10 }, { id: 2, name: 'B', price: 15 } ];
const summary = items.map(({ id, price }) => ({ sku: id, cost: price * 1.1 }));

Bu örnekte map ile her nesneyi yeni bir yapıya dönüştürdük; destructuring ile id ve price doğrudan alındı.

Reduce ile Grup (groupBy) Oluşturma

reduce, tekil bir çıktı üretmek için uygundur. Örneğin ürünleri kategori bazında gruplayalım:

const grouped = products.reduce((acc, p) => {
if (!acc[p.category]) acc[p.category] = [];
acc[p.category].push(p);
return acc;
}, {});

Sonuç: { coffee: [ ... ], tea: [ ... ] }

Dikkat Edilmesi Gereken Noktalar ve İyi Uygulamalar

• map ve filter yeni diziler döndürür; orijinal diziyi değiştirmezler (callback içinde mutasyon yapılmadığı sürece).
• reduce kullanırken başlangıç değeri (initial value) vermek, özellikle boş dizilerle çalışırken güvenlik sağlar.
• Büyük dizilerde gereksiz kopyalar performansı etkileyebilir; çok büyük veri setlerinde streaming / iterator yaklaşımları değerlendirilebilir.
• Her callback fonksiyonunda yan etkiden kaçının; saf (pure) fonksiyonlar hem test edilebilirliği hem de okunabilirliği artırır.
• Destructuring ile varsayılan değerlerin ve alan yeniden adlandırmanın (aliasing) kullanımına dikkat edin, böylece beklenmeyen undefined durumları kontrol altına alınır.

Kısa Rehber: Hangi Durumda Hangi Metod?

1. Her elemanı dönüştürmek istiyorsanız: map().
2. Diziden koşulu sağlayan öğeleri seçmek istiyorsanız: filter().
3. Tek bir değer ya da obje üretmek (toplam, gruplayıc�, tek bir yapı) istiyorsanız: reduce().
4. Nesnelerden belirli alanları almak istiyorsanız: object destructuring.

Kaynaklar ve Daha Fazla Okuma

Map metodu için MDN dokümanı: https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/array/map.
Destructuring hakkında MDN rehberi: https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment.
Array metodları özeti ve ek örnekler: https://coddy.tech/docs/javascript/array-methods.

Örnek kodlar ES6+ sözdizimi kullanır; tarayıcı veya çalışma ortamınızın ES6 desteğini kontrol edin.

Sonuç

map, filter ve reduce birlikte veya ayrı kullanıldığında diziler üzerinde güçlü ve okunabilir dönüşümler sağlar. Object destructuring ile kombinasyon, kodu daha kısa ve anlaşılır kılar. Küçük, saf fonksiyonlara bölmek ve reduce için başlangıç değeri vermek gibi basit kurallar kodun güvenilirliğini artırır.