Döngüler ve yinelemeler

Döngüler, bir işlemin art arda yapılması için hızlı ve kolay bir yöntem sunarlar. JavaScript Rehberi'nin bu bölümünde, JavaScript içerisinde yer alan çeşitli yineleme ifadeleri anlatılacaktır.

Döngüleri şu şekildeki basit bir bilgisayar oyunu olarak düşünebilirsiniz: Doğu yönünde 5 adım ilerle ve devamında batı yönünde 3 adım ilerleyerek hazineyi bul. Bu fikri basitçe kodlamak gerekirse:

var adım;
for (adım = 0; adım < 5; adım++) {
  // 5 defa ekrana yazıyor
  // adım 0'dan 4'e kadar değerler alıyor.
  console.log('Doğu yönünde bir adım atılıyor.');
}

Birçok döngü türü vardır, fakat özünde hepsi aynı şeyi yaparlar: ardı ardına belirlenen bir işlemi gerçekleştirirler. Genelde gerçekleştirilen işlem adımı 0'dan başlar. Döngünün bitiş ve başlangıç noktalarının belirlenmesi için çeşitli döngü mekanizmaları mevcuttur. Bir döngünün diğer döngülere göre daha avantajlı olmasını sağlayan farklı durumlar vardır.

JavaScript'teki döngü ifadeleri aşağıdaki şekilde listelenmiştir:

• for döngüsü
• do...while döngüsü
• while döngüsü
• Etiketlenmiş ifadeler
• break ifadesi
• continue ifadesi
• for...in ifadesi
• for...of ifadesi

Bir for döngüsü, belirlenen koşul sağlandığı sürece içerdiği komutların çalıştırılmasını sağlar. JavaScript'teki for döngüsü, Java ve C dilindeki for döngüsü ile benzerdir. For döngüsünün söz dizimi aşağıdaki şekildedir:

for ([başlangıçAtaması]; [koşulİfadesi]; [arttırımİfadesi])
  ifade

Bir for döngüsündeki algoritmanın adımları aşağıdaki şekildedir:

1. Bir başlangıçAtaması ifadesi varsa çalıştırılır. Bu ifadede genellikle bir veya daha fazla döngü sayıcısına atama işlemi yapılır. Ayrıca değişken tanımı da yapılabilir.
2. koşulİfadesi çalıştırılır. Eğer koşulİfadesi değeri true ise, ifade çalıştırılabilir. Eğer koşulİfadesi değeri false ise, for döngüsünden çıkılır. Eğer koşulİfadesi boş geçilirse, değeri her zaman true olarak varsayılır ve sonsuz döngü oluşturulmuş olur.
3. ifade çalıştırılır. Birden fazla ifade çalıştırılacaksa, ifadeleri gruplamak için blok ifadesi ({ ... }) kullanılır.
4. arttırımİfadesi varsa çalıştırılır ve 2 numaralı adıma geri dönülür.

Aşağıdaki fonksiyon, scroll'lanabilen bir listedeki seçilen değerlerin sayısını sayan bir for ifadesi içerir (buradaki liste, çoklu seçimler yapabilmeye izin veren bir <select> elemanıdır) . for ifadesinde i değişkeni tanımlanır ve sıfır değeri atanır. i'nin değerinin, <select> elemanındaki <option> elemanlarının sayısından daha az olup olmadığı kontrol edilir, if ifadesini çalıştırılır, ve döngü her tamamlandığında i değişkeni bir arttırılır.

<form name="selectForm">
  <p>
    <label for="müzikTürleri">Sevdiğiniz müzik türlerini seçip aşağıdaki butona basınız:</label>
    <select id="müzikTürleri" name="müzikTürleri" multiple="multiple">
      <option selected="selected">Pop</option>
      <option>Rap</option>
      <option>Rock</option>
      <option>Arabesk</option>
      <option>Türk Sanat Müziği</option>
      <option>Klasik Müzik</option>
    </select>
  </p>
  <p><input id="btn" type="button" value="Kaç tanesi seçildi?" /></p>
</form>

<script>
function kaçTane(müzikTürleri) {
  var seçilenMüzikSayısı = 0;
  for (var i = 0; i < müzikTürleri.options.length; i++) {
    if (müzikTürleri.options[i].selected) {
      seçilenMüzikSayısı++;
    }
  }
  return seçilenMüzikSayısı;
}

var btn = document.getElementById("btn");
btn.addEventListener("click", function(){
  alert('Seçilen müzik türü sayısı: ' + kaçTane(document.selectForm.müzikTürleri))
});
</script>

do...while döngüsü, belirlenen bir koşul sağlandığı sürece döngünün çalıştırılmasına olanak tanır. Bir do...while döngüsü aşağıdaki gibidir:

do
  ifade
while (koşul);

