Bu derse başlamak veya ilerlemenizi kaydetmek için lütfen giriş yapın veya kayıt olun.

Ders İçeriği

Giriş

Programlamada sıklıkla aynı işlemi tekrar tekrar yapmamız gerekir. Örneğin, bir dizideki tüm elemanları ekrana yazdırmak, 1'den 100'e kadar olan sayıları toplamak veya bir web sayfasındaki tüm bağlantıları kontrol etmek gibi. Bu tür tekrarlayan işlemleri her seferinde ayrı ayrı yazmak yerine, döngüler kullanarak daha verimli ve okunabilir kod yazabiliriz.

Döngüler, belirli bir koşul sağlandığı sürece bir kod bloğunu tekrar tekrar çalıştırmamızı sağlayan yapılardır. JavaScript'te üç temel döngü türü vardır: forwhile ve do-while. Ayrıca, diziler ve nesneler üzerinde döngü yapmak için özel döngü türleri de bulunmaktadır.

Bu derste, JavaScript'teki döngü türlerini, nasıl kullanıldıklarını ve hangi durumlarda hangi döngü türünün daha uygun olduğunu öğreneceğiz. Ayrıca, döngüleri kontrol etmek için kullanılan break ve continue ifadelerini de inceleyeceğiz.

for Döngüsü

for döngüsü, JavaScript'te en yaygın kullanılan döngü türüdür. Belirli bir sayıda tekrar yapmanız gerektiğinde özellikle kullanışlıdır. for döngüsü, üç bölümden oluşur: başlangıç, koşul ve artırma/azaltma.

Temel sözdizimi şu şekildedir:

for_dongusu.js
for (başlangıç; koşul; artırma/azaltma) {
    // Her tekrarda çalıştırılacak kod bloğu
}
  • Başlangıç: Döngü başlamadan önce bir kez çalıştırılır. Genellikle bir sayaç değişkeni tanımlamak için kullanılır.
  • Koşul: Her tekrardan önce değerlendirilir. Eğer true ise döngü devam eder, false ise döngü sona erer.
  • Artırma/Azaltma: Her tekrarın sonunda çalıştırılır. Genellikle sayaç değişkenini artırmak veya azaltmak için kullanılır.
for_ornegi.js
// 1'den 5'e kadar olan sayıları ekrana yazdıran for döngüsü
for (let i = 1; i <= 5; i++) {
    console.log(i);
}

// Çıktı:
// 1
// 2
// 3
// 4
// 5

// 10'dan 1'e kadar geriye doğru sayan for döngüsü
for (let i = 10; i >= 1; i--) {
    console.log(i);
}

// Çıktı:
// 10
// 9
// 8
// ...
// 1

// 1'den 10'a kadar olan çift sayıları ekrana yazdıran for döngüsü
for (let i = 2; i <= 10; i += 2) {
    console.log(i);
}

// Çıktı:
// 2
// 4
// 6
// 8
// 10

Not: for döngüsünün üç bölümü de isteğe bağlıdır. Örneğin, başlangıç bölümünü döngüden önce tanımlayabilir, koşul bölümünü döngü içinde kontrol edebilir ve artırma/azaltma bölümünü döngü içinde yapabilirsiniz. Ancak, noktalı virgülleri (;) her zaman koymalısınız.

Diziler Üzerinde for Döngüsü

for döngüsü, diziler üzerinde döngü yapmak için sıklıkla kullanılır. Dizinin her elemanına erişmek için dizinin uzunluğunu (length) ve indeks numaralarını kullanabiliriz.

for_dizi_ornegi.js
let meyveler = ["elma", "armut", "muz", "çilek", "kivi"];

// Dizideki tüm meyveleri ekrana yazdıran for döngüsü
for (let i = 0; i < meyveler.length; i++) {
    console.log(meyveler[i]);
}

// Çıktı:
// elma
// armut
// muz
// çilek
// kivi

while Döngüsü

while döngüsü, belirli bir koşul true olduğu sürece bir kod bloğunu tekrar tekrar çalıştırır. for döngüsünden farklı olarak, while döngüsü sadece bir koşul içerir ve tekrar sayısı önceden bilinmediğinde kullanışlıdır.

Temel sözdizimi şu şekildedir:

while_dongusu.js
while (koşul) {
    // Koşul true olduğu sürece çalıştırılacak kod bloğu
}
while_ornegi.js
// 1'den 5'e kadar olan sayıları ekrana yazdıran while döngüsü
let i = 1;
while (i <= 5) {
    console.log(i);
    i++;
}

// Çıktı:
// 1
// 2
// 3
// 4
// 5

