Diziler ve Dizi Metodları

Programlama yaparken, genellikle birden fazla değeri bir arada tutma ihtiyacı duyarız. Örneğin, bir alışveriş listesindeki ürünler, bir sınıftaki öğrencilerin isimleri veya bir blog yazısının etiketleri gibi. JavaScript'te bu tür ilişkili veri koleksiyonlarını saklamak için diziler (arrays) kullanılır.

Bu ders için video bulunmamaktadır.

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

Ders İçeriği

Giriş

Programlama yaparken, genellikle birden fazla değeri bir arada tutma ihtiyacı duyarız. Örneğin, bir alışveriş listesindeki ürünler, bir sınıftaki öğrencilerin isimleri veya bir blog yazısının etiketleri gibi. JavaScript'te bu tür ilişkili veri koleksiyonlarını saklamak için diziler (arrays) kullanılır.

Diziler, sıralı bir veri koleksiyonudur. İçinde farklı türlerde (sayılar, stringler, nesneler, hatta başka diziler) birçok öğeyi barındırabilirler. Diziler, verileri organize etmek, üzerinde döngü yapmak ve çeşitli işlemler gerçekleştirmek için çok güçlü ve esnek bir yapı sunar.

Bu derste, JavaScript'te dizilerin nasıl oluşturulduğunu, elemanlarına nasıl erişildiğini, dizilerin temel özelliklerini ve en önemlisi, diziler üzerinde işlem yapmamızı sağlayan güçlü dizi metodlarını (forEach, map, filter, reduce vb.) öğreneceğiz.

Dizi Oluşturma

JavaScript'te dizi oluşturmanın birkaç yolu vardır:

1. Dizi Literali (Array Literal)

En yaygın ve tercih edilen yöntem, köşeli parantezler [] kullanarak dizi oluşturmaktır. Elemanlar virgülle ayrılır.

dizi_literal.js
// Boş bir dizi
let bosDizi = [];

// Sayılardan oluşan bir dizi
let sayilar = [1, 2, 3, 4, 5];

// Stringlerden oluşan bir dizi
let meyveler = ["elma", "armut", "muz"];

// Farklı veri tiplerinden oluşan bir dizi
let karisikDizi = [10, "merhaba", true, null, { ad: "Ali" }];

console.log(sayilar);
console.log(meyveler);
console.log(karisikDizi);

2. Array Constructor

new Array() yapıcısını kullanarak da dizi oluşturabilirsiniz. Ancak bu yöntem genellikle daha az tercih edilir ve bazı kafa karıştırıcı durumlara yol açabilir.

array_constructor.js
// Boş bir dizi
let dizi1 = new Array();

// Elemanlarla dizi oluşturma
let dizi2 = new Array("kırmızı", "mavi", "yeşil");

// Tek bir sayı argümanı ile: Belirtilen uzunlukta boş bir dizi oluşturur!
let dizi3 = new Array(5); // 5 elemanlık boş bir dizi [empty x 5]
console.log(dizi3.length); // 5
console.log(dizi3); // [ <5 empty items> ]

console.log(dizi2);

Uyarı: new Array() yapıcısına tek bir sayı argümanı verdiğinizde, o sayıda eleman içeren bir dizi yerine, belirtilen uzunlukta boş bir dizi oluşturur. Bu beklenmedik davranışlara yol açabileceğinden, genellikle dizi literali [] kullanmak daha güvenlidir.

Dizi Elemanlarına Erişme ve Değiştirme

Dizi elemanlarına, dizinin adını ve ardından köşeli parantez içinde elemanın indeksini (sıra numarası) kullanarak erişilir. JavaScript'te dizi indeksleri 0'dan başlar.

dizi_erisim.js
let renkler = ["kırmızı", "mavi", "yeşil", "sarı"];

// İlk elemana erişme (indeks 0)
console.log(renkler[0]); // "kırmızı"

// Üçüncü elemana erişme (indeks 2)
console.log(renkler[2]); // "yeşil"

// Son elemana erişme (length - 1)
console.log(renkler[renkler.length - 1]); // "sarı"

// Olmayan bir indekse erişme
console.log(renkler[10]); // undefined

// Bir elemanın değerini değiştirme
renkler[1] = "mor";
console.log(renkler); // ["kırmızı", "mor", "yeşil", "sarı"]

// Yeni bir eleman ekleme (indeks belirterek)
renkler[4] = "turuncu";
console.log(renkler); // ["kırmızı", "mor", "yeşil", "sarı", "turuncu"]