koşul kontrol edilmeden hemen önce ifade çalıştırılır. Çoklu ifadelerin çalıştırılması için, blok ifadesi ({...}) kullanılarak ifadeler gruplandırılır. Eğer koşul sağlanırsa, ifade tekrar çalıştırılır. Çalıştırıldıktan sonra, koşul tekrar kontrol edilir. Eğer koşul sağlanmazsa, ifadenin çalıştırılması durdurulur ve do...while döngüsünden sonraki komutlar çalıştırılır. koşul kontrol edilmeden hemen önce ifade çalıştırıldığı için, koşul değeri false olsa bile blok satırınız içerisindeki kodlar 1 defa çalıştırılır.

Aşağıdaki örnekte, do döngüsü en az bir kere çalıştırılır, ve i değişkeninin değeri 5'ten küçük olduğu sürece çalıştırma devam eder:

var i = 0;
do {
  i += 1;
  console.log(i);
} while (i < 5);

Bir while döngüsü, belirlenen koşul sağlandığı sürece çalıştırılmaya devam eder. Örnek bir while döngüsü aşağıdaki gibidir:

while (koşul)
  ifade

Döngü içerisindeki ifade çalıştırılmadan önce koşul kontrol edilir. Eğer koşul sağlanırsa, ifade çalıştırılır ve koşul tekrar kontrol edilir. Eğer koşul sağlanmazsa, döngü içerisindeki ifadenin çalıştırılması durdurulur ve while döngüsünden çıkılarak sonraki komutlar çalıştırılır.

Çoklu ifadelerin çalıştırılması için, blok ifadesi ({...}) kullanılarak ifadeler gruplanır.

Aşağıdaki while döngüsü, n değişkeni 3'ten küçük olduğu sürece çalıştırılır:

var n = 0;
var x = 0;
while (n < 3) {
  n++;
  x += n;
}

Her döngüde, n değişkeninin değeri 1 arttırılır ve x'e eklenir. Bunun sonucunda x ve n değişkenleri aşağıdaki değerleri alırlar:

• İlk kez döngü çalıştırılıp tamamlandığında: n = 1 ve x = 1
• 2. kez tamamlandığında: n = 2 ve x = 3
• 3. kez tamamlandığında: n = 3 ve x = 6

3. kez döngü çalıştırılıp tamamlandığında, n < 3 koşulu artık true değerini almaz ve döngüden çıkılır.

Sonsuz döngülerden uzak durulmalıdır. Döngü içerisindeki koşulun, eninde sonunda false değerini alacağı emin olunmalıdır; aksi taktirde, döngü sonsuza dek çalışır. Aşağıdaki while döngüsündeki ifade sonsuza dek çalışır, çünkü koşul asla false değerini alamaz:

while (true) {
  console.log("Merhaba dünya");
}

Bir etiketlenmiş ifadede , bir anahtar kelime ve bu kelimeye bağlı çalıştırılacak bir ifade bulunur.Anahtar kelime kullanılarak, program içerisindeki herhangi bir yerde, anahtar kelime ile ilişkili ifade çalıştırılabilir. Örneğin, bir döngü, anahtar kelime ile etiketlenerek, uygulama içerisindeki herhangi bir yerden çalıştırılabilir.

Etiketlenmiş bir ifade aşağıdaki şekildedir:

etiket :
   çalıştırılacak_ifade

Etiket adı, herhangi bir değişken adının aldığı şekilde değerler alabilir. Etiket ile tanımlanan çalıştırılacak_ifade içerisinde herhangi bir komut yer alabilir.

Bu örnekte, döngüyüİşaretle etiketi while döngüsünü tanımlar.

döngüyüİşaretle:
while (işaret == true) {
   merhabaDünya();
}

break ifadesi kullanılarak bir döngüden, switch ifadesinden veya herhangi bir etiketlenmiş ifadeden çıkılabilir.

• Etiket olmayan bir blokta break ifadesini kullandığınızda, break'i çevreleyen en içteki while, do-while, for, veya switch ifadesinden çıkılır ve koddaki sonraki komutların çalıştırılmasına devam edilir.
• Etiket olan bir blokta break ifadesini kullanıldığında, etiketlenmiş olan ifadeden çıkılır.

break ifadesinin söz dizimi aşağıdaki gibidir:

break [etiket];

Bu söz diziminin ilk ifadesi (break) ile, break'i çevreleyen en içteki döngü veya switch'ten çıkılır; ikinci ifade ([etiket]) ile belirlenen etiketten çıkılması sağlanır.

Aşağıdaki örnekte, değer'e eşit olan dizi elemanı bulununcaya dek dizi içerisindeki elemanlar bir döngüde gezilir.

for (var i = 0; i < a.length; i++) {
  if (a[i] == değer) {
    break;
  }
}

var x = 0;
var z = 0;

döngüdenÇıkmaEtiketi: while (true) {
  console.log("Dıştaki döngüler: " + x);
  x += 1;
  z = 1;
  while (true) {
    console.log("İçteki döngüler: " + z);
    z += 1;
    if (z === 10 && x === 10) {
      break döngüdenÇıkmaEtiketi;
    } else if (z === 10) {
      break;
    }
  }
}

