path: root/files/tr/web/javascript/guide/loops_and_iteration/index.html

---
title: Döngüler ve yinelemeler
slug: Web/JavaScript/Guide/Loops_and_iteration
translation_of: Web/JavaScript/Guide/Loops_and_iteration
---
<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Ifadeler", "Web/JavaScript/Guide/Functions")}}</div>

<p class="summary">Döngüler, bir işlemin art arda yapılması için hızlı ve kolay bir yöntem sunarlar. <a href="/tr/docs/Web/JavaScript/Guide">JavaScript Rehberi</a>'nin bu bölümünde, JavaScript içerisinde yer alan çeşitli yineleme ifadeleri anlatılacaktır.</p>

<p>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:</p>

<pre class="brush: js notranslate">var adım;
for (adım = 0; adım &lt; 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.');
}
</pre>

<p>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.</p>

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

<ul>
 <li>{{anch("for döngüsü")}}</li>
 <li>{{anch("do...while döngüsü")}}</li>
 <li>{{anch("while döngüsü")}}</li>
 <li>{{anch("Etiketlenmiş ifadeler")}}</li>
 <li>{{anch("break ifadesi")}}</li>
 <li>{{anch("continue ifadesi")}}</li>
 <li>{{anch("for...in ifadesi")}}</li>
 <li>{{anch("for...of ifadesi")}}</li>
</ul>

<h2 id="for_döngüsü"><code>for</code> döngüsü</h2>

