🦸‍♀️ JavaScript’te map, filter, reduce

Dizilerin Süper Güçleri

(For Döngüsüne Veda Töreni – Gözler Nemli 🎉)

Bir zamanlar JavaScript geliştiricileri şöyle yaşardı:

for (let i = 0; i < arr.length; i++) {
  // Allah ne verdiyse…
}

• Kod uzundu 📏
• Okunmuyordu 👀
• Hata yapmaya çok açıktı 💣

Sonra ES6 geldi…
Ve JavaScript dedi ki:

“Kardeşim sakin ol…
Her şey için for yazmana gerek yok.”

İşte sahnede Array Avengers 🦸‍♂️🦸‍♀️
map, filter, reduce

🗺️ MAP

“HERKES AYNI KALACAK AMA BİR TIK DEĞİŞECEK”

🧠 MAP NE YAPAR?

• Bir diziyi alır
• Her elemanı dönüştürür
• Aynı uzunlukta yeni bir dizi verir

map = Dönüştür ama silme.

🔹 En Temel Örnek

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

const kareler = sayilar.map(sayi => sayi * sayi);

console.log(kareler);
// [1, 4, 9, 16]

📌 Adım adım ne oldu?

• map diziyi tek tek gezdi
• Her sayiyı aldı
• sayi * sayi yaptı
• Sonuçları yeni bir diziye koydu

⚠️ Orijinal sayilar dizisi?
👉 Hiç dokunulmadı (map nazik 😌)

😂 Gerçek Hayat Benzetmesi

const fiyatlar = [100, 200, 300];

const kdvli = fiyatlar.map(f => f * 1.2);

• 100 → 120
• 200 → 240
• 300 → 360

map: “Herkese %20 zam, adaletli olalım.” 💸😅

🧠 MAP NE ZAMAN KULLANILIR?

• Bir API’den gelen veriyi UI’ya hazırlarken
• Sayıları, string’e çevirmek
• Objeye yeni property eklemek

Örnek: Kullanıcı isimlerini büyütmek

const users = ["ali", "ayşe", "mehmet"];

const upperUsers = users.map(u => u.toUpperCase());

🧹 FILTER

“GEREKSİZLER GİTSİN, KALİTELİLER KALSIN”

🧠 FILTER NE YAPAR?

• Diziyi gezer
• Şarta uyanları tutar
• Uymayanları eler

filter = Seçici arkadaş 😎

🔹 Temel Örnek

const yaslar = [12, 18, 25, 14, 30];

const yetiskinler = yaslar.filter(yas => yas >= 18);

console.log(yetiskinler);
// [18, 25, 30]

📌 Burada ne oldu?

• Her yaş için fonksiyon çalıştı
• true dönenler → listeye girdi
• false olanlar → kapı dışarı 🚪

😂 Gerçek Hayat Benzetmesi

const yorumlar = [
  { spam: true },
  { spam: false },
  { spam: false }
];

const temizYorumlar = yorumlar.filter(y => !y.spam);

filter: “Spam’e tahammülüm yok.” ❌📩

🧠 FILTER NE ZAMAN KULLANILIR?

• Login olmuş kullanıcıları seçmek
• Stokta olan ürünleri göstermek
• Aktif / pasif ayrımı yapmak

🧮 REDUCE

“GEL, BUNLARI TEK BİR ŞEYE DÖNÜŞTÜRELİM”

🧠 REDUCE NE YAPAR?

• Diziyi alır
• Tek bir değere indirger

Bu değer:

• number olabilir
• string olabilir
• object olabilir
• array olabilir

reduce: Her şey olabilir… biraz tehlikeli. 😈

🔹 En Klasik Örnek: Toplama

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

const toplam = sayilar.reduce((acc, sayi) => {
  return acc + sayi;
}, 0);

console.log(toplam);
// 10

📌 Reduce’un Mantığı

• acc → biriktirici (kumbara 🐷)
• sayi → sıradaki eleman
• 0 → başlangıç değeri

Adımlar:

• 0 + 1 = 1
• 1 + 2 = 3
• 3 + 3 = 6
• 6 + 4 = 10

😵 Reduce Neden Korkutucu?

Çünkü şu da mümkündür:

const sonuc = arr.reduce((a, b) => {
  return a ? b : a;
});

👆 Bunu yazan da, okuyan da ağlar.

Reduce yazıyorsan, okunabilirliğe ekstra dikkat et.

🧠 REDUCE NE ZAMAN KULLANILIR?

• Sepet toplamı
• Oylama sonuçları
• Gruplama işlemleri
• İstatistik hesapları

🎮 MİNİ PROJE: ALIŞVERİŞ SEPETİ

const sepet = [
  { urun: "Kitap", fiyat: 100, adet: 2 },
  { urun: "Kulaklık", fiyat: 300, adet: 1 },
  { urun: "Kahve", fiyat: 50, adet: 3 }
];

const toplam = sepet.reduce((acc, item) => {
  return acc + item.fiyat * item.adet;
}, 0);

console.log(toplam);
// 650

🧠 Burada ne öğrendik?

• map → fiyatları çıkarabilirdi
• filter → sadece indirimdekileri seçebilirdi
• reduce → kasaya geçti 💳

🔗 ZİNCİRLEME (CHAINING)

“BİR DİZİ, ÜÇ SÜPER GÜÇ”

const sonuc = sayilar
  .filter(x => x > 2)
  .map(x => x * 10)
  .reduce((a, b) => a + b, 0);

📌 Okuma Şekli:

1. 2’den büyükleri al
2. 10 ile çarp
3. Topla

JavaScript:

“Okunur kod yaz, ben performansı hallederim.” 😎

⚠️ EN SIK YAPILAN HATALAR

❌ Map ile Filter Taklidi

arr.map(x => {
  if (x > 5) return x;
});

Sonuç:

[undefined, undefined, 6]

✅ Doğrusu

arr.filter(x => x > 5);

❌ Reduce ile Şov

arr.reduce((a, b) => a + b);

Başlangıç değeri yok → sürpriz 🎁

✅ Güvenli Reduce

arr.reduce((a, b) => a + b, 0);

🧠 NE ZAMAN HANGİSİ? (ALTIN TABLO)

🏁 SONUÇ

For Döngüsü Ölmedi… Ama Artık Emekli 👴

map, filter, reduce:

• Kodunu kısaltır ✂️
• Okunabilirliği artırır 📖
• Seni junior’dan mid’e taşır 🚀

Modern JavaScript yazmak,
doğru diziyi doğru süper güçle yönetmektir 🦸‍♂️