// Dizinin uzunluğunu değiştirme
renkler.length = 3;
console.log(renkler); // ["kırmızı", "mor", "yeşil"] (Son elemanlar silindi)

Dizi Uzunluğu (length)

Bir dizinin length özelliği, dizideki eleman sayısını verir. Bu özellik sadece okunabilir değil, aynı zamanda yazılabilirdir. length değerini küçülterek dizinin sonundaki elemanları silebilir veya büyüterek diziye boş (undefined) elemanlar ekleyebilirsiniz.

Temel Dizi Metodları

JavaScript, diziler üzerinde işlem yapmak için birçok yerleşik metod sunar. Bu metodlar, dizilere eleman ekleme, çıkarma, dizileri birleştirme, sıralama ve daha birçok işlemi kolaylaştırır.

Eleman Ekleme/Çıkarma Metodları

  • push(): Dizinin sonuna bir veya daha fazla eleman ekler ve dizinin yeni uzunluğunu döndürür.
  • pop(): Dizinin sonundaki elemanı çıkarır ve çıkarılan elemanı döndürür. Dizi boşsa undefined döndürür.
  • unshift(): Dizinin başına bir veya daha fazla eleman ekler ve dizinin yeni uzunluğunu döndürür.
  • shift(): Dizinin başındaki elemanı çıkarır ve çıkarılan elemanı döndürür. Dizi boşsa undefined döndürür.
push_pop_shift_unshift.js
let hayvanlar = ["kedi", "köpek"];

// push ile sona ekleme
hayvanlar.push("kuş", "balık");
console.log(hayvanlar); // ["kedi", "köpek", "kuş", "balık"]

// pop ile sondan çıkarma
let sonHayvan = hayvanlar.pop();
console.log("Çıkarılan:", sonHayvan); // "balık"
console.log(hayvanlar); // ["kedi", "köpek", "kuş"]

// unshift ile başa ekleme
hayvanlar.unshift("fare");
console.log(hayvanlar); // ["fare", "kedi", "köpek", "kuş"]

// shift ile baştan çıkarma
let ilkHayvan = hayvanlar.shift();
console.log("Çıkarılan:", ilkHayvan); // "fare"
console.log(hayvanlar); // ["kedi", "köpek", "kuş"]

Not: unshift ve shift metodları, dizinin başındaki elemanlarla işlem yaptığı için genellikle push ve pop'a göre daha yavaştır, çünkü dizideki diğer tüm elemanların indekslerinin kaydırılması gerekir.

Dizi Bölümlerini Alma ve Değiştirme

  • slice(baslangic?, bitis?): Dizinin belirtilen başlangıç indeksinden (dahil) bitiş indeksine (hariç) kadar olan bölümünü kopyalayarak yeni bir dizi döndürür. Orijinal diziyi değiştirmez. Argüman verilmezse tüm diziyi kopyalar. Negatif indeksler sondan saymayı ifade eder.
  • splice(baslangic, silinecekSayi?, eklenecekOge1?, ...): Diziden elemanları çıkarır ve/veya yerine yenilerini ekler. Orijinal diziyi değiştirir! Çıkarılan elemanları içeren bir dizi döndürür.
slice_splice.js
let harfler = ["a", "b", "c", "d", "e", "f"];

// slice ile bölüm alma
let bolum1 = harfler.slice(1, 4); // İndeks 1'den 4'e kadar (4 hariç)
console.log(bolum1); // ["b", "c", "d"]
console.log(harfler); // Orijinal dizi değişmedi: ["a", "b", "c", "d", "e", "f"]

let bolum2 = harfler.slice(2); // İndeks 2'den sona kadar
console.log(bolum2); // ["c", "d", "e", "f"]

let bolum3 = harfler.slice(-3); // Sondan 3 eleman
console.log(bolum3); // ["d", "e", "f"]

// splice ile eleman silme
let silinenler = harfler.splice(1, 2); // İndeks 1'den başla, 2 eleman sil
console.log("Silinenler:", silinenler); // ["b", "c"]
console.log(harfler); // Orijinal dizi değişti: ["a", "d", "e", "f"]

// splice ile eleman ekleme (silmeden)
harfler.splice(2, 0, "X", "Y"); // İndeks 2'ye "X" ve "Y" ekle, 0 eleman sil
console.log(harfler); // ["a", "d", "X", "Y", "e", "f"]

// splice ile eleman değiştirme
harfler.splice(0, 1, "A"); // İndeks 0'daki 1 elemanı sil, yerine "A" ekle
console.log(harfler); // ["A", "d", "X", "Y", "e", "f"]