<p>Bir {{jsxref("statements/for","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 <code>for</code> döngüsü, Java ve C dilindeki <code>for</code> döngüsü ile benzerdir. For döngüsünün söz dizimi aşağıdaki şekildedir:</p>

<pre class="syntaxbox notranslate">for ([başlangıçAtaması]; [koşulİfadesi]; [arttırımİfadesi])
  ifade
</pre>

<p>Bir <code>for</code> döngüsündeki algoritmanın adımları aşağıdaki şekildedir:</p>

<ol>
 <li>Bir <code>başlangıçAtaması</code> 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.</li>
 <li><code>koşulİfadesi</code> çalıştırılır. Eğer <code>koşulİfadesi</code> değeri <code>true</code> ise, <code>ifade</code> çalıştırılabilir. Eğer <code>koşulİfadesi</code> değeri <code>false</code> ise, <code>for</code> döngüsünden çıkılır. Eğer <code>koşulİfadesi</code> boş geçilirse, değeri her zaman true olarak varsayılır ve sonsuz döngü oluşturulmuş olur.</li>
 <li><code>ifade</code> çalıştırılır. Birden fazla ifade çalıştırılacaksa, ifadeleri gruplamak için blok ifadesi (<code>{ ... }</code>) kullanılır.</li>
 <li><code>arttırımİfadesi</code> varsa çalıştırılır ve 2 numaralı adıma geri dönülür.</li>
</ol>

<h3 id="Örnek"><strong>Örnek</strong></h3>

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

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

&lt;script&gt;
function kaçTane(müzikTürleri) {
  var seçilenMüzikSayısı = 0;
  for (var i = 0; i &lt; 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))
});
&lt;/script&gt;

</pre>

<h2 id="do...while_döngüsü"><code>do...while</code> döngüsü</h2>

<p>{{jsxref("statements/do...while", "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 <code>do...while</code> döngüsü aşağıdaki gibidir:</p>

<pre class="syntaxbox notranslate">do
  ifade
while (koşul);
</pre>

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

<h3 id="Örnek_1"><strong>Örnek 1</strong></h3>

<p>Aşağıdaki örnekte, <code>do</code> 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:</p>

<pre class="brush: js notranslate">var i = 0;
do {
  i += 1;
  console.log(i);
} while (i &lt; 5);
</pre>

<h2 id="while_döngüsü"><code>while</code> döngüsü</h2>

<p>Bir {{jsxref("statements/while","while")}} döngüsü, belirlenen koşul sağlandığı sürece çalıştırılmaya devam eder. Örnek bir <code>while</code> döngüsü aşağıdaki gibidir:</p>

<pre class="syntaxbox notranslate">while (koşul)
  ifade
</pre>

<p>Döngü içerisindeki <code>ifade</code> çalıştırılmadan önce <code>koşul</code> kontrol edilir. Eğer koşul sağlanırsa, <code>ifade</code> çalıştırılır ve koşul tekrar kontrol edilir. Eğer <code>koşul</code> 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.</p>

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

<h3 id="Örnek_1_2"><strong>Örnek 1</strong></h3>

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

<pre class="brush: js notranslate">var n = 0;
var x = 0;
while (n &lt; 3) {
  n++;
  x += n;
}
</pre>

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

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

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

<h3 id="Örnek_2"><strong>Örnek 2</strong></h3>

<p>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 <code>while</code> döngüsündeki ifade sonsuza dek çalışır, çünkü koşul asla false değerini alamaz:</p>

<pre class="brush: js notranslate">while (true) {
  console.log("Merhaba dünya");
}</pre>

<h2 id="Etiketlenmiş_ifadeler"><code>Etiketlenmiş ifadeler</code></h2>

<p>Bir {{jsxref("statements/label","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.</p>

<p>Etiketlenmiş bir ifade aşağıdaki şekildedir:</p>

<pre class="syntaxbox notranslate">etiket :
   çalıştırılacak_ifade
</pre>

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

<h3 id="Örnek_3"><strong>Örnek</strong></h3>

<p>Bu örnekte, <code>döngüyüİşaretle</code> etiketi <code>while</code> döngüsünü tanımlar.</p>

<pre class="brush: js notranslate"><code>döngüyüİşaretle</code>:
while (işaret == true) {
   merhabaDünya();
}</pre>

<h2 id="break_ifadesi"><code>break</code> ifadesi</h2>

<p>{{jsxref("statements/break","break")}} ifadesi kullanılarak bir döngüden, switch ifadesinden veya herhangi bir etiketlenmiş ifadeden çıkılabilir.</p>

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

<p><code>break</code> ifadesinin söz dizimi aşağıdaki gibidir:</p>

<pre class="syntaxbox notranslate">break [<em>etiket</em>];
</pre>

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

<h3 id="Örnek_1_3"><strong>Örnek 1</strong></h3>

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

<pre class="brush: js notranslate">for (var i = 0; i &lt; a.length; i++) {
  if (a[i] == <code>değer</code>) {
    break;
  }
}</pre>

<h3 id="Örnek_2_Bir_etiketten_çıkma"><strong>Örnek 2: </strong>Bir etiketten çıkma</h3>

<pre class="brush: js notranslate">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 &amp;&amp; x === 10) {
      break döngüdenÇıkmaEtiketi;
    } else if (z === 10) {
      break;
    }
  }
}
</pre>

<h2 id="continue_ifadesi"><code>continue</code> ifadesi</h2>

<p>{{jsxref("statements/continue","continue")}} ifadesi; <code>while</code>, <code>do-while</code>, <code>for</code>, veya etiketlenmiş ifadelere tekrar girilmesini sağlar.</p>

<ul>
 <li><code>continue</code> 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. <code>continue, break </code>ifadesinin tam tersine döngüyü tamamen sonlandırmaz. Örneğin <code>while</code> döngüsünde, koşul kontrolüne geri döner. <code>for</code> döngüsünde ise <code>arttırım-ifadesi</code>'ne döner.</li>
 <li><code>continue</code> ifadesi bir etiket ile kullanılırken, etiket ile tanımlı olan döngünün devam etmesini sağlar.</li>
</ul>

<p><code>continue</code> ifadesinin söz dizimi aşağıdaki gibidir:</p>

<pre class="syntaxbox notranslate">continue [<em>etiket</em>];
</pre>

<h3 id="Örnek_1_4"><strong>Örnek 1</strong></h3>

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

<pre class="brush: js notranslate">var i = 0;
var n = 0;
while (i &lt; 5) {
  i++;
  if (i == 3) {
    continue;
  }
  n += i;
}
</pre>

<h3 id="Örnek_2_2"><strong>Örnek 2</strong></h3>

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

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

<pre class="brush: js notranslate"><code>kontrolivej</code>:
  while (i &lt; 4) {
    console.log(i);
    i += 1;
    <code>kontrolj</code>:
      while (j &gt; 4) {
        console.log(j);
        j -= 1;
        if ((j % 2) == 0) {
          continue <code>kontrolj</code>;
        }
        console.log(j + " tek sayıdır.");
      }
      console.log("i = " + i);
      console.log("j = " + j);
  }</pre>

<h2 id="for...in_ifadesi"><code>for...in</code> ifadesi</h2>

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

<pre class="syntaxbox notranslate">for (değişken in nesne) {
  çalıştırılacak_ifadeler
}
</pre>

<h3 id="Örnek_4"><strong>Örnek</strong></h3>

<p>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. </p>

<pre class="brush: js notranslate">function özellikleriListeOlarakVer(nesne, nesnenin_adi) {
  var sonuç = "";
  for (var i in nesne) {
    sonuç += nesnenin_adi + "." + i + " = " + nesne[i] + "&lt;br&gt;";
  }
  sonuç += "&lt;hr&gt;";
  return sonuç;
}
</pre>

<p><code>marka</code> <font face="Consolas, Liberation Mono, Courier, monospace">ve</font> <code>model</code> özelliklerini içeren bir <code>araba</code> nesnesi için <code>sonuç</code>, aşağıdaki şekilde olacaktır:</p>

<pre class="brush: js notranslate">araba.marka = Tesla
araba.model = Model S
</pre>

<h3 id="Dizilerde_kullanımı"><strong>Dizilerde kullanımı</strong></h3>

<p>{{jsxref("Array")}} elemanlarında dolaşmak için <strong>for...in </strong>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 {{jsxref("statements/for","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</p>

<h2 id="for...of_ifadesi"><code>for...of</code> ifadesi</h2>

<p>{{jsxref("statements/for...of","for...of")}} ifadesi bir döngü oluşturur ve <a href="/tr/docs/Web/JavaScript/Guide/iterable">gezilebilir (iterable) nesneler</a> ({{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("functions/arguments","arguments")}} nesnesi vb.) üzerinde gezer.</p>

<pre class="syntaxbox notranslate">for (değişken of nesne) {
  çalıştırılacak_ifadeler<em>
</em>}</pre>

<p>Aşağıdaki örnekte, <code>for...of</code> döngüsü ve {{jsxref("statements/for...in","for...in")}} döngüsü arasındaki fark gösterilmektedir. <code>for...in</code> döngüsü nesne değişkenlerinin isimleri üzerinde gezerken, <code>for...of</code> döngüsü ise değişkenlerin değerleri üzerinde gezer:</p>

<pre class="brush:js notranslate">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
}
</pre>

<p>{{PreviousNext("Web/JavaScript/Guide/Ifadeler", "Web/JavaScript/Guide/Functions")}}</p>