🔁 JavaScript Iterables

Nesnelerin Üzerinde Yineleme Yapmak

(“JavaScript’te ben bunun üstünden nasıl geçerim ya?” diyenler buraya)

🧠 Önce Kafayı Rahatlatalım: “Yineleme” Ne Demek?

“Yineleme” dediğimiz şey aslında çok basit:

👉 Bir şeyin içindeki elemanlara sırayla ulaşmak

Gerçek hayatta bunu zaten yapıyoruz:

• 🍕 Pizzayı dilim dilim yiyoruz
• 📺 Diziyi bölüm bölüm izliyoruz
• 🎧 Playlist’i şarkı şarkı dinliyoruz

JavaScript’te de bazı yapılar diyor ki:

“Beni sırayla gezebilirsin kral 😎”

İşte bu yapılara Iterable diyoruz.

🤓 Iterable Ne Demek? (Tek Cümlelik Efsane Tanım)

Iterable, for...of ile gezilebilen şeydir.

Bu kadar.
Fazlası overthinking 😄

✅ Hangi Yapılar Iterable? (Altın Liste)

JavaScript’te doğuştan gezilebilir olanlar:

🎢 Array Üzerinde Yineleme (En Rahatı)

const fruits = ["🍎", "🍌", "🍉"];

for (let fruit of fruits) {
  console.log(fruit);
}

🧠 Ne oldu burada?

• for...of → elemanın kendisini verir
• fruit → her turda bir eleman
• Çıktı:

🍎
🍌
🍉

📌 İpucu:
for...of = “bana değeri ver”
for...in = “bana anahtarı ver” (birazdan)

🔤 String de Iterable (Şaşırma!)

const name = "Cansu";

for (let char of name) {
  console.log(char);
}

🧠 Çıktı:

C
a
n
s
u

💡 Mini bilgi:
JavaScript string’i harf harf parçalayabiliyor
Emoji’lerde de çalışır 😎

🚨 Büyük Hayal Kırıklığı: Object Neden Gezilemiyor?

const user = {
  name: "Cansu",
  age: 25
};

for (let item of user) {
  console.log(item);
}

💥 HATA!

JavaScript diyor ki:

“Ben bunun nasıl gezileceğini bilmiyorum kardeşim 🤷‍♂️”

Çünkü:

• Object’in sırası yok
• JavaScript neye göre dolaşacağını bilemiyor

AMA…
Biz JavaScript’ten zekiyiz 😏

🛠️ Object Üzerinde Yineleme YÖNTEMLERİ

(Hayat Kurtaran 3’lü Set)

1️⃣ Object.keys() – Anahtarları Gez

const user = {
  name: "Cansu",
  age: 25,
  job: "Frontend Dev"
};

const keys = Object.keys(user);

for (let key of keys) {
  console.log(key);
}

🧠 Açıklama:

• Object.keys(user) → ["name", "age", "job"]
• Artık elimizde array var
• Array = iterable 😎

📌 Ne zaman kullanılır?
Sadece anahtarlarla ilgileniyorsan.

2️⃣ Object.values() – Değerleri Gez

const values = Object.values(user);

for (let value of values) {
  console.log(value);
}

🧠 Çıktı:

Cansu
25
Frontend Dev

📌 Ne zaman kullanılır?
“Bana anahtar önemli değil, değerleri göster” diyorsan.

3️⃣ Object.entries() – EFSANE MOD 🔥

const entries = Object.entries(user);

for (let [key, value] of entries) {
  console.log(`${key} → ${value}`);
}

🧠 Çıktı:

name → Cansu
age → 25
job → Frontend Dev

📌 Bu neden çok iyi?

• Hem key hem value
• Destructuring ✨
• Temiz, okunabilir, modern

Senior havası veriyor 😎

⚔️ for…in vs for…of (Kafa Karışıklığı Giderme)

for...in

for (let key in user) {
  console.log(key);
}

• Anahtar verir
• Object’lerde çalışır
• Ama prototype olayları yüzünden risklidir 😬

for...of

for (let item of array) {
  console.log(item);
}

• Değer verir
• Iterable ister
• Modern & güvenli ✅

📌 Altın kural:

Object + modern JS = Object.entries() + for...of

🧙‍♂️ Gerçek Büyü: Symbol.iterator

Bir yapı iterable ise, içinde şu gizli kapı vardır:

Symbol.iterator

JavaScript bunu görünce diyor ki:

“Tamam, bunun nasıl gezileceğini biliyorum.”

🛠️ Kendi Iterable Objeni Yazalım (Level Up ⬆️)

const counter = {
  start: 1,
  end: 5,
  [Symbol.iterator]() {
    let current = this.start;
    let last = this.end;

    return {
      next() {
        if (current <= last) {
          return { value: current++, done: false };
        }
        return { done: true };
      }
    };
  }
};

Şimdi kullanalım:

for (let number of counter) {
  console.log(number);
}

🧠 Çıktı:

1
2
3
4
5

🔍 Bu Kodda Ne Oldu?

• [Symbol.iterator]() → iterable olmanın şartı
• next() → her turda çağrılır
• value → o anki değer
• done: true → “bitti” sinyali 🚦

📌 Bu bilgi nerede işine yarar?

• Custom data structures
• Infinite loop kontrolü
• Generator mantığını anlamak

🎁 BONUS: Generator ile Aynı Şeyin Kolayı

function* counterGen(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
}

for (let num of counterGen(1, 5)) {
  console.log(num);
}

💡 Daha kısa
💡 Daha okunabilir
💡 Daha modern

🧠 Süper İpuçları (Kaydetmelik ⭐)

• forEach → break çalışmaz
• for...of → break & continue çalışır
• Performans istiyorsan → for...of
• Object gezeceksen → Object.entries()

💬 Kapanış (Kalpten)

JavaScript’te her şey iterable değildir…
ama nasıl iterable yapılacağını bilenler oyunu kazanır 😌