Dizileri Birleştirme ve String'e Dönüştürme

  • concat(dizi1?, dizi2?, ...): Mevcut diziye bir veya daha fazla dizi veya değeri birleştirerek yeni bir dizi döndürür. Orijinal dizileri değiştirmez.
  • join(ayirici?): Dizinin tüm elemanlarını birleştirerek bir string oluşturur. Elemanlar arasına isteğe bağlı olarak belirtilen ayırıcıyı koyar (varsayılan olarak virgüldür).
concat_join.js
let diziA = [1, 2];
let diziB = [3, 4];
let diziC = [5, 6];

let birlesikDizi = diziA.concat(diziB, diziC, 7);
console.log(birlesikDizi); // [1, 2, 3, 4, 5, 6, 7]
console.log(diziA); // [1, 2] (Orijinal değişmedi)

let kelimeler = ["Bu", "bir", "cümle"];
let cumle1 = kelimeler.join(); // Varsayılan ayırıcı: virgül
console.log(cumle1); // "Bu,bir,cümle"

let cumle2 = kelimeler.join(" "); // Ayırıcı: boşluk
console.log(cumle2); // "Bu bir cümle"

let cumle3 = kelimeler.join("-"); // Ayırıcı: tire
console.log(cumle3); // "Bu-bir-cümle"

Döngüsel Dizi Metodları (Iteration Methods)

JavaScript, dizinin her bir elemanı üzerinde işlem yapmak için çok kullanışlı döngüsel metodlar sunar. Bu metodlar genellikle bir callback fonksiyonu alır ve dizinin her elemanı için bu fonksiyonu çalıştırır.

forEach(callback(eleman, indeks, dizi))

Dizinin her elemanı için belirtilen callback fonksiyonunu bir kez çalıştırır. Geriye bir değer döndürmez (undefined döndürür). Genellikle dizinin her elemanıyla bir işlem yapmak (örneğin, ekrana yazdırmak) için kullanılır.

forEach.js
let sehirler = ["İstanbul", "Ankara", "İzmir"];

sehirler.forEach(function(sehir, index) {
    console.log(`${index + 1}. Şehir: ${sehir}`);
});

// Ok fonksiyonu ile daha kısa yazım:
sehirler.forEach((sehir, index) => console.log(`Şehir ${index}: ${sehir}`));

// Çıktı:
// 1. Şehir: İstanbul
// 2. Şehir: Ankara
// 3. Şehir: İzmir
// Şehir 0: İstanbul
// Şehir 1: Ankara
// Şehir 2: İzmir

map(callback(eleman, indeks, dizi))

Dizinin her elemanı için belirtilen callback fonksiyonunu çalıştırır ve bu fonksiyonun döndürdüğü değerlerden oluşan yeni bir dizi oluşturur. Orijinal diziyi değiştirmez. Dizinin elemanlarını dönüştürmek için kullanılır.

map.js
let sayilar = [1, 4, 9, 16];

// Her elemanın karekökünü alıp yeni bir dizi oluşturma
let karekokler = sayilar.map(function(sayi) {
    return Math.sqrt(sayi);
});
console.log(karekokler); // [1, 2, 3, 4]
console.log(sayilar); // Orijinal dizi değişmedi: [1, 4, 9, 16]

// Ok fonksiyonu ile:
let ikiKatları = sayilar.map(sayi => sayi * 2);
console.log(ikiKatları); // [2, 8, 18, 32]

// Nesne dizisini dönüştürme
let kullanicilar = [
    { id: 1, ad: "Ali" },
    { id: 2, ad: "Veli" },
    { id: 3, ad: "Ayşe" }
];
let kullaniciAdlari = kullanicilar.map(kullanici => kullanici.ad);
console.log(kullaniciAdlari); // ["Ali", "Veli", "Ayşe"]

filter(callback(eleman, indeks, dizi))

Dizinin her elemanı için belirtilen callback fonksiyonunu çalıştırır. Callback fonksiyonu true döndüren elemanlardan oluşan yeni bir dizi oluşturur. Orijinal diziyi değiştirmez. Belirli bir koşulu sağlayan elemanları seçmek için kullanılır.

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

// Çift sayıları filtreleme
let ciftRakamlar = rakamlar.filter(function(rakam) {
    return rakam % 2 === 0;
});
console.log(ciftRakamlar); // [2, 4, 6, 8, 10]
console.log(rakamlar); // Orijinal dizi değişmedi

