🧠 JavaScript Array Iteration

Dizileri Dolaşmanın Kolay, Eğlenceli ve Travmasız Yolu

JavaScript’te array’ler…
Kimi zaman alışveriş listesi,
kimi zaman kullanıcılar,
kimi zaman da “bu nereden geldi?” dediğimiz veriler 😅

Ama ne olursa olsun, şu kaçınılmaz:

👉 Bir gün o diziyi dolaşman gerekecek.

İşte bu yazı, tam olarak o gün için.

🔁 Iteration Nedir? (İnsanca Anlatalım)

Iteration =
Bir dizinin elemanlarını sırayla ziyaret etmek.

Bunu şöyle hayal et:

Bir apartmandasın.
Kapı kapı dolaşıp “Evde misiniz?” diyorsun.

Array:

const users = ["Ayşe", "Mehmet", "Zeynep"];

Iteration:

Ayşe’ye git → bak
Mehmet’e git → bak
Zeynep’e git → bak

JavaScript bunu senin yerine yapabilecek bir sürü yöntem sunuyor.
Hangisini seçeceğin, ne yapmak istediğine bağlı.

🧓 1. Klasik Ama Güçlü: for Döngüsü

Bu yöntem JavaScript’in babası gibi.
Disiplinli, ciddi, biraz da konuşkan.

🔧 Kod:

for (let i = 0; i < users.length; i++) {
  console.log(users[i]);
}

🧩 Parça Parça Açalım

let i = 0;

📍 Başlangıç noktası
(“İlk kapıdan başla”)

i < users.length

📍 Dizinin sonuna gelene kadar devam et
(“Apartman bitene kadar dolaş”)

i++

📍 Bir sonraki elemana geç
(“Alt kata in”)

users[i]

📍 Şu an ziyaret ettiğin kişi

🎯 Ne Zaman Kullanılır?

• Index’e ihtiyacın varsa
• Dolaşma sırasında break / continue kullanacaksan
• “Kontrol bende olacak” diyorsan

⚠️ Küçük Uyarı

for güçlüdür ama:

• Uzundur
• Hata yapmaya açıktır
• Her yerde kullanmak gereksizdir

Her çiviyi çekiçle çakma. 🔨

😌 2. “Ben Halederim”: forEach

JavaScript burada sana şunu der:

“Index’le, length’le uğraşma…
Sen sadece ne yapacağını söyle.”

🔧 Kod:

users.forEach(function(user) {
  console.log(user);
});

😎 Modern Versiyon (Arrow Function):

users.forEach(user => console.log(user));

🧠 forEach Nasıl Çalışır?

• Diziyi otomatik dolaşır
• Her elemanı sana verir
• Sen sadece işlem yaparsın

Ama…

❗ Bir şey geri döndürmez

❌ Yanlış Kullanım

const newUsers = users.forEach(user => user.toUpperCase());

❌ Bu çalışmaz
Çünkü forEach return umursamaz

✅ Doğru Kullanım

users.forEach(user => {
  console.log(user.toUpperCase());
});

🎯 Ne Zaman Kullanılır?

• Loglama
• Ekrana yazdırma
• API çağrısı
• “Sadece gez ve işlem yap” durumları

🎨 3. Dönüştürme Sanatçısı: map

map, iteration dünyasının Photoshop’u 🎨
Aynı veriyi alır, başka bir şeye çevirir.

🔧 Kod:

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

🧠 map Mantığı

“Her elemana dokunayım
ama yeni bir dizi oluşturayım”

Eski dizi:

["Ayşe", "Mehmet", "Zeynep"]

Yeni dizi:

["AYŞE", "MEHMET", "ZEYNEP"]

🧩 Daha Gerçekçi Örnek

const prices = [100, 200, 300];

const pricesWithTax = prices.map(price => price * 1.2);

📌 Vergili fiyatlar ✔
📌 Eski dizi bozulmadı ✔

❗ Altın Kural

map kullanıyorsan
mutlaka sonucu bir yerde kullan

Aksi hâlde:

users.map(user => console.log(user));

❌ Bu bir map suçudur 🚨
Burada forEach kullanmalıydın.

🧹 4. Kapıdaki Güvenlik: filter

filter, seçicidir.
Herkesi içeri almaz.

🔧 Kod:

const longNames = users.filter(user => user.length > 5);

🧠 Mantık

• Fonksiyon true dönerse → içeri
• false dönerse → dışarı

🧩 Gerçek Hayat Örneği

const products = [
  { name: "Laptop", price: 30000 },
  { name: "Mouse", price: 500 },
  { name: "Phone", price: 20000 }
];

const expensive = products.filter(p => p.price > 10000);

📌 Sadece pahalı ürünler ✔
📌 Liste temiz ✔

🎯 Ne Zaman Kullanılır?

• Arama sonuçları
• Filtreleme
• Admin panelleri
• “Sadece şunları göster” senaryosu

🧮 5. Final Boss: reduce

Evet…
İlk bakışta korkutucu 😅
Ama aslında çok güçlü.

🔧 Kod:

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

const total = numbers.reduce((sum, number) => {
  return sum + number;
}, 0);

🧩 Parça Parça Açalım

(sum, number)

• sum → biriken değer
• number → sıradaki eleman

0

📍 Başlangıç değeri

🧠 reduce Ne Yapar?

Diziyi dolaşır
ve tek bir sonuca indirger

Toplam, ortalama, obje, string…
Ne istersen.

🧩 Obje Oluşturma Örneği

const votes = ["yes", "no", "yes"];

const result = votes.reduce((acc, vote) => {
  acc[vote] = (acc[vote] || 0) + 1;
  return acc;
}, {});

Sonuç:

{ yes: 2, no: 1 }

🔥 İşte bu seviye atlatır.

🆚 Hangisini Seçmeliyim?

🧠 Profesyonel İpuçları (Altın Değerinde)

✨ 1. Okunabilirlik > Kısalık
✨ 2. map ile yan etki yapma
✨ 3. filter + map birlikte çok güçlüdür
✨ 4. reduce öğren, ama her yerde kullanma

☕ Son Söz

Array iteration, JavaScript’te:

“Junior → Mid geçiş kapısıdır”

Bu yöntemleri doğru kullanan bir kod:

• Daha temiz
• Daha anlaşılır
• Daha profesyonel görünür