continue ifadesi; while, do-while, for, veya etiketlenmiş ifadelere tekrar girilmesini sağlar.

• continue ifadesini herhangi bir etiket belirtmeden tek başına kullanırsanız, kendisini çevreleyen döngü bloğundaki sonraki ifadelerin çalıştırılmasını sonlandırır, ve sonraki iterasyon ile birlikte döngünün çalışmasına devam edilir. continue, break ifadesinin tam tersine döngüyü tamamen sonlandırmaz. Örneğin while döngüsünde, koşul kontrolüne geri döner. for döngüsünde ise arttırım-ifadesi'ne döner.
• continue ifadesi bir etiket ile kullanılırken, etiket ile tanımlı olan döngünün devam etmesini sağlar.

continue ifadesinin söz dizimi aşağıdaki gibidir:

continue [etiket];

Aşağıdaki örnekte yer alan while döngüsündeki continue ifadesi, i'nin değeri yalnızca 3 olduğunda çalıştırılmaktadır. Böylece n, sırasıyla şu değerleri alır: 1, 3, 7, 12.

var i = 0;
var n = 0;
while (i < 5) {
  i++;
  if (i == 3) {
    continue;
  }
  n += i;
}

Aşağıdaki örnekte bulunan kontrolivej etiketinde yer alan ifadede, kontrolj etiketli diğer bir ifade yer almaktadır. Eğer continue ifadesi ile karşılaşılırsa, uygulama kontrolj'nin o anki döngüsünü sonlandırır ve sonraki iterasyona geçer. Her continue ifadesi ile karşılaşıldığında, kontrolj döngüsü false değerini döndürene dek  devam eder. false döndürdüğünde, döngüden çıkılır ve döngüden sonra gelen kontrolivej ifadesinin kalan kısmı tamamlanır. kontrolivej döngüsüne tekrar girilir. i değişkeni 4'ten büyük oluncaya dek kontrolivej etiketinin çalıştırılmasına devam ettirilir.

Eğer continue ifadesi, kontrolj etiketi yerine kontrolivej etiketini içerseydi, program kontrolivej ifadesinin altındaki while döngüsünden devam edecekti.

kontrolivej:
  while (i < 4) {
    console.log(i);
    i += 1;
    kontrolj:
      while (j > 4) {
        console.log(j);
        j -= 1;
        if ((j % 2) == 0) {
          continue kontrolj;
        }
        console.log(j + " tek sayıdır.");
      }
      console.log("i = " + i);
      console.log("j = " + j);
  }

for...in döngüsü, bir nesnenin sayılabilir (enumerable) özelliklerinin üzerinde dolaşılmasını sağlar. Her bir özellik için JavaScript, belirlenen ifadeleri çalıştırır. Bir for...in döngüsü aşağıdaki şekilde oluşturulur:

for (değişken in nesne) {
  çalıştırılacak_ifadeler
}

Aşağıdaki fonksiyon, bir nesne ve nesnenin adını parametre olarak alır. Sonrasında nesnenin tüm özellikleri üzerinde gezer ve nesnede bulunan özelliklerin adını ve değerini listeleyen bir string döndürür. 

function özellikleriListeOlarakVer(nesne, nesnenin_adi) {
  var sonuç = "";
  for (var i in nesne) {
    sonuç += nesnenin_adi + "." + i + " = " + nesne[i] + "<br>";
  }
  sonuç += "<hr>";
  return sonuç;
}

marka ve model özelliklerini içeren bir araba nesnesi için sonuç, aşağıdaki şekilde olacaktır:

araba.marka = Tesla
araba.model = Model S

Array elemanlarında dolaşmak için for...in kullanımı çok cazip gözükse de for...in ifadesi, sayısal indekslere ek olarak kullanıcı tanımlı özelliklerin de isimlerini döndürür. Bu yüzden dizi üzerinde gezmek için, sayısal indeksler ile birlikte kullanılan geleneksel for döngüsü daha elverişlidir. Çünkü örneğin bir Array nesnesinine özel bir değişken veya fonksiyon eklerseniz, for...in ifadesi dizi elemanlarının yanısıra eklediğiniz kullanıcı tanımlı özellikleri de getirir

for...of ifadesi bir döngü oluşturur ve gezilebilir (iterable) nesneler (Array, Map, Set, arguments nesnesi vb.) üzerinde gezer.

for (değişken of nesne) {
  çalıştırılacak_ifadeler
}

Aşağıdaki örnekte, for...of döngüsü ve for...in döngüsü arasındaki fark gösterilmektedir. for...in döngüsü nesne değişkenlerinin isimleri üzerinde gezerken, for...of döngüsü ise değişkenlerin değerleri üzerinde gezer:

let dizi = [3, 5, 7];
dizi.selam = "merhaba";

for (let i in dizi) {
   console.log(i); // Çıktısı: "0", "1", "2", "selam"
   console.log(typeof i); //string tipi
}

for (let i of dizi) {
   console.log(i); // Çıktısı: 3, 5, 7
   console.log(typeof i); //degiskenin sahip old. tip
}