Her seferinde farklı bir değerle aynı kodu tekrar tekrar çalıştırmak istiyorsanız döngüleri kullanabilirsiniz. Bu yazımda JavaScript for döngüsü kullanımını anlatacağım.
JavaScript for Döngüsü Kullanımı
For döngüsünü en çok dizilerde ve nesnelerde kullanıyoruz. 3 farklı for döngüsü vardır. Bunlar :
- for : Bir kod bloğunu belirtilen sayıda döngüye alır.
- for/in : Bir nesnenin özelliklerini döngüye alır.
- for/of : Yinelenebilir bir nesnenin değerlerini döngüye alır.
Sırasıyla her birinin kullanımını örnekler üzerinden inceleyelim.
1 – JavaScript for Döngüsü
Kullanımı şu şekildedir :
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> for (başlatma; koşul; arttırma_veya_azaltma) { // Çalıştırılacak kodlar } </script> |
for içerisinde yazdığımız durum 1, durum 2, durum 3’ün ne anlama geldiğine bakalım.
- başlatma : Döngünün hangi değerden başlatılacağını belirtiriz.
- koşul : Döngünün devam edebilmesi için gerekli koşulu belirtiriz.
- arttırma veya azaltma : Döngü içesindeki kodlar çalıştırıldıktan sonra her defasında çalıştırılır.
Şimdi örnek üzerinde inceleyelim.
Örnek 0’dan 5’e kadar olan sayıları console ekranına yazdıralım.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> for (i = 0; i < 5; i++) { console.log(i); } </script> |
Çıktısı
0
1
2
3
4
for içerisinde yazdıklarımızı inceleyelim.
i = 0 Burada döngünün başlayacağı değeri yazıyoruz. Kullanmış olduğumuz i harfi zorunlu değildir. Örneğin i harfi yerine sayi değişkenini de yazabilirdik.
i < 5 Burada döngünün kaç defa çalıştırılacağını belirliyoruz. Döngüyü 0’dan başlattık ve 5’ten küçük olana kadar devam etmesini söyledik. Yani toplamda döngü içerisindeki kodlar 5 defa çalıştırılacak.
i++ Döngü içerisindeki kodlar her çalıştırıldığında i değişkeninin değerini 1 arttırıyoruz. Taki i değişkeni 5’ten küçük oluncaya kadar döngü içerisindeki kodlar her defasında çalıştırılacaktır.
For döngüsünün kullanımının daha iyi anlaşılması için birkaç örnek daha yapalım.
Örnek 12’den 7’ye kadar olan çift sayıları console ekranına yazdıralım.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> for (sayi = 12; sayi > 7; sayi = sayi - 2) { console.log(sayi); } </script> |
Çıktısı
12
10
8
Örnek Var olan bir dizinin sırasıyla tüm elemanlarının değerinin 3 katını console ekranına yazdıralım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> var sayilar = [32, 45, 7, 87]; for (i = 0; i < sayilar.length; i++) { console.log(sayilar[i]*3); } </script> |
Çıktısı
96
135
21
261
2 – JavaScript for/in Döngüsü
JavaScript de for/in döngüsü ile bir nesnenin özellikleri arasında dolaşabiliriz.
Örnek Bir nesne oluşturalım ve içerisine isim, soyisim, yaş bilgilerini yazalım. for/in döngüsü ile bu bilgileri birleştirip console ekranına yazdıralım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script> var fullName = { name : "Ali", lastName : "Veli", age : 45 }; var text = ""; for (x in fullName) { text = text + fullName[x] + " "; } console.log(text); </script> |
Çıktısı Ali Veli 45
3 – JavaScript for/of Döngüsü
JavaScript de for/of döngüsü ile yinelenebilir bir nesnenin özellikleri arasında dolaşabiliriz. Örneğin diziler (Arrays), dizeler (Strings), düğüm listeleri (NodeLists), haritalar (Maps) vb.
Kullanımı şu şekildedir :
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> for (degisken of yinelenebilir_nesne) { // Çalıştırılacak kodlar } </script> |
Örnek Var olan bir dizinin sırasıyla tüm elemanlarının değerinin 3 katını console ekranına yazdıralım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> var sayilar = [32, 45, 7, 87]; for (i of sayilar) { console.log(i*3); } </script> |
Çıktısı
96
135
21
261
Son olarak bir de string değer üzerinden örnek yapalım.
Örnek Var olan bir string değerin sırasıyla tüm karakterlerini console ekranına yazdıralım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> var text = "JavaScript"; for (x of text) { console.log(x); } </script> |
Çıktısı
J
a
v
a
S
c
r
i
p
t
Umarım sizin için faydalı bir yazı olmuştur.
Şu yazılar da ilginizi çekebilir.
JavaScript switch case Kullanımı
Yeni bir yazımda görüşmek üzere.
){kind=link}