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ü
Bir for
(en-US) 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:
- 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. koşulİfadesi
çalıştırılır. Eğerkoşulİfadesi
değeritrue
ise,ifade
çalıştırılabilir. Eğerkoşulİfadesi
değerifalse
ise,for
döngüsünden çıkılır. Eğerkoşulİfadesi
boş geçilirse, değeri her zaman true olarak varsayılır ve sonsuz döngü oluşturulmuş olur.ifade
çalıştırılır. Birden fazla ifade çalıştırılacaksa, ifadeleri gruplamak için blok ifadesi ({ ... }
) kullanılır.arttırımİfadesi
varsa çalıştırılır ve 2 numaralı adıma geri dönülür.
Örnek
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> (en-US) 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> (en-US) 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ü
do...while
(en-US) 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.
Örnek 1
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);
while
döngüsü
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.
Örnek 1
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 vex
= 1 - 2. kez tamamlandığında:
n
= 2 vex
= 3 - 3. kez tamamlandığında:
n
= 3 vex
= 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.
Örnek 2
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");
}
Etiketlenmiş ifadeler
Bir etiketlenmiş ifadede
(en-US) , 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.
Örnek
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
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çtekiwhile
,do-while
,for
, veyaswitch
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.
Örnek 1
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;
}
}
Örnek 2: Bir etiketten çıkma
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
continue
(en-US) 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ğinwhile
döngüsünde, koşul kontrolüne geri döner.for
döngüsünde isearttı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];
Örnek 1
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;
}
Örnek 2
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
ifadesi
for...in
(en-US) 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 }
Örnek
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
Dizilerde kullanımı
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
(en-US) 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
for...of
(en-US) ifadesi bir döngü oluşturur ve gezilebilir (iterable) nesneler (en-US) (Array
, Map
, Set
, arguments
(en-US) 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
(en-US) 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
}