JavaScript Döngüler: Tüm Yönleriyle Detaylı Rehber

JavaScript, modern web geliştirmede en çok tercih edilen programlama dillerinden biridir. Dinamik web sayfaları oluşturmak, kullanıcı etkileşimlerini yönetmek, verileri analiz etmek ve sunucu taraflı işlemleri gerçekleştirmek gibi çok çeşitli alanlarda kullanılabilir. JavaScript’in gücünü artıran en önemli yapılardan biri de döngülerdir. JavaScript döngüler, belirli bir işlemi birden fazla kez, farklı koşullarda veya bir dizi veri üzerinde gerçekleştirmemize olanak tanır.

Bu rehberde, JavaScript döngüler konusunu en temelden ileri düzeye kadar inceleyeceğiz. for, while, do...while gibi geleneksel döngülerin yanı sıra, forEach, map, filter, reduce gibi modern array metotlarını da detaylı örneklerle ele alacağız. Ayrıca break ve continue gibi döngü kontrol komutlarının ne işe yaradığını ve ne zaman kullanılması gerektiğini göstereceğiz. Yazının sonunda ise döngüleri bir arada kullandığımız pratik uygulamalara da yer vereceğiz.

Neden JavaScript Döngüler Önemlidir?

Programlamada sıkça karşımıza çıkan ihtiyaçlardan biri, aynı işlemi birden fazla kez yapmaktır. Bu durum özellikle listelerle, dizilerle, objelerle ve veritabanı sorguları ile çalışırken çok yaygındır. Örneğin:

• Bir kullanıcı listesini ekranda sıralamak,
• Belirli kriterlere göre veri süzmek,
• Tüm ürünlerin fiyatlarını güncellemek,
• Öğrencilerin not ortalamasını hesaplamak.

Eğer döngüler olmasaydı, bu işlemleri tekrar tekrar elle yazmamız gerekirdi. Bu da hem zaman kaybına hem de kodun okunabilirliğinin ve sürdürülebilirliğinin düşmesine neden olurdu. JavaScript döngü yapıları bu sorunu ortadan kaldırır.

for Döngüsü

En klasik döngü yapısıdır. Genellikle, belirli sayıda çalıştırılacak işlemler için idealdir.

Söz Dizimi:

for (başlangıç; koşul; artış) {
    // kod bloğu
}

Temel Örnek:

for (let i = 0; i < 5; i++) {
    console.log("Sayı: " + i);
}

Gerçek Hayat Uygulaması:

Bir alışveriş sepetindeki ürünlerin toplam fiyatını bulalım:

let sepet = [10, 25, 35];
let toplam = 0;
for (let i = 0; i < sepet.length; i++) {
    toplam += sepet[i];
}
console.log("Toplam Fiyat: " + toplam);

while Döngüsü

while, koşul doğru olduğu sürece döngü bloğunu çalıştırır. Kaç kere döneceği başlangıçta net olmayan işlemlerde tercih edilir.

Örnek:

let i = 0;
while (i < 3) {
    console.log("Adım: " + i);
    i++;
}

Kullanım Senaryosu:

Bir kullanıcının tahmin oyunu yapmasını sağlayan kod:

let dogruSayi = 7;
let tahmin;
while (tahmin !== dogruSayi) {
    tahmin = parseInt(prompt("Bir sayı tahmin edin:"));
    if (tahmin === dogruSayi) alert("Tebrikler!");
}

do...while Döngüsü

do...while, döngüyü en az bir kez çalıştırmak istediğiniz durumlarda tercih edilir.

Örnek:

let sifre;
do {
    sifre = prompt("Lütfen şifrenizi girin:");
} while (sifre !== "1234");

forEach() Metodu

Diziler üzerinde işlem yapmanın modern yollarından biridir. Her eleman için ayrı ayrı işlem yapar.

Örnek:

let ogrenciler = ["Ali", "Zeynep", "Mehmet"];
ogrenciler.forEach(function(isim) {
    console.log("Öğrenci: " + isim);
});

Arrow function ile daha sade:

ogrenciler.forEach(isim => console.log(isim));

map() Metodu

map, her eleman üzerinde işlem yaparak yeni bir dizi döner. Orijinal diziyi değiştirmez.

Örnek:

let fiyatlar = [100, 200, 300];
let kdvliFiyatlar = fiyatlar.map(fiyat => fiyat * 1.2);
console.log(kdvliFiyatlar); // [120, 240, 360]

filter() Metodu

filter, dizideki elemanlardan belirli bir şartı sağlayanları seçerek yeni bir dizi oluşturur.

Örnek:

let notlar = [45, 80, 90, 60, 30];
let gecenler = notlar.filter(not => not >= 50);
console.log(gecenler); // [80, 90, 60]

reduce() Metodu

reduce, dizideki tüm elemanları tek bir değere indirgemek için kullanılır. Örneğin toplam hesaplamak için birebirdir.

Örnek:

let gelirler = [2000, 3000, 4000];
let toplamGelir = gelirler.reduce((toplam, gelir) => toplam + gelir, 0);
console.log("Toplam Gelir: " + toplamGelir);

break ve continue Kullanımı

break:

Bir döngü içerisindeki işlemi belirli bir koşulda durdurmak için kullanılır.

for (let i = 0; i < 10; i++) {
    if (i === 4) break;
    console.log(i);
}

continue:

Belirli koşulda döngüde o adımdaki işlemi atlayıp bir sonraki adıma geçmek için kullanılır.

for (let i = 0; i < 5; i++) {
    if (i === 2) continue;
    console.log(i);
}

Uygulamalı Örnek: Kullanıcı Sipariş Raporu Oluşturma

const siparisler = [
  {
    kullanici: "Ali Yılmaz",
    urunler: [
      { ad: "Laptop", fiyat: 15000 },
      { ad: "Mouse", fiyat: 300 }
    ]
  },
  {
    kullanici: "Zeynep Demir",
    urunler: [
      { ad: "Telefon", fiyat: 12000 },
      { ad: "Kılıf", fiyat: 150 },
      { ad: "Ekran Koruyucu", fiyat: 100 }
    ]
  },
  {
    kullanici: "Mehmet Can",
    urunler: [] // Henüz sipariş yok
  }
];

// Her kullanıcı için sipariş özeti çıkaran döngü:
siparisler.forEach(siparis => {
  console.log(`\nKullanıcı: ${siparis.kullanici}`);
  
  if (siparis.urunler.length === 0) {
    console.log("Sipariş bulunmamaktadır.");
    return;
  }

  let toplam = 0;

  siparis.urunler.forEach((urun, index) => {
    console.log(`${index + 1}. Ürün: ${urun.ad} - ${urun.fiyat} TL`);
    toplam += urun.fiyat;
  });

  console.log(`Toplam Sipariş Tutarı: ${toplam} TL`);

  if (toplam > 10000) {
    console.log("Not: Bu kullanıcı büyük müşteri kategorisine giriyor.");
  }
});

Sonuç ve Öneriler

JavaScript döngüler, hem temel programlama mantığını kavramak hem de gerçek projelerde etkili ve okunabilir kodlar yazmak için vazgeçilmezdir. Klasik döngüler ile algoritma temeli oluşturabilir, modern array metotlarıyla daha fonksiyonel ve sade kod yazabilirsiniz.

Bu yazıda öğrendikleriniz sayesinde artık JavaScript ile döngüleri çok daha etkili kullanabilir, ister küçük bir uygulamada ister büyük bir projede bu yapıların avantajlarından faydalanabilirsiniz. Daha fazlası için teknokod.net bakabilirsin

Kaynak patika.dev