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

eminbasbayan

4 dk okuma

🔍 Büyütmek için tıklayın

İçindekiler

Bu yazıda neler var?

JavaScript öğrenmeye başlayan herkesin karşılaştığı temel konulardan biri döngülerdir. Döngüler, bir işlemi tekrar tekrar yapmak istediğimizde kodumuzu daha kısa, düzenli ve anlaşılır hale getirir. Bu yazıda JavaScript’in modern döngülerinden biri olan for...of yapısını ele alacağız. Anlatım boyunca sade, örneklerle desteklenmiş ve yalnızca bu yapıya odaklanan bir yaklaşım izleyeceğiz. Diğer döngü türlerine veya ileri düzey JavaScript konularına girmeyeceğiz.

1. Döngülerin Amacı: Aynı İşlemi Tekrar Etmek

Programlama yaparken bazı işlemleri birden fazla kez gerçekleştirmemiz gerekir. Örneğin bir öğrenciler listesi varsa ve her bir öğrencinin adını ekrana yazdırmak istiyorsak, her birini tek tek console.log ile yazmak yerine bir döngü kullanabiliriz. İşte burada döngüler devreye girer.

2. Klasik Yöntem: for Döngüsü ile Listeyi Gezinmek

Diyelim ki elimizde bir kitap listesi var:

const kitaplar = ["Kürk Mantolu Madonna", "Simyacı", "Tutunamayanlar", "Sinekli Bakkal"];

Bu listeyi klasik for döngüsü ile gezmek isteseydik şöyle bir kod yazmamız gerekirdi:

for (let i = 0; i < kitaplar.length; i++) {
  console.log("Kitap: " + kitaplar[i]);
}

Bu yöntem işe yarasa da kodun içinde i adında bir sayaç tanımlıyoruz, sonra bu sayaçla liste elemanlarına ulaşıyoruz. Aslında i değişkeninin kendisiyle pek ilgilenmiyoruz; onu sadece elemanlara ulaşmak için kullanıyoruz. Bu da hem kodu uzatıyor hem de okumayı biraz zorlaştırıyor.

3. Daha Temiz Bir Yol: `for...of` ile Listeyi Gezinmek

İşte bu noktada for...of döngüsü devreye giriyor. for...of, diziler gibi tekrarlanabilir (iterable) yapıları çok daha sade ve okunabilir bir şekilde döndürmemizi sağlar.

Aynı örneği for...of ile yeniden yazalım:

for (let kitap of kitaplar) {
  console.log("Kitap: " + kitap);
}

Bu kodda:

kitaplar listesi üzerinde dönüyoruz,
Her döngü adımında kitap değişkeni, listedeki bir öğeyi temsil ediyor.

Burada artık i gibi bir indeks tutmamıza gerek yok. Kod daha temiz, anlaşılır ve hata yapma olasılığı daha düşük.

4. Değişken İsimleri Esnektir

for...of döngüsünde kullandığımız değişken ismi tamamen bizim tercihimizedir. Yukarıdaki örnekte kitap yazdık ama bu isme siz istediğiniz anlamlı bir ismi verebilirsiniz:

for (let eser of kitaplar) {
  console.log("Eser: " + eser);
}

Burada da aynı işlem gerçekleşir. Yeter ki yazdığınız isim, kodunuzun okunabilirliğini artırsın.

5. İç İçe `for...of` Kullanımı: Çok Boyutlu Listeler

Bazı durumlarda elimizde iki boyutlu listeler olabilir. Örneğin bir okulda sınıflar ve her sınıfta öğrenciler olduğunu düşünelim:

const siniflar = [
  ["Mert", "Zeynep"],
  ["Berk", "Ece"],
  ["İrem", "Yusuf"]
];

Bu durumda, her sınıfın içindeki öğrencileri listelemek istiyorsak iç içe for...of kullanabiliriz:

for (let sinif of siniflar) {
  for (let ogrenci of sinif) {
    console.log("Öğrenci: " + ogrenci);
  }
}

Dış döngü her bir sınıfı (sinif) döner.
İç döngü o sınıftaki her öğrenciyi (ogrenci) tek tek döner.

Kod çok okunabilir, sade ve net olur. Özellikle çok katmanlı veri yapılarında bu yapı büyük kolaylık sağlar.

6. Diziler Dışında Kullanımı: String Üzerinde `for...of`

Sadece diziler değil, bazı başka veri türleri de for...of ile gezilebilir. Bunlardan biri de string türüdür. Bir string, karakterlerden oluşur ve bu karakterler sırayla gezilebilir.

const kelime = "JavaScript";

for (let harf of kelime) {
  console.log(harf);
}

Bu kodda:

kelime adlı string’in her harfi sırayla harf değişkenine atanır,
Her biri ekrana yazdırılır.

Çıktı şu şekilde olur:

J
a
v
a
S
c
r
i
p
t

7. Dikkat: Nesnelerde `for...of` Kullanılmaz

Yeni başlayanların sıkça yaptığı hatalardan biri de for...of döngüsünü nesnelerle kullanmaya çalışmaktır. Örneğin aşağıdaki kod çalışmaz ve hata verir:

const ogrenci = {
  isim: "Ahmet",
  yas: 17
};

for (let bilgi of ogrenci) {
  console.log(bilgi);
}

Bu hata verir çünkü nesneler (object), JavaScript’e göre "iterable" değildir. for...of, sadece diziler, stringler ve bazı özel yapılar (Map, Set gibi) üzerinde kullanılabilir. Nesneleri gezmek için başka döngüler vardır, ancak bu makalenin kapsamı dışında kalır.

8. Sonuç: `for...of` Neden Tercih Edilmeli?

Daha kısa ve okunabilir kod yazmanızı sağlar.
İndeks (i) ile uğraşmadan doğrudan veriyle çalışmanızı mümkün kılar.
İç içe yapılarla kullanımda oldukça temiz bir görünüm sunar.
String gibi diğer gezilebilir yapılarla da uyumludur.

Özellikle listedeki elemanları sırayla işlemek istiyorsanız, for...of döngüsü klasik for döngüsüne göre çok daha uygundur. JavaScript’in modern sürümlerinde yaygın olarak kullanılmaktadır ve yazdığınız kodun hem okunabilirliğini hem de bakım kolaylığını artırır.

Özetle: Eğer bir dizi, string ya da gezilebilir başka bir yapı üzerinde sırayla işlem yapmak istiyorsanız, for...of döngüsü en sade ve etkili yoldur. Hem yeni başlayanlar hem de deneyimli geliştiriciler için önerilen bir yapıdır.