// Rastgele sayı üretip 10'dan küçük olduğu sürece devam eden while döngüsü
let sayi = Math.floor(Math.random() * 20); // 0-19 arası rastgele bir sayı
let sayac = 0;

while (sayi < 10) {
    console.log(`Üretilen sayı: ${sayi}`);
    sayi = Math.floor(Math.random() * 20);
    sayac++;
}

console.log(`Döngü ${sayac} kez çalıştı ve ${sayi} sayısında durdu.`);

Uyarı: while döngüsünde, koşulun bir noktada false olacağından emin olmalısınız. Aksi takdirde, döngü sonsuza kadar devam eder (sonsuz döngü) ve programınız donabilir veya çökebilir.

do-while Döngüsü

do-while döngüsü, while döngüsüne benzer, ancak koşul döngünün sonunda kontrol edilir. Bu, kod bloğunun en az bir kez çalıştırılmasını garanti eder, çünkü koşul ilk çalıştırmadan sonra kontrol edilir.

Temel sözdizimi şu şekildedir:

do_while_dongusu.js
do {
    // En az bir kez çalıştırılacak kod bloğu
} while (koşul);
do_while_ornegi.js
// 1'den 5'e kadar olan sayıları ekrana yazdıran do-while döngüsü
let i = 1;
do {
    console.log(i);
    i++;
} while (i <= 5);

// Çıktı:
// 1
// 2
// 3
// 4
// 5

// Koşul başlangıçta false olsa bile en az bir kez çalışır
let j = 10;
do {
    console.log(`j değeri: ${j}`);
    j++;
} while (j < 5);

// Çıktı:
// j değeri: 10

İpucu: do-while döngüsü, kullanıcıdan girdi almak ve geçerli bir girdi alana kadar tekrar istemek gibi durumlarda kullanışlıdır. Çünkü en az bir kez kullanıcıdan girdi istemeniz gerekir.

for...in Döngüsü

for...in döngüsü, bir nesnenin özellikleri (property) üzerinde döngü yapmak için kullanılır. Nesnenin her özelliği için döngü bir kez çalıştırılır.

Temel sözdizimi şu şekildedir:

for_in_dongusu.js
for (let anahtar in nesne) {
    // Her özellik için çalıştırılacak kod bloğu
}
for_in_ornegi.js
// Bir nesnenin özelliklerini ve değerlerini ekrana yazdıran for...in döngüsü
let kisi = {
    ad: "Ahmet",
    soyad: "Yılmaz",
    yas: 30,
    meslek: "Mühendis"
};

for (let ozellik in kisi) {
    console.log(`${ozellik}: ${kisi[ozellik]}`);
}

// Çıktı:
// ad: Ahmet
// soyad: Yılmaz
// yas: 30
// meslek: Mühendis

Uyarı: for...in döngüsü, diziler üzerinde de kullanılabilir, ancak bu önerilmez. Çünkü for...in döngüsü, dizinin indekslerini (ve diziye eklenen diğer özellikleri) döndürür, elemanlarını değil. Diziler üzerinde döngü yapmak için for döngüsü veya for...of döngüsü daha uygundur.

for...of Döngüsü

for...of döngüsü, ES6 (ECMAScript 2015) ile tanıtılan ve yinelenebilir (iterable) nesneler üzerinde döngü yapmak için kullanılan bir döngü türüdür. Diziler, string'ler, Map, Set gibi yinelenebilir nesneler üzerinde kullanılabilir.

Temel sözdizimi şu şekildedir:

for_of_dongusu.js
for (let eleman of yinelenebilirNesne) {
    // Her eleman için çalıştırılacak kod bloğu
}
for_of_ornegi.js
// Bir dizinin elemanlarını ekrana yazdıran for...of döngüsü
let meyveler = ["elma", "armut", "muz", "çilek", "kivi"];

for (let meyve of meyveler) {
    console.log(meyve);
}

// Çıktı:
// elma
// armut
// muz
// çilek
// kivi

// Bir string'in karakterlerini ekrana yazdıran for...of döngüsü
let mesaj = "Merhaba";

for (let karakter of mesaj) {
    console.log(karakter);
}

// Çıktı:
// M
// e
// r
// h
// a
// b
// a

İpucu: for...of döngüsü, diziler üzerinde döngü yapmak için for döngüsüne göre daha temiz ve okunabilir bir alternatiftir. Ancak, indeks numaralarına ihtiyacınız varsa, geleneksel for döngüsünü veya forEach metodunu kullanmanız daha uygun olabilir.

break ve continue İfadeleri

