JavaScript Döngüler ( for, while, do while, for in )

Bu yazımızda javascript döngüler konusunu örneklerle anlatacağız.
Yazılımda döngü, bir kod veya kod bloğunun bir koşul denetiminde istenilen sayıda çalışması için kullanılan yapılara denir. Bizlere çok kolaylık sağlayan yapılardır. Örneğin 1 den 100 e kadar yazmak istediğimizde, tek tek yazmak yerine bir döngü komutları ile kısa bir kod ile bu işi yapabiliyoruz…

1 – Javascript while Döngüsü

while döngüsü, koşul denetiminde bir kod veya kod bloğunun istenilen sayıda çalışması için kullanılan yapılardır. Kod yapısı aşağıdaki gibidir.

while (koşul) {
  kodlarımız...
}

Koşul devam ettiği sürece kodlarımız defalarca çalışacaktır. Koşul sağlandığında while bloğunu atlayacak ve devamındaki kodlara geçilecektir.
Bir örnek ile konuyu pekiştirelim. 1 den 100’e kadar sayıları yazdıran döngüyü yazalım. Örneğin Kodları:

var sayi=1;
while (sayi<100) {
  document.write(sayi +"<br/>");
  sayi++;
}

Yukarıdaki örnekte gördüğümüz gibi tek tek 1 den 100’e kadar yazmaktan çok daha basit ve kısa zamanda istediğimizi yapabiliyoruz.
Tabi koşul kısmını doğru yapmak çok önemlidir. Eğer koşul sonlanmazsa kodlarımız kısır(sonsuz) döngüye girer ve sürekli çalışır. Bu da büyük bir hatadır. Yukarıdaki örnekte “sayi++;” kodunu yazmazsak bizim komutlarımızda kısır döngüye girer. Sayıyı her seferinde bir artırdığımız için 100 oluyor ve koşul sağlanmış oluyor. Bu sayede while döngüsü tamamlanmış oluyor ve varsa sonraki kodlara geçiliyor…

2 – Javascript do-while Döngüsü

do-while döngüsü, koşul denetiminde bir kod veya kod bloğunun defalarca çalışması için kullanılan yapılardır. Kod yapısı aşağıdaki gibidir.

do {
  kodlarımız.
} while (koşul);

while ile yaptığımızı do-while ile de yapabiliriz.
Peki aradaki fark ne diye aklımıza gelebilir. Aradaki fark while önce koşula bakıp blog içindeki kodları çalıştırır ve koşul sağlanıncaya kadar devam eder. do-while ise ilk olarak kodlar bir kez çalışır ve sonrasında koşul sağlanıncaya kadar kodlar çalışır. Eğer kodlarımızın ilk olarak çalıştırılmasını sonra da koşul a uygun ise devam etmesini istiyorsak do-while kullanırız..
Aynı örneği burada yapalım… Kodlarımız:

var sayi = 1 ;
do {
  document.write( sayi + "<br/>");
  sayi++; 
} while (sayi<100);

3 – Javascript for Döngüsü

for döngüsü yukarıdaki diğer döngüler gibi bir koşula bağlı olarak bir kod veya kod bloğunun defalarca çalışması için kullanılan yapılardır. Kod yapısı aşağıdaki gibidir…

for (başlangıç değeri;  koşul  ; artırma veya azaltma) {
   _çalışmasını istediğimiz kodlarımız...
}

Yukarıdaki örneğimizi burada for ile yapalım… Kodlarımız:

for (let sayi = 1; sayi < 100 ; sayi++) {
  document.write(sayi + "<br/>") 
}

Arkadaşlar bir örnekte 100 den başlayıp 1’e kadar yazdıralım. Kodlarımız:

for (let sayi = 100; 1 <= sayi ; sayi-- ) {
  document.write(sayi + "<br/>") 
}

4 – Javascript for in Döngüsü

for in döngüsü, nesne ve dizilerde kullanılan bir döngüdür. Dizi veya nesne elemanları içinde dönüp onlarla ilgili gerekli işlemleri yapmamıza olanak sağlar. Kod yapısı aşağıdaki gibidir…

for (element in nesne/dizi{
    kodlarımız...
}

Bir tane dizi oluşturalım ve elemanlarını ekrana yazdıralım…
Örnek Kodlarımız:

var meyveler= ["elma","armut","portakal","üzüm"];
for (const item in meyveler) {
    document.write(meyveler[item] + "<br/>");
}

Bir örnekte nesne oluşturarak yapalım. Örnek:

var arac =  { marka:"honda", cinsi:"jazz", model:"2011"}; 
for (const item in arac) {
  document.write(arac[item]+ " ")  
}

Bir tane de dizi ve nesne içiçe olan ve koşul ifadeleri içeren örnek yapalım. Kodlarımız:

var araclar=[
  { marka:"honda", cinsi:"jazz", model:"2011"},
  { marka:"toyota", cinsi:"corolla", model:"2012"},
  { marka:"mazda", cinsi:"3", model:"2010"}
];
for (const item in araclar) {
    if (araclar[item].marka=="honda") {
      document.write("araç bilgileri: " + araclar[item].marka + " " + araclar[item].cinsi + " " + araclar[item].model + "<br/>");
    } else if (araclar[item].marka=="toyota"){
      document.write("araç bilgileri: " + araclar[item].marka + " " + araclar[item].cinsi + " " + araclar[item].model + "<br/>");
    }else if (araclar[item].marka=="mazda"){
      document.write("araç bilgileri: " + araclar[item].marka + " " + araclar[item].cinsi + " " + araclar[item].model + "<br/>");
    }
}

JavaScript Döngüler de break Kullanımı

Break kullanımı, döngüyü bitirmek(sonlandırmak) için kullanılır. Döngü içinde break koduna gelindiği anda döngü blogu içinden çıkılır ve sıradaki komutlara geçilir…

Bir örnekle anlatalım. 1 den 100’e kadar yazdıran kodlarımızda sayı 33 geldiğinde döngüyü sonlandıran kodları yazalım. Kodlarımız:

for (let sayi = 0; sayi < 100; sayi++) {
  document.write(sayi + " ");
  if(sayi==33){
    break;
  } 
}

JavaScript Döngüler de continue Kullanımı

continue Kullanımı, döngü içerisinde continue koduna geldiğinde o anki işlemi sonlandırır ve döngünün başına döner. Döngü kaldığı yerden devam eder.

Bir örnek ile anlatalım. 1 den 10’a kadar sayıları yazdıran kodlarımızı yazdıralım. Ama sadece 5 sayısı yazdırmak istemiyoruz. Kodlarımız:

for (let sayi = 0; sayi <= 10; sayi++) { 
  if(sayi==5){
    continue;
  } 
  document.write(sayi + " ");
}

Yazımız ile ilgili sorularınızı yorum kısmından veya iletişim formundan iletebilirsiniz. Başka bir yazımızda buluşmak üzere…