for...of ve for...in
for ve while ile sayacı siz yönetirdiniz. Çoğu zaman veri zaten liste veya nesne — her değeri veya her anahtarı istiyorsunuz, ev yapımı indeks değil. for...of yinelenebilirden sonraki değeri verir. for...in nesnedeki sonraki anahtarı verir. Aynı tekrar ailesi; döngü değişkeninde farklı şey.
for...of ne yapar?
Yinelenebilirin her değeri için gövdeyi bir kez çalıştırır. Yeni başlayan için dizi ve string günlük vakalardır. for (const item of list) yazarsınız — her turda item sonraki değerdir. Bilerek indeks döngüsü istemiyorsanız i < list.length yazmayın.
for...of, for...in ve klasik döngüler
📊 Gündelik dolaşım biçimleri
| Biçim | Döngü değişkeni ne tutar | Gündelik uyum |
|---|---|---|
for...of |
yinelenebilirden bir değer | dizideki her meyve; stringteki her karakter |
for...in |
nesnede bir anahtar (özellik adı) | sade nesnedeki her alan adı |
klasik for |
sizin kontrol ettiğiniz bir indeks | 0, 1, 2… sayısı gerektiğinde |
while |
gövdede güncellediğiniz şey | bir kural geçerliyken devam |
for...of için dizilerle başlayın. Hikâye «bu nesnedeki her özellik adı» ise for...ine gidin. İndeksin kendisi önemliyse klasik for kalsın.
const colors = ["red", "green", "blue"];
for (const color of colors) {
console.log(color);
}
Dizinin değerlerinde dolaşın
Her tur bir string basar: red, sonra green, sonra blue. Döngü değişkeni değerin kendisidir — 0, 1, 2 değil. Yalnızca öğeler lazımsa for...of, indeks yönetmekten daha kısadır.
const word = "hi";
for (const ch of word) {
console.log(ch);
}
String karakterlerinde dolaşın
Stringler de yinelenebilirdir. Önce h, sonra i basılır. Her karakteri bir değer sayın — ağır string API'lerinden önce basit harf harf iş için yararlıdır.
const user = { name: "Ada", role: "dev" };
for (const key in user) {
console.log(key + "=" + user[key]);
}
for...in ile anahtarlarda dolaşın
Burada key önce "name", sonra "role" olur. Değeri user[key] ile okursunuz. Sade nesnelerin numaralandırılabilir anahtarları için for...in tercih edin. Dizi değerleri için ilk araç yapmayın — o for...of işidir.
Kısa kuralı aklınızda tutun: of → değerler, in → anahtarlar. Karıştırmak yeni başlayanın klasik yanılgısıdır.
const parts = ["A", "B", "C"];
let msg = "";
for (const p of parts) {
msg = msg + p + "-";
}
console.log(msg.slice(0, -1));
Değerlerden bir mesaj kurun
Her tur bir harf ve tire ekler. Döngüden sonra slice sondaki tireyi atar — A-B-C görürsünüz. Önceki döngü derslerindeki yapıştırma fikri — şimdi dolaşım doğrudan değerler üzerinden.
const nums = [10, 20, 30];
for (let i = 0; i < nums.length; i++) {
console.log("i=" + i + " value=" + nums[i]);
}
for (const n of nums) {
console.log("value=" + n);
}
İndeks döngüsü ne zaman hâlâ yardım eder
Klasik for hem indeksi hem değeri basar. for...of yalnızca değerleri. Konum numarası lazım mı? İndeksli for kalsın. Yalnızca öğeler mi? for...of tercih edin.
for...of sonucunu sayfada gösterin
for...of ile dizide dolaşın, kısa bir satır kurun, sayfaya yazın.
<!DOCTYPE html>
<html>
<head>
<title>for...of — page list</title>
</head>
<body>
<p id="out">…</p>
<script>
const items = ["tea", "milk", "honey"];
let line = "";
for (const item of items) {
line = line + item + " ";
}
let box = document.getElementById("out");
box.textContent = "list=" + line.trim();
</script>
</body>
</html>
Sayfa list=tea milk honey gösterir. Dizideki bir girdiyi değiştirin, yenileyin, yeni satırı okuyun. Değerler için for...of, nesne anahtarları için for...in, indeks önemliyse klasik for. Sonraki: yolda döngüyü yönlendirmek için break ve continue.
Kendiniz deneyin
for...ofile["a", "b", "c"]içindeki her değeri loglayın.for...ofile"ok"içindeki her karakteri loglayın.{ x: 1, y: 2 }üzerindefor...inilekey=valueyazın.for...ofile["1", "2", "3"]ü1-2-3yapın.- İndeks ve değeri yan yana basan indeksli bir
foryazın. - HTML demosunda yalnızca diziyi değiştirin, yenileyin,
list=okuyun.
Sık hatalar
- Dizi değerleri isterken
for...inyazmak (for...ofgerekir) - Sade nesnede
for...ofkullanmak (yeni başlayan için öyle yinelenebilir değil) for...oftan0,1,2indeks beklemek — değer verir, indeks değilfor...insonrasıuser[key]unutup değer de varken yalnızca anahtar loglamak- Açık bir
for...ofdaha okunurken uzun indeks döngüsü yazmak
Özet
for...ofyinelenebilirlerin değerlerinde dolaşır (dizi, string)for...innesnelerin anahtarlarında dolaşır- İndeks numarası lazımsa klasik
forhâlâ yerinde - Tek süren koşul için
whilehâlâ yerinde - Gövdeye değer ekleyerek mesaj kurun
- Sonraki: break ve continue — turu durdurmak veya atlamak
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek