Javascript'de Döngüler ve Diziler

Merhaba Webkolog Severler!

Bugün, JavaScript'in en güçlü ve esnek yapılarından ikisini, yani döngüleri ve dizileri ele alacağız. Bu ikili, tekrar eden işlemleri otomatikleştirmemizi ve veri koleksiyonlarını verimli bir şekilde yönetmemizi sağlar. Dinamik ve etkileşimli uygulamalar yazmak için bu konuları derinlemesine anlamamız çok önemli. Hazırsanız, döngülerin ritmine ve dizilerin düzenine ayak uyduralım!

---

Döngüler: Tekrar Eden İşlemleri Otomatikleştirme

Döngüler, belirli bir kod bloğunu belirli bir koşul sağlandığı sürece veya belirli bir sayıda tekrarlamak için kullanılır. Bu, aynı kodu tekrar tekrar yazmak yerine çok daha verimli bir yaklaşım sunar.

1. for Döngüsü

for döngüsü, belirli bir başlangıç değeri, bir bitiş koşulu ve her adımda yapılacak bir işlem (genellikle artırma veya azaltma) içeren klasik bir döngüdür. Sayılı tekrarlar için idealdir.

    // 0'dan 10'a kadar sayıları konsola yazdıralım
    for (let i = 0; i <= 10; i++) {
        console.log(i);
    }

2. for...in Döngüsü

for...in döngüsü, bir objenin numaralandırılabilir (enumerable) özelliklerini (anahtarlarını) yinelemek için kullanılır. Bu döngü, dizilerde de kullanılabilir ancak indekslerin sırasız gelme ihtimali olduğu için diziler için çok önerilmez. Genellikle obje özelliklerini gezmek için daha uygundur.

    const ogrenci = {
        ad: "Can",
        soyad: "Yılmaz",
        yas: 25
    };

    for (let anahtar in ogrenci) {
        console.log(`${anahtar}: ${ogrenci[anahtar]}`);
    }
    // Çıktı:
    // ad: Can
    // soyad: Yılmaz
    // yas: 25

3. for...of Döngüsü (ES6+)

for...of döngüsü, ES6 ile gelen ve yinelenebilir (iterable) nesneler (diziler, string'ler, Map, Set vb.) üzerinde doğrudan eleman değerlerini yinelemek için kullanılır. Diziler için for döngüsünden daha modern ve okunabilir bir alternatiftir.

    const meyveler = ["Elma", "Armut", "Çilek"];

    for (let meyve of meyveler) {
        console.log(meyve);
    }
    // Çıktı:
    // Elma
    // Armut
    // Çilek

    // String'ler de yinelenebilir nesnelerdir
    for (let karakter of "Merhaba") {
        console.log(karakter);
    }
    // Çıktı:
    // M
    // e
    // r
    // h
    // a
    // b
    // a

4. while Döngüsü

while döngüsü, belirli bir koşul doğru olduğu sürece kod bloğunu çalıştırmaya devam eder. Kaç kez döneceğinizin önceden bilinmediği durumlarda kullanışlıdır.

    let sayac = 0;
    while (sayac < 5) {
        console.log("Sayı: " + sayac);
        sayac++;
    }
    // Çıktı: 0, 1, 2, 3, 4

5. do...while Döngüsü

do...while döngüsü, while döngüsüne benzer ancak farkı, kod bloğunun en az bir kez çalıştıktan sonra koşulun kontrol edilmesidir. Yani, koşul yanlış olsa bile döngü bir kez çalışır.

    let i = 0;
    do {
        console.log("Sayı (do-while): " + i);
        i++;
    } while (i < 0); // Koşul yanlış, ama döngü bir kez çalıştı
    // Çıktı: Sayı (do-while): 0

Döngü Kontrol Deyimleri: break ve continue

• break: Döngüyü tamamen sonlandırır ve döngüden hemen sonraki koda atlar.

  
              for (let i = 0; i < 10; i++) {
                  if (i === 5) {
                      break; // i 5 olduğunda döngüyü durdur
                  }
                  console.log(i); // Çıktı: 0, 1, 2, 3, 4
              }
          

• continue: Döngünün o anki iterasyonunu atlar ve bir sonraki iterasyona geçer.

  
              for (let i = 0; i < 5; i++) {
                  if (i === 2) {
                      continue; // i 2 olduğunda bu iterasyonu atla
                  }
                  console.log(i); // Çıktı: 0, 1, 3, 4
              }
          

---

Diziler: Veri Koleksiyonlarını Yönetme

Diziler (Arrays), JavaScript'te birden fazla değeri tek bir değişken içinde düzenli bir şekilde depolamak için kullanılan özel bir obje türüdür. Her değere bir indeks numarası atanır, bu da değerlere hızlıca erişmemizi sağlar. Diziler, sıfırdan başlar (ilk elemanın indeksi 0'dır).