Döngüleri kontrol etmek için break ve continue ifadelerini kullanabilirsiniz.

break İfadesi

break ifadesi, bir döngüyü tamamen sonlandırır ve döngüden sonraki koda geçer. Genellikle belirli bir koşul sağlandığında döngüden çıkmak için kullanılır.

break_ornegi.js
// 1'den 10'a kadar sayıları ekrana yazdıran, ancak 5'e geldiğinde duran for döngüsü
for (let i = 1; i <= 10; i++) {
    if (i === 5) {
        console.log("5'e ulaştık, döngüden çıkıyoruz.");
        break;
    }
    console.log(i);
}

// Çıktı:
// 1
// 2
// 3
// 4
// 5'e ulaştık, döngüden çıkıyoruz.

// Bir dizide belirli bir elemanı arayan ve bulduğunda döngüden çıkan while döngüsü
let meyveler = ["elma", "armut", "muz", "çilek", "kivi"];
let aranan = "muz";
let indeks = 0;
let bulundu = false;

while (indeks < meyveler.length) {
    if (meyveler[indeks] === aranan) {
        console.log(`${aranan} meyvesi ${indeks}. indekste bulundu.`);
        bulundu = true;
        break;
    }
    indeks++;
}

if (!bulundu) {
    console.log(`${aranan} meyvesi bulunamadı.`);
}

// Çıktı:
// muz meyvesi 2. indekste bulundu.

continue İfadesi

continue ifadesi, döngünün mevcut tekrarını atlar ve bir sonraki tekrara geçer. Genellikle belirli bir koşul sağlandığında döngünün geri kalanını atlamak için kullanılır.

continue_ornegi.js
// 1'den 10'a kadar olan sayıları ekrana yazdıran, ancak çift sayıları atlayan for döngüsü
for (let i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
        continue; // Çift sayıları atla
    }
    console.log(i);
}

// Çıktı:
// 1
// 3
// 5
// 7
// 9

// Bir dizideki boş olmayan elemanları ekrana yazdıran for döngüsü
let dizi = ["elma", "", "muz", null, "çilek", undefined, "kivi"];

for (let i = 0; i < dizi.length; i++) {
    if (!dizi[i]) {
        continue; // Boş, null veya undefined değerleri atla
    }
    console.log(dizi[i]);
}

// Çıktı:
// elma
// muz
// çilek
// kivi

İç İçe Döngüler

Bir döngü içinde başka bir döngü kullanabilirsiniz. Buna "iç içe döngüler" denir. İç içe döngüler, çok boyutlu veri yapıları (örneğin, iki boyutlu diziler) üzerinde işlem yapmak için kullanışlıdır.

ic_ice_donguler.js
// Çarpım tablosunu oluşturan iç içe for döngüleri
for (let i = 1; i <= 5; i++) {
    for (let j = 1; j <= 5; j++) {
        console.log(`${i} x ${j} = ${i * j}`);
    }
    console.log("---"); // Her satır arasına ayırıcı ekle
}

// Çıktı:
// 1 x 1 = 1
// 1 x 2 = 2
// ...
// 1 x 5 = 5
// ---
// 2 x 1 = 2
// ...
// 5 x 5 = 25
// ---

// İki boyutlu bir diziyi ekrana yazdıran iç içe for döngüleri
let matris = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

for (let i = 0; i < matris.length; i++) {
    let satir = "";
    for (let j = 0; j < matris[i].length; j++) {
        satir += matris[i][j] + " ";
    }
    console.log(satir);
}

// Çıktı:
// 1 2 3
// 4 5 6
// 7 8 9

Uyarı: İç içe döngüler, özellikle büyük veri setleri üzerinde çalışırken performans sorunlarına neden olabilir. Çünkü dış döngünün her tekrarı için iç döngü tamamen çalıştırılır. Bu nedenle, mümkünse iç içe döngülerden kaçınmak veya daha verimli alternatifler kullanmak iyi bir pratiktir.

forEach, map ve filter Metodları

JavaScript'te diziler üzerinde döngü yapmak için forEachmap ve filter gibi dizi metodları da kullanılabilir. Bu metodlar, geleneksel döngülere göre daha fonksiyonel ve okunabilir bir yaklaşım sunar.

forEach Metodu

forEach metodu, bir dizinin her elemanı için belirtilen bir fonksiyonu çalıştırır. Bu metod, dizinin her elemanı için bir kez çalıştırılır ve elemanın değerini, indeksini ve diziyi parametre olarak alabilir.

forEach_ornegi.js
let meyveler = ["elma", "armut", "muz", "çilek", "kivi"];

