JavaScript’te for…of Döngüsü

Kolay, Etkili ve “Ben Bunu Niye Daha Önce Kullanmadım?” Dedirten İterasyon 🔁✨

JavaScript’te bir noktaya gelirsin…
Kod yazıyorsundur, her şey yolunda gider.
Sonra biri sana şunu der:

“Şu dizinin içindekileri tek tek dolaş.”

Ve sen refleks olarak şunu yaparsın:

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

Sonra da içinden şunu geçirirsin:

“Bu çok mu uzun oldu ya?” 😐

İşte for…of, JavaScript’in sana attığı şu bakıştır:

“Gel abi, uzatma.”

for…of Nedir? (İnsan Diliyle Anlatım)

for…of, iterable (üzerinde gezilebilen) yapılardaki değerleri tek tek almanı sağlar.

Iterable ne demek?

Şu soruya “evet” diyebiliyorsan, iterable’dır:

“Bunun içindekileri sırayla dolaşabilir miyim?”

✔ Array
✔ String
✔ Set
✔ Map
✔ NodeList (DOM’dan gelenler)

❌ Normal object {} (birazdan geleceğiz)

for…of’un Temel Yapısı (Anatomisi 🧠)

for (const item of iterable) {
  // yapılacak işler
}

Bunu şöyle okuyabilirsin:

“Bu iterable’ın içindeki her bir item için şunu yap…”

Buradaki güzellik:

• i yok
• length yok
• array[i] yok
• Beyin yanması yok 🔥❌

En Basit Örnek: Array Üzerinde for…of

const colors = ["kırmızı", "mavi", "yeşil"];

for (const color of colors) {
  console.log(color);
}

Adım Adım Ne Oluyor?

1️⃣ Döngü başlıyor
2️⃣ colors dizisinin ilk elemanı alınır → "kırmızı"
3️⃣ color değişkenine atanır
4️⃣ console.log(color) çalışır
5️⃣ Sıradaki elemana geçilir

📌 Dikkat:
Burada color, index değil, direkt değer.

Klasik for vs for…of (Biraz Dedikodu 😄)

Klasik for (Disiplinli ama soğuk)

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

• Index’i sen yönetiyorsun
• Bir yerde i <= length yazarsan geçmiş olsun
• Daha çok yazı, daha çok hata ihtimali

for…of (Rahat, chill 😎)

for (const color of colors) {
  console.log(color);
}

• “Al, değeri kullan”
• Daha okunabilir
• Daha az hata

🧠 Okunabilirlik kuralı:
Kod, bilgisayardan çok insanlar için yazılır.

String Üzerinde for…of (Burada Küçük Bir Sihir Var 🪄)

const word = "JavaScript";

for (const char of word) {
  console.log(char);
}

📤 Çıktı:

J
a
v
a
S
c
r
i
p
t

Neden Bu Güzel?

• Karakter karakter dolaşır
• Emoji’leri bile düzgün böler (önemli detay!)

for (const emoji of "🔥🚀") {
  console.log(emoji);
}

Eski yöntemlerle bu her zaman düzgün çalışmazdı.

Set Üzerinde for…of (Tekrar Sevmeyenlere Selam 👋)

const uniqueNumbers = new Set([1, 2, 2, 3, 4]);

for (const num of uniqueNumbers) {
  console.log(num);
}

📌 Set:

• Aynı değeri bir kere tutar
• Sıralı dolaşılır

for…of burada tam evinde hisseder.

Map Üzerinde for…of (Profesyonel Seviye 🎩)

const user = new Map([
  ["name", "Cansu"],
  ["age", 26],
  ["role", "Frontend Developer"]
]);

for (const entry of user) {
  console.log(entry);
}

📤 Çıktı:

["name", "Cansu"]
["age", 26]
["role", "Frontend Developer"]

Ama biz daha şık isteriz 😌

Destructuring ile Kullanımı

for (const [key, value] of user) {
  console.log(`${key}: ${value}`);
}

🎯 Hem temiz
🎯 Hem okunur
🎯 Hem “ben bu işi biliyorum” havası

for…of vs for…in (En Çok Karıştırılan Konu ⚠️)

for…in Ne Yapar?

• Key / index verir

const arr = ["a", "b", "c"];

for (const i in arr) {
  console.log(i);
}

📤 Çıktı:

0
1
2

for…of Ne Yapar?

• Değer verir

for (const val of arr) {
  console.log(val);
}

📤 Çıktı:

a
b
c

📌 Altın kural:

• Array → %90 for…of
• Object → for…in veya Object.entries

Object’te for…of Neden Çalışmaz?

const person = { name: "Cansu", age: 26 };

for (const item of person) {
  console.log(item); // ❌ TypeError
}

Çünkü normal object iterable değildir.

Çözüm: Object.entries

for (const [key, value] of Object.entries(person)) {
  console.log(key, value);
}

🧠 for…of + entries = 💖

break ve continue ile for…of (Kontrol Bizde 🕹️)

break

for (const num of [1, 2, 3, 4, 5]) {
  if (num === 3) break;
  console.log(num);
}

📤 Çıktı:

1
2

continue

for (const num of [1, 2, 3, 4, 5]) {
  if (num === 3) continue;
  console.log(num);
}

📤 Çıktı:

1
2
4
5

📌 map / forEach’te bu kadar rahat değilsin.

for…of Ne Zaman Mükemmel Bir Seçim?

✔ Sadece değerler önemliyse
✔ Okunabilirlik istiyorsan
✔ Döngüyü gerektiğinde durdurmak istiyorsan
✔ Array / String / Map / Set kullanıyorsan

Ne Zaman Kullanmamalısın?

❌ Index’e ihtiyacın varsa
❌ Object literal üzerinde direkt dolaşacaksan
❌ IE gibi fosil tarayıcı desteği gerekiyorsa 🦖

Mini İpuçları Köşesi 💡

🔹 const kullan → Değer değişmiyor
🔹 Performans olarak gayet yeterli
🔹 Temiz kod sevenlerin favorisi
🔹 Kod review’da “aa güzel” dedirtir 😄

Kısa Özet (Ama Etkili)

• for…of = sade + güçlü
• Değer odaklıdır
• Okunabilirliği uçurur 🚀
• JavaScript’te “modern” hissettirir

Eğer bir gün şunu düşünürsen:

“Bu döngü biraz çirkin oldu…”

Çözüm belli:

for…of yaz, yoluna bak.