Dizi Oluşturma ve Erişme

    // Dizi oluşturma
    let renkler = ["Kırmızı", "Mavi", "Yeşil"];
    let sayilar = [10, 20, 30, 40, 50];

    // Elemanlara erişme (indeks kullanarak)
    console.log(renkler[0]); // "Kırmızı"
    console.log(sayilar[2]); // 30

    // Dizinin uzunluğu
    console.log(renkler.length); // 3

Dizi Metotları

JavaScript dizilerle çalışmayı kolaylaştıran birçok yerleşik metoda sahiptir:

• push(): Dizinin sonuna bir veya daha fazla eleman ekler.

  
              meyveler.push("Mango");
              console.log(meyveler); // ["Elma", "Armut", "Çilek", "Mango"]
          

• pop(): Dizinin sonundaki elemanı kaldırır ve bu elemanı döndürür.

  
              let sonMeyve = meyveler.pop();
              console.log(sonMeyve); // "Mango"
              console.log(meyveler); // ["Elma", "Armut", "Çilek"]
          

• shift(): Dizinin başındaki elemanı kaldırır ve bu elemanı döndürür.

  
              let ilkMeyve = meyveler.shift();
              console.log(ilkMeyve); // "Elma"
              console.log(meyveler); // ["Armut", "Çilek"]
          

• unshift(): Dizinin başına bir veya daha fazla eleman ekler.

  
              meyveler.unshift("Portakal", "Muz");
              console.log(meyveler); // ["Portakal", "Muz", "Armut", "Çilek"]
          

• indexOf(): Bir elemanın dizideki ilk indeksini döndürür. Bulamazsa -1 döndürür.

  
              console.log(meyveler.indexOf("Muz")); // 1
              console.log(meyveler.indexOf("Kiraz")); // -1
          

• splice(): Diziden eleman eklemek, çıkarmak veya değiştirmek için kullanılır. Çok güçlü bir metottur.

  
              let sehirler = ["Ankara", "İstanbul", "İzmir", "Bursa"];
              sehirler.splice(1, 1); // 1. indeksten başlayarak 1 eleman sil
              console.log(sehirler); // ["Ankara", "İzmir", "Bursa"]
  
              sehirler.splice(1, 0, "Antalya"); // 1. indekse "Antalya" ekle, eleman silme
              console.log(sehirler); // ["Ankara", "Antalya", "İzmir", "Bursa"]
  
              sehirler.splice(2, 1, "Adana", "Gaziantep"); // 2. indeksten 1 eleman sil, yerine 2 yeni eleman ekle
              console.log(sehirler); // ["Ankara", "Antalya", "Adana", "Gaziantep", "Bursa"]
          

• slice(): Dizinin belirli bir kısmını yeni bir dizi olarak kopyalar. Orijinal diziyi değiştirmez.

  
              let originalArray = [1, 2, 3, 4, 5];
              let newArray = originalArray.slice(1, 4); // 1. indeksten başla, 4. indekse kadar (4 dahil değil)
              console.log(newArray); // [2, 3, 4]
              console.log(originalArray); // [1, 2, 3, 4, 5] (Orijinal dizi değişmedi)
          

Döngüleri Dizilerle Kullanma

Döngüler ve diziler birbirini tamamlayan yapılardır. Dizilerdeki elemanları gezmek, filtrelemek veya dönüştürmek için döngüleri kullanırız.

    const notlar = [85, 92, 78, 65, 95];
    let toplamNot = 0;

    // for döngüsü ile dizide gezinme
    for (let i = 0; i < notlar.length; i++) {
        toplamNot += notlar[i];
    }
    console.log("Toplam Not: " + toplamNot); // 415

    // for...of döngüsü ile dizide gezinme (daha modern ve okunabilir)
    let enYuksekNot = 0;
    for (let not of notlar) {
        if (not > enYuksekNot) {
            enYuksekNot = not;
        }
    }
    console.log("En Yüksek Not: " + enYuksekNot); // 95

    // forEach() metodu ile dizi elemanlarını gezme
    // forEach, her dizi elemanı için bir fonksiyon çalıştırır
    // index ve array parametrelerini de alabilir
    notlar.forEach(function(not, index) {
        console.log(`${index}. sıradaki not: ${not}`);
    });
    // Çıktı:
    // 0. sıradaki not: 85
    // 1. sıradaki not: 92
    // ...

---

Sonuç

Döngüler ve diziler, JavaScript'te veri işleme ve kontrol akışı için vazgeçilmez araçlardır. Veri koleksiyonlarını düzenlemek, üzerlerinde işlem yapmak ve uygulamanızın davranışını tekrarlayan görevlere göre uyarlamak için bu iki konuyu ustaca kullanmak, sizi daha yetenekli bir geliştirici yapacaktır.

Bol bol pratik yapın ve bu yapıları kendi projelerinizde kullanarak onlara hakim olun. Unutmayın, kodlama pratikle gelişir!

Webkolog'u takipte kalın!

Hepinize bol kodlu ve başarılı projeler dilerim!