Javascript'de Array Nesnesi

Merhaba Webkolog Takipçileri!

Bugün JavaScript'te belki de en çok kullandığımız veri yapılarından birine, yani Dizilere (Arrays) odaklanacağız. Diziler, birden fazla değeri tek bir değişkende düzenli bir şekilde saklamamızı sağlayan güçlü ve esnek yapılardır. Listelerden, tablo verilerinden, sıralı öğelerden oluşan her türlü veri kümesini temsil etmek için dizileri kullanırız. JavaScript'in Array nesnesi, bu diziler üzerinde işlem yapmak için bize zengin bir metot seti sunar. Hazırsanız, verileri düzenlemenin ve manipüle etmenin inceliklerini keşfedelim!

---

Dizi Nedir ve Neden Önemlidir?

JavaScript'te bir dizi, indekslenmiş bir veri koleksiyonudur. Her eleman bir indeks ile ilişkilidir ve bu indeksler genellikle 0'dan başlar (ilk eleman 0. indekstedir). Diziler, farklı veri türlerindeki elemanları (sayılar, string'ler, objeler, hatta başka diziler) bir arada tutabilirler. JavaScript dizileri, diğer bazı programlama dillerindeki "sabit boyutlu diziler"den farklı olarak dinamiktir; yani boyutları çalışma zamanında artırılabilir veya azaltılabilir.

Diziler, aşağıdaki gibi birçok senaryoda vazgeçilmezdir:

• Kullanıcı listeleri, ürün katalogları gibi sıralı veri kümelerini depolama.
• Fonksiyonlardan birden fazla değer döndürme.
• Veri üzerinde toplu işlemler (filtreleme, dönüştürme, sıralama).
• Algoritmalar ve veri yapıları oluşturma.

---

Dizi Oluşturma Yöntemleri

Dizi oluşturmanın birkaç yaygın yolu vardır:

1. Dizi Literali (Tavsiye Edilen)

Köşeli parantezler [] kullanarak doğrudan bir dizi tanımlayabilirsiniz. Bu, en kısa ve en yaygın yöntemdir.

    const meyveler = ["Elma", "Armut", "Çilek"];
    const karisikDizi = ["Ali", 49, true, { adi: "Laptop" }];

    console.log(meyveler[0]); // Elma (ilk eleman)
    console.log(karisikDizi[3].adi); // Laptop (objeye erişim)

2. new Array() Yapıcı Fonksiyonu

Daha az yaygın olsa da, Array yapıcı fonksiyonunu kullanarak da dizi oluşturabilirsiniz.

• Argüman yoksa boş bir dizi: new Array()
• Tek sayısal argüman varsa belirtilen boyutta boş bir dizi: new Array(5) (5 elemanlı boş bir dizi oluşturur)
• Birden fazla veya sayısal olmayan argüman varsa elemanlarla dolu bir dizi: new Array("A", "B", "C")

    const sayilar = new Array(10, 20, 30);
    console.log(sayilar); // [10, 20, 30]

    const bosDizi = new Array(3); // [empty × 3]
    console.log(bosDizi.length); // 3

---

Dizi Özellikleri

1. length Özelliği

Bir dizideki eleman sayısını döndürür. Bu özellik, dizinin sonuna eleman eklemek veya çıkarmak için de kullanılabilir.

    const isimler = ["Ayşe", "Fatma", "Hayriye"];
    console.log(isimler.length); // 3

    isimler.length = 2; // Diziyi kısaltır, "Hayriye" silinir
    console.log(isimler); // ["Ayşe", "Fatma"]

---

Dizi Metotları (Manipülasyon)

1. Eleman Ekleme ve Çıkarma

• push(element1, ...): Bir veya daha fazla elemanı dizinin sonuna ekler ve yeni uzunluğu döndürür.

  
              const renkler = ["kırmızı", "yeşil"];
              renkler.push("mavi", "sarı");
              console.log(renkler); // ["kırmızı", "yeşil", "mavi", "sarı"]
          

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

  
              const hayvanlar = ["kedi", "köpek", "kuş"];
              const cikarilan = hayvanlar.pop();
              console.log(hayvanlar); // ["kedi", "köpek"]
              console.log(cikarilan);  // kuş
          

• unshift(element1, ...): Bir veya daha fazla elemanı dizinin başına ekler ve yeni uzunluğu döndürür.

  
              const sayilar = [2, 3];
              sayilar.unshift(0, 1);
              console.log(sayilar); // [0, 1, 2, 3]
          

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

  
              const harfler = ["A", "B", "C"];
              const cikarilanHarf = harfler.shift();
              console.log(harfler); // ["B", "C"]
              console.log(cikarilanHarf); // A
          

2. Eleman Ekleme/Çıkarma ve Değiştirme (Esnek)

• splice(startIndex, deleteCount, item1, ...): Dizinin içeriğini ekleyerek, çıkararak veya değiştirerek değiştirir.

  
              const ogrenciler = ["Ali", "Ayşe", "Zeynep", "Can"];
  
              // 1. indeksten başlayarak 1 eleman sil
              ogrenciler.splice(1, 1);
              console.log(ogrenciler); // ["Ali", "Zeynep", "Can"]
  
              // 1. indeksten başlayarak 0 eleman sil ve "Murat" ile "Deniz" ekle
              ogrenciler.splice(1, 0, "Murat", "Deniz");
              console.log(ogrenciler); // ["Ali", "Murat", "Deniz", "Zeynep", "Can"]
  
              // 2. indeksten başlayarak 2 eleman sil ve yerine "Burak" ekle
              ogrenciler.splice(2, 2, "Burak");
              console.log(ogrenciler); // ["Ali", "Murat", "Burak", "Can"]
          

3. Dizi Bölme ve Birleştirme

• slice(startIndex, endIndex): Dizinin belirtilen bölümünü yeni bir dizi olarak döndürür. Orijinal diziyi değiştirmez. endIndex dahil değildir.

  
              const tumSayilar = [1, 2, 3, 4, 5, 6];
              const secilenler = tumSayilar.slice(2, 5); // 2. indeksten 5. indekse kadar (5 hariç)
              console.log(secilenler);  // [3, 4, 5]
              console.log(tumSayilar); // [1, 2, 3, 4, 5, 6] (orijinal dizi değişmez)
          

• concat(array1, array2, ...): İki veya daha fazla diziyi birleştirerek yeni bir dizi döndürür.

  
              const dizi1 = ["A", "B"];
              const dizi2 = [1, 2, 3];
              const birlesikDizi = dizi1.concat(dizi2, ["C"]);
              console.log(birlesikDizi); // ["A", "B", 1, 2, 3, "C"]
          

• Spread Operatörü (...) ile Birleştirme (ES6+): Dizileri birleştirmenin modern ve popüler bir yoludur.

  
              const a = [3, 4];
              const b = [1, 2, ...a, 5, 6];
              console.log(b); // [1, 2, 3, 4, 5, 6]
          

• join(separator): Dizinin tüm elemanlarını bir string'e dönüştürür ve elemanları belirtilen ayırıcı ile birleştirir.

  
              const harfler = ["B", "C", "D"];
              console.log(harfler.join("-")); // B-C-D
          

---

Dizi Metotları (İterasyon ve Dönüştürme)

Bu metotlar, dizinin elemanları üzerinde döngü yapmak, filtrelemek, dönüştürmek veya toplu işlemler yapmak için çok kullanışlıdır.

1. Döngü ve Koşul Kontrolü

• forEach(callbackFn): Dizideki her eleman için bir fonksiyon yürütür. Döndürülen bir değer yoktur.

  
              const sayilar = [10, 20, 30];
              sayilar.forEach(function(sayi, index) {
                  console.log(`İndeks ${index}: ${sayi}`);
              });
              // Çıktı:
              // İndeks 0: 10
              // İndeks 1: 20
              // İndeks 2: 30
          

• map(callbackFn): Dizideki her eleman için bir fonksiyon yürütür ve bu fonksiyonun döndürdüğü değerlerle yeni bir dizi oluşturur.

  
              const orjinalDizi = [2, 4, 6];
              const karesiAlinmisDizi = orjinalDizi.map(sayi => sayi * sayi);
              console.log(karesiAlinmisDizi); // [4, 16, 36]
          

• filter(callbackFn): Dizideki elemanları belirli bir koşula göre filtreler ve koşulu sağlayan elemanlarla yeni bir dizi oluşturur.

  
              const tumSayilar = [2, 3.2, 4, 5.6, 3];
              const tamSayilar = tumSayilar.filter(sayi => Number.isInteger(sayi));
              console.log(tamSayilar); // [2, 4, 3]
  
              const buyukSayilar = [4, 5, 1, 8, 2, 0].filter(x => x > 3);
              console.log(buyukSayilar); // [4, 5, 8]
          

• reduce(callbackFn, initialValue): Dizinin her elemanı üzerinde bir fonksiyon yürüterek tek bir sonuç değeri döndürür. Dizideki elemanları toplamak, ortalama almak gibi durumlarda kullanılır.

  
              const sayilar = [1, 2, 3, 4];
              const toplam = sayilar.reduce((toplayici, mevcutDeger) => toplayici + mevcutDeger, 0);
              console.log(toplam); // 10 (0 + 1 + 2 + 3 + 4)
  
              const carpim = [2, 3, 4].reduce((acc, val) => acc * val, 1);
              console.log(carpim); // 24
          

• every(callbackFn): Dizideki tüm elemanların belirtilen koşulu sağlayıp sağlamadığını kontrol eder. true veya false döndürür.

  
              const tumPozitifMi = [1, 5, 8].every(sayi => sayi > 0);
              console.log(tumPozitifMi); // true
  
              const tumCiftMi = [2, 4, 5].every(sayi => sayi % 2 === 0);
              console.log(tumCiftMi); // false
          

• some(callbackFn): Dizideki en az bir elemanın belirtilen koşulu sağlayıp sağlamadığını kontrol eder. true veya false döndürür.

  
              const enAzBirTekMi = [2, 4, 7].some(sayi => sayi % 2 !== 0);
              console.log(enAzBirTekMi); // true
  
              const enAzBirNegatifMi = [1, 5, 8].some(sayi => sayi < 0);
              console.log(enAzBirNegatifMi); // false
          

2. Eleman Arama

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

  
              const meyveler = ["elma", "armut", "elma", "muz"];
              console.log(meyveler.indexOf("elma"));  // 0
              console.log(meyveler.indexOf("üzüm"));  // -1
          

• lastIndexOf(searchElement, fromIndex): Bir elemanın dizideki son indeksini döndürür. Bulamazsa -1 döndürür.

  
              console.log(meyveler.lastIndexOf("elma")); // 2
          

• find(callbackFn) (ES6+): Dizideki belirtilen koşulu sağlayan ilk elemanı döndürür. Bulamazsa undefined döndürür.

  
              const sayilar = [4, 5, 1, 8, 2, 0];
              const ilkBuyukUc = sayilar.find(x => x > 3);
              console.log(ilkBuyukUc); // 4
          

• findIndex(callbackFn) (ES6+): Dizideki belirtilen koşulu sağlayan ilk elemanın indeksini döndürür. Bulamazsa -1 döndürür.

  
              const ilkBuyukUcIndex = sayilar.findIndex(x => x > 3);
              console.log(ilkBuyukUcIndex); // 0 (4'ün indeksi)
          

3. Dizi Sıralama ve Tersine Çevirme

• sort(compareFn): Dizinin elemanlarını yerinde sıralar. Varsayılan olarak elemanları string olarak düşünüp Unicode sıralaması yapar. Sayısal sıralama için bir karşılaştırma fonksiyonu verilmelidir.

  
              const alfabetik = ["Elma", "Armut", "Çilek"];
              alfabetik.sort();
              console.log(alfabetik); // ["Armut", "Çilek", "Elma"]
  
              const sayilar = [40, 1, 5, 200, 10];
              // Doğru sayısal sıralama (küçükten büyüğe)
              sayilar.sort((a, b) => a - b);
              console.log(sayilar); // [1, 5, 10, 40, 200]
              // Büyükten küçüğe
              sayilar.sort((a, b) => b - a);
              console.log(sayilar); // [200, 40, 10, 5, 1]
          

• reverse(): Dizinin elemanlarının sırasını tersine çevirir.

  
              const dizi = ["B", "C", "D"];
              dizi.reverse();
              console.log(dizi); // ["D", "C", "B"]
          

---

Dizi Destructuring (ES6+)

Dizi destructuring, bir dizinin elemanlarını alıp ayrı değişkenlere atamanın kolay ve okunabilir bir yoludur.

    const koordinatlar = [10, 20, 30];
    const [x, y, z] = koordinatlar;
    console.log(x, y, z); // 10 20 30

    // Belirli elemanları atlama
    const [bir, , uc] = ["A", "B", "C"];
    console.log(bir, uc); // A C

    // Varsayılan değerler
    const [ad, yas = 25] = ["Murat"];
    console.log(ad, yas); // Murat 25

    // Kalan elemanları toplama (Rest Operatörü)
    const [ilk, ...kalanlar] = [1, 2, 3, 4, 5];
    console.log(ilk);     // 1
    console.log(kalanlar); // [2, 3, 4, 5]

---

Sonuç

JavaScript'teki diziler, programlama hayatımızın vazgeçilmez bir parçasıdır. Veri koleksiyonlarını düzenli bir şekilde saklamak, üzerlerinde çeşitli işlemler yapmak ve bilgiyi organize etmek için bize inanılmaz bir esneklik sunarlar. push, pop, map, filter, reduce gibi metotlar ve ES6 ile gelen destructuring gibi özellikler, dizilerle çalışmayı çok daha keyifli ve etkili hale getirir.

Dizileri etkin bir şekilde kullanmak, daha temiz, daha verimli ve daha okunabilir kod yazmanızı sağlayacaktır. Bol bol pratik yaparak ve farklı senaryolarda bu metotları deneyimleyerek dizilerdeki ustalığınızı geliştirin!

Webkolog'u takipte kalın!

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