JavaScript’te kaç çeşit döngü vardır?

JavaScript’te temel olarak 5 yaygın döngü türü vardır: for while do...while for...in (nesneler için) for...of (iterable yapılar için) Ayrıca diziler üzerinde işlem yapmayı kolaylaştıran forEach, map, filter, reduce gibi metotlar da döngü mantığıyla çalışır.

for döngüsü ile while döngüsü arasındaki fark nedir?

for döngüsü genellikle kaç defa çalışacağı bilinen durumlar için idealdir. while döngüsü ise koşul sağlandığı sürece çalışır ve genellikle belirsiz sayıda tekrar eden işlemlerde kullanılır.

forEach ile map arasındaki fark nedir?

Her ikisi de dizi elemanları üzerinde döner. Ancak: forEach sadece işlem yapar, dönüş değeri yoktur. map her eleman için işlem yapar ve yeni bir dizi döndürür.

break ve continue ne işe yarar?

break: Döngüyü tamamen sonlandırır. continue: O anki döngü turunu atlayıp bir sonraki adıma geçer.

reduce() ne zaman kullanılır?

reduce, tüm dizi elemanlarını birleştirerek tek bir sonuç elde etmek istediğinizde kullanılır. Örnek: Toplam bulma, ortalama alma, obje birleştirme.

Döngü içerisinde return kullanabilir miyim?

Eğer döngü bir fonksiyon içinde yer alıyorsa return kullanabilirsiniz. Aksi takdirde, return fonksiyondan çıkışı temsil eder ve döngüyü etkilemez.

Döngüler performansı etkiler mi?

Çok büyük veri kümelerinde gereksiz yere kullanılan iç içe döngüler performansı etkileyebilir. Bunun yerine uygun array metotları ve algoritma optimizasyonları kullanılmalıdır.

Array metodları döngülerin yerini alabilir mi?

Evet, çoğu durumda forEach, map, filter, reduce gibi metodlar klasik döngülerin yerini daha sade ve okunabilir şekilde alabilir. Ancak tüm durumlar için geçerli değildir.

Hangi döngüyü ne zaman kullanmalıyım?

for: Belirli aralıklarda dönen işlemler için. while: Koşul sağlandığı sürece çalışması gereken işlemler için. do...while: En az bir kez çalışması gereken durumlar için. forEach: Dizi üzerinde işlem yapmak için. map: Dizideki elemanları değiştirmek ve yeni bir dizi üretmek için. filter: Şartlara göre dizi elemanlarını ayıklamak için. reduce: Tüm dizi elemanlarını tek değere indirgemek için.

Döngüler ile hata ayıklama nasıl yapılır?

Döngü içinde console.log() kullanarak değişkenlerin değerlerini izleyebilir, döngünün kaç defa çalıştığını görebilirsiniz. Karmaşık yapılar için tarayıcı geliştirici araçlarındaki "Breakpoint" özelliğini de kullanabilirsiniz.

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

JavaScript’te kaç çeşit döngü vardır?
JavaScript’te temel olarak 5 yaygın döngü türü vardır:
for
while
do...while
for...in (nesneler için)
for...of (iterable yapılar için) Ayrıca diziler üzerinde işlem yapmayı kolaylaştıran forEach, map, filter, reduce gibi metotlar da döngü mantığıyla çalışır.
for döngüsü ile while döngüsü arasındaki fark nedir?
for döngüsü genellikle kaç defa çalışacağı bilinen durumlar için idealdir. while döngüsü ise koşul sağlandığı sürece çalışır ve genellikle belirsiz sayıda tekrar eden işlemlerde kullanılır.
forEach ile map arasındaki fark nedir?
Her ikisi de dizi elemanları üzerinde döner. Ancak:
forEach sadece işlem yapar, dönüş değeri yoktur.
map her eleman için işlem yapar ve yeni bir dizi döndürür.
break ve continue ne işe yarar?
break: Döngüyü tamamen sonlandırır.
continue: O anki döngü turunu atlayıp bir sonraki adıma geçer.
reduce() ne zaman kullanılır?
reduce, tüm dizi elemanlarını birleştirerek tek bir sonuç elde etmek istediğinizde kullanılır. Örnek: Toplam bulma, ortalama alma, obje birleştirme.
Döngü içerisinde return kullanabilir miyim?
Eğer döngü bir fonksiyon içinde yer alıyorsa return kullanabilirsiniz. Aksi takdirde, return fonksiyondan çıkışı temsil eder ve döngüyü etkilemez.
Döngüler performansı etkiler mi?
Çok büyük veri kümelerinde gereksiz yere kullanılan iç içe döngüler performansı etkileyebilir. Bunun yerine uygun array metotları ve algoritma optimizasyonları kullanılmalıdır.
Array metodları döngülerin yerini alabilir mi?
Evet, çoğu durumda forEach, map, filter, reduce gibi metodlar klasik döngülerin yerini daha sade ve okunabilir şekilde alabilir. Ancak tüm durumlar için geçerli değildir.
Hangi döngüyü ne zaman kullanmalıyım?
for: Belirli aralıklarda dönen işlemler için.
while: Koşul sağlandığı sürece çalışması gereken işlemler için.
do...while: En az bir kez çalışması gereken durumlar için.
forEach: Dizi üzerinde işlem yapmak için.
map: Dizideki elemanları değiştirmek ve yeni bir dizi üretmek için.
filter: Şartlara göre dizi elemanlarını ayıklamak için.
reduce: Tüm dizi elemanlarını tek değere indirgemek için.
Döngüler ile hata ayıklama nasıl yapılır?
Döngü içinde console.log() kullanarak değişkenlerin değerlerini izleyebilir, döngünün kaç defa çalıştığını görebilirsiniz. Karmaşık yapılar için tarayıcı geliştirici araçlarındaki “Breakpoint” özelliğini de kullanabilirsiniz.

Kaynak patika.dev

Etiketler: javascript döngüler

Paylaş:

Tayyip Bölük

Merhaba, ben Tayyip Bölük. Profesyonel bir yazılım geliştiricisi olarak, özellikle PHP tabanlı web projeleri geliştirme konusunda uzmanlaşmış durumdayım. Yazılım dünyasındaki yolculuğuma, yaratıcı çözümler üreterek ve kullanıcı odaklı projeler geliştirerek devam ediyorum.Blog sitemde yazılım ve teknolojiye dair güncel bilgileri, yenilikleri ve ipuçlarını paylaşıyorum. Amacım, yazılım dünyasına ilgi duyan herkese faydalı içerikler sunarak bilgi birikimimi paylaşmak ve sektörel gelişmelere ışık tutmak.PHP’nin yanı sıra, React, Bootstrap, Tailwind, Jquery gibi modern araçları kullanarak dinamik, kullanıcı dostu ve performanslı web siteleri geliştirme üzerine çalışıyorum. Ayrıca, öğretmenlere ve öğrencilere yönelik inovatif projeler geliştirme konusundaki tutkum sayesinde, eğitim ve yazılımı birleştiren projeler üretmeyi hedefliyorum.Eğer siz de yazılım ve teknoloji konularına ilgi duyuyorsanız, bloğumda sizin için ilham kaynağı olabilecek içerikler bulabilirsiniz.