JavaScript Döngüleri: for, while, for...of ve for...in

Sürüm notu: Bu yazıdaki kodlar ES2026 ve güncel tarayıcılar (Chrome, Edge, Firefox, Safari) içindir.

Önce Tahmin Et

Üç harflik bir array'imiz var ve her element'in sırasını bir artırarak yazdırmak istiyoruz:

const letters = ["a", "b", "c"];
for (const i in letters) {
  console.log(i + 1);
}

Bu döngü konsola ne yazdırır? 1, 2, 3 mü? Okumaya devam etmeden önce bir tahmin yap. Cevabı, for...in'in neyin üzerinde döndüğünü konuşurken vereceğiz.

for: Sayaçlı Döngü

Bir işi beş kez yapmak için aynı satırı beş kez yazabilirsin. Peki beş yüz kez? Döngüler, bir kod bloğunu bir koşul sürdükçe tekrar tekrar çalıştırmanı sağlar. En klasik olanı for. Bunu tarayıcının konsoluna yapıştırıp dene:

for (let i = 1; i <= 5; i++) {
  console.log("Lap " + i);
}

Konsolda "Lap 1"'den "Lap 5"'e kadar beş satır görürsün. Parantezin içinde noktalı virgülle ayrılmış üç parça var. let i = 1 başlangıçtır ve yalnızca bir kez, en başta çalışır. i <= 5 koşuldur; her turdan önce kontrol edilir, false olduğu anda döngü biter. i++ de her turun sonunda çalışan adımdır.

Bunu bir koşu pistindeki tur sayacı gibi düşün. Başlangıçta sayaç sıfırlanır. Her turun başında hakem "daha koşacak tur var mı?" diye bakar; varsa koşucu bir tur atar, sayaç bir artar. Cevap "hayır" olduğu an yarış biter. Motor da tam olarak bunu yapar: başlat, kontrol et, çalıştır, adım at, tekrar kontrol et.

Üç parça tamamen senin elinde. Geriye doğru sayabilir, üçer üçer ilerleyebilirsin:

for (let i = 10; i > 0; i -= 3) {
  console.log(i);
}

Çıktı 10, 7, 4, 1. Bir sonraki adımda i -2 olur, koşul tutmaz ve döngü biter.

for'un en yaygın kullanımı bir array'in element'lerini sırayla gezmektir. Array'lerde ilk element 0. sıradadır ve length element sayısını verir; ikisini de array'ler yazısında detaylandıracağız:

const cities = ["Ankara", "Izmir", "Bursa"];
for (let i = 0; i < cities.length; i++) {
  console.log("City " + i + ": " + cities[i]);
}

Koşulun i < cities.length olduğuna dikkat et. Üç element'li bir array'de son index 2'dir. <= yazsaydın döngü bir tur fazla döner ve son turda undefined yazdırırdı.

while: Koşul Sürdükçe

for, kaç tur döneceğini baştan bildiğin durumlar için rahattır. Bazen ise tur sayısını bilmezsin, sadece ne zaman durman gerektiğini bilirsin. O zaman while daha doğal okunur:

let value = 1;
let steps = 0;
while (value <= 1000) {
  value *= 2;
  steps++;
}
console.log(value, steps);

"Değer 1000'i geçene kadar ikiye katla" dedik. Çıktı 1024 10: on adımda 1000'i aştık. while her turdan önce koşula bakar; koşul baştan false ise blok bir kez bile çalışmaz. Değişkenleri döngüden önce hazırlamak ve döngünün içinde koşulu değiştirecek bir şey yapmak senin sorumluluğun. Bunu unutursan nereye varacağını yazının sonunda göreceğiz.

do...while: En Az Bir Kez

do...while, while'ın ters çevrilmiş hâlidir: önce bloğu çalıştırır, koşula sonra bakar. Bu yüzden blok her durumda en az bir kez çalışır. Farkı görmek için ikisini aynı koşulla yan yana koyalım:

let a = 10;
do {
  console.log("do...while ran:", a);
  a++;
} while (a < 5);

let b = 10;
while (b < 5) {
  console.log("while ran:", b);
  b++;
}

Konsolda yalnızca "do...while ran: 10" görürsün. Koşul baştan yanlış olmasına rağmen do bloğu bir kez çalıştı; while ise hiç içeri girmedi. Gerçek hayatta "önce bir kez dene, sonucuna göre tekrar et" türünden işler için uygundur, örneğin kullanıcıdan geçerli bir cevap gelene kadar soruyu yeniden sormak. Pratikte for ve while'dan çok daha seyrek göreceksin.

for...of: Değerlerin Üzerinde

Bir array'in element'lerini gezerken çoğu zaman index'e ihtiyacın yoktur, sadece değerleri istersin. ES2015 ile gelen for...of tam bunun için var:

const fruits = ["apple", "pear", "banana"];
for (const fruit of fruits) {
  console.log(fruit);
}

for (const letter of "kiwi") {
  console.log(letter);
}

İlk döngü üç meyveyi, ikincisi "k", "i", "w", "i" harflerini sırayla yazdırır. Sayaç yok, koşul yok, length yok; "bu koleksiyondaki her şey için" demek yeterli. Hata yapacak yer de kalmıyor.

Burada const kullanabildiğimize dikkat et. for...of her turda yeni bir değişken oluşturur ve o turun değerini ona bağlar; değişkeni hiç yeniden atamadığımız için const uygundur. Klasik for'da ise sayacı i++ ile değiştirdiğin için let şarttır.

for...of array'ler ve string'ler gibi iterable denen yapılarla çalışır. Düz bir object'le denersen TypeError: user is not iterable gibi bir hata alırsın. Iterable kavramını ilerleyen yazılarda detaylandıracağız; object'leri gezmek için ise başka bir döngümüz var.

