JavaScript Başlangıç Kodları: Diziler ve Objelerle map, filter, reduce (Pratik Ö

JavaScript’te diziler ve objelerle çalışmak, neredeyse her projede karşınıza çıkar: API’dan gelen veriyi ekranda göstermek, bir listeyi filtrelemek, sepet toplamını hesaplamak… “JavaScript başlangıç kodları” tarafında en sık kullanılan üçlü ise genellikle map, filter ve reduce olur.

Bu yazıda her yöntemin ne yaptığını kısaca özetleyip gerçek hayata benzeyen örneklerle ilerleyeceğiz. Davranış detayları için resmi referanslar: Array.prototype.map(), Array.prototype.filter(), Array.prototype.reduce(), Destructuring.

JavaScript Başlangıç Kodları: map vs filter vs reduce (Hızlı Özet)

• map(): Her elemanı dönüştürür ve yeni bir dizi döndürür. (MDN map())
• filter(): Koşulu sağlayan elemanları seçer ve yeni (sığ/shallow) bir dizi döndürür. (MDN filter())
• reduce(): Elemanları bir accumulator üzerinden birleştirerek tek bir sonuca indirger; boş dizi ihtimali varsa initialValue kritik olabilir. (MDN reduce())

Kısa karşılaştırma tablosu

map(): Her elemanı dönüştür, yeni dizi üret

map(), dizideki her eleman için callback’i çalıştırır ve callback’in döndürdüğü değerlerle yeni bir dizi oluşturur. (MDN map())

Örnek 1: Sayıları başka bir ölçeğe dönüştürme

Kod:

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

İpucu: map kullanırken dönüşüm fonksiyonunuzun her zaman bir değer döndürdüğünden emin olun; aksi halde sonuç dizinizde undefined görebilirsiniz. (map’in dönüş değeri davranışı: MDN map())

Örnek 2: API verisini UI için şekillendirme

Kod:

const users = [
{ id: 101, firstName: "Ada", lastName: "Lovelace" },
{ id: 102, firstName: "Grace", lastName: "Hopper" }
];
const options = users.map(u => ({
value: u.id,
label: `${u.firstName} ${u.lastName}`
}));

filter(): Şarta uyanları seç, yeni dizi üret

filter(), callback’in truthy döndürdüğü elemanları seçer ve yeni bir dizi döndürür. Bu sonuç dizi, elemanlar obje ise sığ (shallow) kopya mantığıyla aynı referansları içerebilir. (MDN filter())

Örnek 3: Aktif kullanıcıları listeleme

Kod:

const users = [
{ id: 1, name: "Taylor", active: true },
{ id: 2, name: "Jordan", active: false },
{ id: 3, name: "Casey", active: true }
];
const activeUsers = users.filter(u => u.active);

Örnek 4: Metin araması (case-insensitive)

Kod:

const query = "jo";
const result = users.filter(u => u.name.toLowerCase().includes(query.toLowerCase()));

map + filter zinciri: En sık kullanılan pratik desen

Gerçek projelerde sık görülen desen: önce ele (filter), sonra dönüştür (map). Parametre ve dönüş değerleri: MDN filter(), MDN map().

Örnek 5: Uygun ürünleri seç, fiyatı formatla

Kod:

const products = [
{ sku: "A1", price: 19.99, inStock: true },
{ sku: "B2", price: 5, inStock: false },
{ sku: "C3", price: 12.5, inStock: true }
];
const visible = products
.filter(p => p.inStock)
.map(p => ({ sku: p.sku, priceText: `$${p.price}` }));

reduce(): Diziyi tek bir değere indirgeme

reduce(), bir accumulator üzerinden diziyi dolaşır ve sonunda tek bir sonuç döndürür. (MDN reduce())

En kritik nokta: initialValue

Boş dizi ihtimali varsa initialValue vermeden reduce çağırmak TypeError üretebilir; bu davranış MDN’de açıklanır. (MDN reduce())

Örnek 6: Sepet toplamı

Kod:

const cart = [
{ sku: "A1", qty: 2, unitPrice: 10 },
{ sku: "C3", qty: 1, unitPrice: 12.5 }
];
const total = cart.reduce((sum, item) => {
return sum + item.qty * item.unitPrice;
}, 0);
// total: 32.5

Örnek 7: Dizi içinden “id -> obje” sözlüğü üretme

Kod:

const users2 = [
{ id: 101, name: "Ada" },
{ id: 102, name: "Grace" }
];
const byId = users2.reduce((acc, u) => {
acc[u.id] = u;
return acc;
}, {});

Nesnelerle daha temiz çalışma: Object destructuring

Destructuring ile objeden alanları kısa yoldan çıkarabilirsiniz. Sözdizimi ve varsayılan değerler için: MDN destructuring.

Örnek 8: Alanları kısa yoldan çıkarma

Kod:

const user = { id: 7, name: "Sam", plan: "pro" };
const { id, name } = user;

Örnek 9: Varsayılan değer

Kod:

const user2 = { id: 7, name: "Sam" };
const { plan = "free" } = user2;
// plan: "free"

Örnek 10: İç içe objelerde dikkat

Kod:

const payload = { profile: { email: "[email protected]" } };
const { profile: { email } } = payload;

İç içe destructuring yaparken ara objenin varlığını garanti edemiyorsanız, önce kontrol (veya farklı bir erişim yaklaşımı) gerekebilir. (Detaylar: MDN destructuring)

map/filter/reduce ile sık yapılan hatalar (ve hızlı çözümler)

1) “Yeni dizi” her şeyi kopyalar sanmak

map/filter yeni bir dizi döndürür; filter için MDN ayrıca sonucun sığ (shallow) kopya olduğunu belirtir. (MDN filter()) Elemanlar obje ise, iki farklı dizide aynı obje referanslarını paylaşmanız mümkündür.

Uyarı örneği: Aynı obje referansı paylaşıldığı için mutasyon iki tarafta da görünür

Kod:

const original = [{ id: 1, name: "A" }];
const mapped = original.map(x => x);
mapped[0].name = "B";
// original[0].name da "B" olur

Burada map yeni bir dizi üretir; fakat callback’te aynı objeyi geri döndürdüğünüz için iki dizi aynı nesneyi işaret eder. (map’in yeni dizi döndürmesi: MDN map())

2) reduce’da initialValue unutmak

Boş dizi ihtimali olan akışlarda initialValue’yu varsayılan alışkanlık haline getirin. (Hata davranışı: MDN reduce())

3) reduce’u “her şeyi tek yerde çözme” aracına çevirmek

reduce güçlüdür; ama çok fazla iş kuralını tek reduce içine gömmek okunabilirliği düşürebilir. Böyle durumlarda adım adım filter/map ile ilerlemek çoğu ekip için daha anlaşılır olur. (Tanım ve kullanım notları: MDN reduce())

Mini alıştırma: 15 dakikalık pratik

1. 10 ürünlük bir dizi oluşturun (fiyat, kategori, stok).
2. filter ile stokta olanları seçin.
3. map ile UI kartı formatına çevirin (başlık, fiyat metni).
4. reduce ile toplam stok değerini hesaplayın (qty * unitPrice).
5. Bir fonksiyonda ürün parametresini destructuring ile parçalayın.

Sonuç

map dönüşüm, filter eleme, reduce özetleme/birleştirme işidir. Buna ek olarak object destructuring ile daha okunabilir kod yazabilir; varsayılan değerlerle beklenmedik undefined durumlarını azaltabilirsiniz. Davranışları doğrulamak için MDN sayfaları iyi bir referans noktasıdır: map, filter, reduce, destructuring.