// Ok fonksiyonu ile:
let buyukSayilar = rakamlar.filter(rakam => rakam > 5);
console.log(buyukSayilar); // [6, 7, 8, 9, 10]

// Belirli bir harfle başlayan kelimeleri filtreleme
let kelimeler = ["elma", "armut", "muz", "erik", "ayva"];
let eIleBaslayanlar = kelimeler.filter(kelime => kelime.startsWith("e"));
console.log(eIleBaslayanlar); // ["elma", "erik"]

reduce(callback(birikim, eleman, indeks, dizi), baslangicDegeri?)

Dizinin elemanlarını soldan sağa doğru işleyerek tek bir değere indirger (reduce). Callback fonksiyonu dört argüman alır: birikim (accumulator - önceki adımdan dönen değer veya başlangıç değeri), eleman (current value), indeks (current index) ve dizi (array). İsteğe bağlı olarak bir baslangicDegeri (initial value) alabilir.

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

// Dizideki sayıların toplamını bulma
let toplam = sayilar.reduce(function(birikim, sayi) {
    console.log(`Birikim: ${birikim}, Sayı: ${sayi}`);
    return birikim + sayi;
}, 0); // Başlangıç değeri 0
console.log("Toplam:", toplam); // 15

// Ok fonksiyonu ile:
let carpim = sayilar.reduce((birikim, sayi) => birikim * sayi, 1); // Başlangıç değeri 1
console.log("Çarpım:", carpim); // 120

// Dizideki en büyük sayıyı bulma
let enBuyuk = sayilar.reduce((maks, sayi) => (sayi > maks ? sayi : maks), sayilar[0]);
console.log("En Büyük:", enBuyuk); // 5

// Nesne dizisinden toplam fiyat hesaplama
let urunler = [
    { ad: "Kalem", fiyat: 5 },
    { ad: "Defter", fiyat: 15 },
    { ad: "Silgi", fiyat: 3 }
];
let toplamFiyat = urunler.reduce((toplam, urun) => toplam + urun.fiyat, 0);
console.log("Toplam Fiyat:", toplamFiyat); // 23

İpucu: reduce metodu oldukça çok yönlüdür. Sadece toplama veya çarpma değil, dizileri filtreleme, gruplama, düzleştirme gibi birçok farklı işlem için kullanılabilir.

Diğer Kullanışlı Dizi Metodları

  • find(callback(eleman, indeks, dizi)): Callback fonksiyonunu true döndüren ilk elemanı bulur ve döndürür. Eleman bulunamazsa undefined döndürür.
  • findIndex(callback(eleman, indeks, dizi)): Callback fonksiyonunu true döndüren ilk elemanın indeksini bulur ve döndürür. Eleman bulunamazsa -1 döndürür.
  • includes(arananEleman, baslangicIndeksi?): Dizinin belirtilen elemanı içerip içermediğini kontrol eder. true veya false döndürür.
  • some(callback(eleman, indeks, dizi)): Dizideki en az bir eleman callback fonksiyonunu true yapıyorsa true döndürür, aksi takdirde false.
  • every(callback(eleman, indeks, dizi)): Dizideki tüm elemanlar callback fonksiyonunu true yapıyorsa true döndürür, aksi takdirde false.
  • sort(karsilastirmaFonksiyonu?): Dizinin elemanlarını yerinde sıralar. Varsayılan olarak elemanları string'e çevirip Unicode değerlerine göre sıralar (bu sayılar için beklenmedik sonuçlar verebilir). Sayısal veya özel sıralama için bir karşılaştırma fonksiyonu gerekir.
  • reverse(): Dizinin elemanlarının sırasını yerinde tersine çevirir.
  • flat(derinlik?): İç içe dizileri belirtilen derinliğe kadar düzleştirerek yeni bir dizi oluşturur. Varsayılan derinlik 1'dir.
  • Array.isArray(deger): Verilen değerin bir dizi olup olmadığını kontrol eden statik bir metoddur. true veya false döndürür.
diger_metodlar.js
let sayilar = [10, 5, 8, 20, 15, 8];
let meyveler = ["elma", "muz", "kiraz"];

// find
let bulunanSayi = sayilar.find(sayi => sayi > 10);
console.log("10'dan büyük ilk sayı:", bulunanSayi); // 20

// findIndex
let bulunanIndeks = sayilar.findIndex(sayi => sayi === 8);
console.log("8'in ilk indeksi:", bulunanIndeks); // 2
let olmayanIndeks = sayilar.findIndex(sayi => sayi === 100);
console.log("100'ün indeksi:", olmayanIndeks); // -1