for...in: Object'in Key'leri

for...in bir object'in property isimlerini, yani key'lerini tek tek verir:

const user = { name: "Ada", city: "Izmir", age: 31 };
for (const key in user) {
  console.log(key + ": " + user[key]);
}

Çıktı name: Ada, city: Izmir, age: 31. Döngü değişkeni anahtarın adını tutar; değere ulaşmak için köşeli parantezle user[key] yazıyoruz. Object'lerin bu yazımını object'ler yazısında detaylandıracağız.

Şimdi baştaki soruya dönelim. Cevap 1, 2, 3 değil; 01, 11 ve 21. Array de bir object olduğu için for...in onun key'lerini verir. Array'in key'leri da index'lerdir, ama sayı olarak değil, string olarak: "0", "1", "2". Daha önce gördüğümüz gibi string ile sayıyı + ile buluşturursan toplama değil birleştirme olur ve "0" + 1 sonucu "01" çıkar.

Array'lerde for...in kullanmamanın tek nedeni bu değil. Array'e sonradan eklenmiş başka bir property varsa onu da gezer:

const grades = [90, 75, 60];
grades.note = "midterm grades";
for (const key in grades) {
  console.log(key);
}
for (const grade of grades) {
  console.log(grade);
}

İlk döngü 0, 1, 2 ve note yazdırır; ikincisi yalnızca 90, 75, 60. Kural kısa: object'lerde for...in, array'lerde ve string'lerde for...of. Index'e de ihtiyacın varsa klasik for.

break ve continue

Bazen döngünün sonuna kadar beklemek istemezsin. break döngüyü o anda tamamen bitirir, continue ise sadece o turu atlayıp bir sonrakine geçer:

const numbers = [4, 7, -2, 9, -5];
for (const num of numbers) {
  if (num < 0) {
    console.log("First negative number:", num);
    break;
  }
}

for (let i = 1; i <= 6; i++) {
  if (i % 2 === 0) {
    continue;
  }
  console.log(i);
}

İlk döngü -2'yi bulduğu anda durur; 9 ve -5'e hiç bakmaz. Aradığını bulduktan sonra listenin geri kalanını gezmek boşa iştir. İkinci döngü çift sayıları atlar ve yalnızca 1, 3, 5 yazdırır. Daha önce gördüğümüz koşullar ve % operatörü burada birlikte çalışıyor.

continue'yu az kullan. Kısa döngülerde okunaklıdır, ama uzun bir bloğun ortasına gizlenmiş bir continue okuyanın hangi satırların atlandığını kaçırmasına yol açar.

Sonsuz Döngü ve Diğer Tuzaklar

Döngünün koşulu hiç false olmazsa döngü hiç bitmez. JavaScript tarayıcıda sayfanın geri kalanıyla aynı yerde çalıştığı için, sonsuz döngü bütün sekmeyi kilitler: butonlar tıklanmaz, sayfa kaydırılmaz. Bir süre sonra tarayıcı sayfanın yanıt vermediğini söyler ve sekmeyi kapatmanı önerir. Geliştirici araçları açıksa Sources panelindeki duraklat düğmesiyle kodu durdurmayı da deneyebilirsin. En sık üç sebebi var:

Adımı unutmak. while (counter < 10) { console.log(counter); } yazıp içeride counter'ı artırmazsan koşul sonsuza kadar true kalır. while yazdığında ilk iş, koşulu değiştirecek satırın nerede olduğunu kendine sor.

Yanlış yöne gitmek. for (let i = 0; i < 10; i--) sayacı azaltır, i hep 10'dan küçük kalır. Koşul ile adımın aynı yöne baktığından emin ol.

Hedefin üstünden atlamak. for (let i = 0; i !== 10; i += 3) 0, 3, 6, 9 ve 12'ye gider; 10'a hiç uğramaz ve !== hep doğru kalır. Eşitlik yerine < ya da > ile sınır koymak daha güvenlidir.

Bunların dışında iki küçük tuzak daha var. Klasik for'da sayacı const ile tanımlarsan ilk tur çalışır, ardından i++ denenince TypeError: Assignment to constant variable. alırsın. Bir de array gezerken koşula <= yazmak, yukarıda gördüğümüz gibi son turda undefined ile karşılaşmana yol açar.

Sonsuz döngüyü güvenle denemek istersen, döngüye bir emniyet kemeri tak: bir tur sayacı tutup sayaç 1000'i geçtiğinde break ile çık. Böylece hata yapsan bile sekmen kilitlenmez.

Küçük Bir Deneme

★☆☆ for ile 1'den 10'a kadar sayıların toplamını hesapla ve sonucu konsola yazdır. Aynı toplamı bir de while ile hesapla.

★★☆ Çalıştırmadan önce çıktıyı tahmin et:

for (let i = 0; i < 10; i += 3) {
  if (i === 6) {
    continue;
  }
  console.log(i);
}

★★☆ const product = { name: "Notebook", price: 40, stock: 12 }; object'inin her anahtarını ve değerini for...in ile yazdır. Sonra aynı şeyi for...of ile denemeye çalış ve aldığın hatayı oku.

★★★ "hello world" string'ini for...of ile gez ve içindeki sesli harfleri (a, e, i, o, u) say. Boşluğa geldiğinde continue ile o turu atla. İlk "w" harfini gördüğünde break ile durursan sonuç kaç olur? Önce tahmin et, sonra dene.

for...of ile bir string'i harf harf gezdik, ama string'lerin asıl gücünü henüz görmedik. Bir sonraki yazıda string'lere odaklanacağız: tırnak türleri, template literal, en sık kullanılan string method'ları ve string'lerin neden değiştirilemediği.