// forEach ile dizinin elemanlarını ekrana yazdırma
meyveler.forEach(function(meyve, indeks) {
    console.log(`${indeks}: ${meyve}`);
});

// Çıktı:
// 0: elma
// 1: armut
// 2: muz
// 3: çilek
// 4: kivi

// Ok fonksiyonu (arrow function) ile daha kısa yazım
meyveler.forEach((meyve, indeks) => console.log(`${indeks}: ${meyve}`));

map Metodu

map metodu, bir dizinin her elemanı için belirtilen bir fonksiyonu çalıştırır ve sonuçlardan yeni bir dizi oluşturur. Orijinal dizi değiştirilmez.

map_ornegi.js
let sayilar = [1, 2, 3, 4, 5];

// map ile sayıların karelerini içeren yeni bir dizi oluşturma
let kareler = sayilar.map(function(sayi) {
    return sayi * sayi;
});

console.log(kareler); // [1, 4, 9, 16, 25]

// Ok fonksiyonu ile daha kısa yazım
let kareler2 = sayilar.map(sayi => sayi * sayi);
console.log(kareler2); // [1, 4, 9, 16, 25]

filter Metodu

filter metodu, bir dizinin elemanlarını belirtilen bir koşula göre filtreler ve koşulu sağlayan elemanlardan yeni bir dizi oluşturur. Orijinal dizi değiştirilmez.

filter_ornegi.js
let sayilar = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// filter ile çift sayıları içeren yeni bir dizi oluşturma
let ciftSayilar = sayilar.filter(function(sayi) {
    return sayi % 2 === 0;
});

console.log(ciftSayilar); // [2, 4, 6, 8, 10]

// Ok fonksiyonu ile daha kısa yazım
let ciftSayilar2 = sayilar.filter(sayi => sayi % 2 === 0);
console.log(ciftSayilar2); // [2, 4, 6, 8, 10]

İpucu: forEachmap ve filter gibi dizi metodları, geleneksel döngülere göre daha fonksiyonel ve okunabilir bir yaklaşım sunar. Özellikle, veri dönüşümleri ve filtreleme işlemleri için bu metodları kullanmak, kodunuzu daha temiz ve anlaşılır hale getirebilir.

Alıştırmalar

  1. 1'den 100'e kadar olan sayıların toplamını hesaplayan bir for döngüsü yazın.
  2. Bir dizideki en büyük sayıyı bulan bir for veya for...of döngüsü yazın.
  3. Bir string'in palindrom olup olmadığını kontrol eden bir fonksiyon yazın (palindrom, tersten okunduğunda da aynı olan kelime veya cümledir, örneğin "kayak" veya "ey edip adanada pide ye").
  4. İç içe for döngüleri kullanarak aşağıdaki deseni oluşturan bir program yazın:
    *
    **
    ***
    ****
    *****
  5. Bir dizideki tek sayıları filtreleyen ve bu sayıların karelerini içeren yeni bir dizi oluşturan bir program yazın. filter ve map metodlarını kullanın.

Bu derste JavaScript'teki döngü türlerini öğrendik:

  • for Döngüsü: Belirli bir sayıda tekrar yapmak için kullanılır. Başlangıç, koşul ve artırma/azaltma bölümlerinden oluşur.
  • while Döngüsü: Belirli bir koşul sağlandığı sürece bir kod bloğunu tekrar tekrar çalıştırır.
  • do-while Döngüsü: while döngüsüne benzer, ancak kod bloğu en az bir kez çalıştırılır.
  • for...in Döngüsü: Bir nesnenin özellikleri üzerinde döngü yapmak için kullanılır.
  • for...of Döngüsü: Yinelenebilir nesneler (diziler, string'ler vb.) üzerinde döngü yapmak için kullanılır.
  • break ve continue İfadeleri: Döngüleri kontrol etmek için kullanılır. break döngüyü tamamen sonlandırır, continue ise mevcut tekrarı atlar.
  • İç İçe Döngüler: Bir döngü içinde başka bir döngü kullanılabilir.
  • forEach, map ve filter Metodları: Diziler üzerinde döngü yapmak için kullanılan fonksiyonel yaklaşımlar.

Döngüler, programlamada tekrarlayan işlemleri gerçekleştirmek için temel yapı taşlarıdır. Farklı döngü türlerini anlamak ve hangi durumlarda hangi döngü türünün daha uygun olduğunu bilmek, verimli ve okunabilir kod yazmanıza yardımcı olacaktır.

Bir sonraki derste, JavaScript'te fonksiyonları ve parametreleri öğreneceğiz.