// includes
console.log("Muz var mı?", meyveler.includes("muz")); // true
console.log("Armut var mı?", meyveler.includes("armut")); // false

// some
let ondanBuyukVarMi = sayilar.some(sayi => sayi > 10);
console.log("10'dan büyük sayı var mı?", ondanBuyukVarMi); // true

// every
let hepsiPozitifMi = sayilar.every(sayi => sayi > 0);
console.log("Hepsi pozitif mi?", hepsiPozitifMi); // true
let hepsiOndanBuyukMu = sayilar.every(sayi => sayi > 10);
console.log("Hepsi 10'dan büyük mü?", hepsiOndanBuyukMu); // false

// sort (sayısal sıralama için karşılaştırma fonksiyonu ile)
sayilar.sort((a, b) => a - b); // Küçükten büyüğe sıralama
console.log("Sıralı sayılar:", sayilar); // [5, 8, 8, 10, 15, 20]
sayilar.sort((a, b) => b - a); // Büyükten küçüğe sıralama
console.log("Ters sıralı sayılar:", sayilar); // [20, 15, 10, 8, 8, 5]

meyveler.sort(); // Alfabetik sıralama (varsayılan)
console.log("Sıralı meyveler:", meyveler); // ["elma", "kiraz", "muz"]

// reverse
meyveler.reverse();
console.log("Ters çevrilmiş meyveler:", meyveler); // ["muz", "kiraz", "elma"]

// flat
let icIceDizi = [1, 2, [3, 4], 5, [6, [7, 8]]];
let duzDizi1 = icIceDizi.flat(); // Varsayılan derinlik 1
console.log(duzDizi1); // [1, 2, 3, 4, 5, 6, [7, 8]]
let duzDizi2 = icIceDizi.flat(2); // Derinlik 2
console.log(duzDizi2); // [1, 2, 3, 4, 5, 6, 7, 8]

// Array.isArray
console.log(Array.isArray(sayilar)); // true
console.log(Array.isArray("Merhaba")); // false
console.log(Array.isArray({})); // false

Alıştırmalar

  1. Verilen bir sayı dizisindeki tüm pozitif sayıların toplamını filter ve reduce kullanarak bulun.
  2. Bir string dizisi içindeki tüm string'leri büyük harfe çevirip yeni bir dizi olarak döndüren bir kod yazın (map kullanın).
  3. Bir öğrenci nesneleri dizisi (her nesne {ad: '...', not: ...} şeklinde) içinden notu 50'den yüksek olan öğrencilerin sadece adlarını içeren yeni bir dizi oluşturun (filter ve map kullanın).
  4. Bir dizide belirli bir elemanın kaç kez geçtiğini bulan bir fonksiyon yazın (reduce kullanabilirsiniz).
  5. Bir dizinin kopyasını oluşturan ve orijinal diziyi değiştirmeyen bir yol bulun (slice veya spread operatörü ... kullanabilirsiniz).

Bu derste JavaScript'teki dizileri ve güçlü dizi metodlarını öğrendik:

  • Diziler: Sıralı veri koleksiyonlarıdır, farklı veri tiplerini içerebilirler. Dizi literali [] ile oluşturulurlar.
  • Eleman Erişimi: İndeks numarası (0'dan başlar) ile yapılır: dizi[indeks].
  • length Özelliği: Dizinin eleman sayısını verir ve değiştirilebilir.
  • Temel Metodlar: push, pop, shift, unshift (ekleme/çıkarma), slice, splice (bölüm alma/değiştirme), concat, join (birleştirme/string'e çevirme).
  • Döngüsel Metodlar:
    • forEach: Her eleman için işlem yapar (değer döndürmez).
    • map: Her elemanı dönüştürerek yeni bir dizi oluşturur.
    • filter: Koşulu sağlayan elemanlardan yeni bir dizi oluşturur.
    • reduce: Diziyi tek bir değere indirger.
  • Diğer Metodlar: find, findIndex, includes, some, every, sort, reverse, flat, Array.isArray.

Diziler ve dizi metodları, JavaScript'te veri işleme ve manipülasyonu için temel araçlardır. Bu metodları etkili bir şekilde kullanmak, daha temiz, okunabilir ve verimli kod yazmanızı sağlar.

Bir sonraki derste, JavaScript'in diğer önemli veri yapısı olan nesneleri (objects) ve özelliklerini inceleyeceğiz.

Kapsam (Scope) ve Closure Nesneler ve Özellikleri