JavaScript’te Diziler Hakkında Bilmeniz Gereken Her Şey: Kapsamlı Bir Rehber
JavaScript, web geliştirmenin temel taşlarından biridir ve bu dilin en güçlü ve sık kullanılan veri yapılarından biri de dizilerdir. Diziler, birden fazla değeri tek bir değişkende düzenli bir şekilde saklamanıza olanak tanır. Bu sayede, ilişkili veri koleksiyonlarını yönetmek, işlemek ve üzerinde çeşitli operasyonlar gerçekleştirmek çok daha kolay hale gelir. Bu makalede, JavaScript dizilerinin temellerinden başlayarak, gelişmiş manipülasyon metotlarına, iterasyon tekniklerine ve sıkça karşılaşılan senaryolara kadar bilmeniz gereken her şeyi detaylı bir şekilde inceleyeceğiz.
Dizilere Giriş ve Temel Kavramlar
Diziler, sıralı bir koleksiyonu temsil eden özel bir nesne türüdür. Her elemanın bir indeksi (sıra numarası) bulunur ve bu indeksler genellikle 0’dan başlar. JavaScript dizileri, farklı veri tiplerini (sayılar, metinler, boolean değerler, hatta diğer diziler veya nesneler) aynı anda barındırabilir.
Dizi Tanımlama Yöntemleri
JavaScript’te dizi tanımlamanın iki ana yolu vardır:
- Dizi Literali Kullanarak: En yaygın ve önerilen yöntemdir. Köşeli parantezler
[]içine elemanları virgülle ayırarak yazılır. Array()Kurucu Fonksiyonunu Kullanarak: Daha az tercih edilen bir yöntemdir.
// Dizi Literali ile tanımlama
const meyveler = ["Elma", "Armut", "Çilek"];
// Array() kurucu fonksiyonu ile tanımlama
const sayilar = new Array(1, 2, 3, 4, 5);
// Boş dizi tanımlama
const bosDizi = [];
const baskaBosDizi = new Array();
// Belirli bir uzunlukta boş dizi (elemanları undefined)
const onElemanliDizi = new Array(10); // [undefined, undefined, ..., undefined]
Dizi Elemanlarına Erişim
Dizi elemanlarına indeks numaraları aracılığıyla erişilir. İlk elemanın indeksi 0, ikincinin 1 ve bu böyle devam eder. Dizinin uzunluğunu .length özelliği ile bulabilirsiniz.
const renkler = ["Kırmızı", "Mavi", "Yeşil"];
console.log(renkler[0]); // "Kırmızı"
console.log(renkler[1]); // "Mavi"
console.log(renkler[renkler.length - 1]); // "Yeşil" (son eleman)
// Olmayan bir indekse erişim undefined döndürür
console.log(renkler[3]); // undefined
Dizilerin Dinamik Yapısı
JavaScript dizileri dinamiktir; yani boyutları sabit değildir. İstediğiniz zaman eleman ekleyebilir veya çıkarabilirsiniz. Ayrıca, farklı veri tiplerini aynı dizide tutabilirler.
const karisikDizi = [1, "Merhaba", true, { ad: "Ali" }];
console.log(karisikDizi); // [1, "Merhaba", true, { ad: "Ali" }]
karisikDizi[4] = "Yeni Eleman";
console.log(karisikDizi); // [1, "Merhaba", true, { ad: "Ali" }, "Yeni Eleman"]
Dizi Manipülasyon Metotları: Ekleme ve Çıkarma
Dizilere eleman eklemek veya çıkarmak için birçok kullanışlı metot bulunur. Bu metotlar dizinin başından, sonundan veya ortasından işlem yapmanıza olanak tanır.
push() ve pop()
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.
const sehirler = ["Ankara", "İzmir"];
sehirler.push("İstanbul"); // sehirler şimdi ["Ankara", "İzmir", "İstanbul"]
console.log(sehirler);
const cikarilanSehir = sehirler.pop(); // "İstanbul" çıkarılır
console.log(sehirler); // ["Ankara", "İzmir"]
console.log(cikarilanSehir); // "İstanbul"
unshift() ve shift()
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.
const harfler = ["b", "c"];
harfler.unshift("a"); // harfler şimdi ["a", "b", "c"]
console.log(harfler);
const cikarilanHarf = harfler.shift(); // "a" çıkarılır
console.log(harfler); // ["b", "c"]
console.log(cikarilanHarf); // "a"
splice() Metodu
splice() metodu, dizinin ortasından eleman eklemek, çıkarmak veya değiştirmek için kullanılır. Çok yönlü bir metottur.
splice(başlangıçİndeksi, silinecekElemanSayısı, eklenecekEleman1, eklenecekEleman2, ...)
const sayiListesi = [1, 2, 3, 4, 5];
// 2. indeksten başlayarak 1 eleman sil ve "x", "y" ekle
sayiListesi.splice(2, 1, "x", "y");
console.log(sayiListesi); // [1, 2, "x", "y", 4, 5]
// 4. indeksten başlayarak 2 eleman sil
sayiListesi.splice(4, 2);
console.log(sayiListesi); // [1, 2, "x", "y"]
// 1. indeksten başlayarak hiç eleman silmeden "z" ekle
sayiListesi.splice(1, 0, "z");
console.log(sayiListesi); // [1, "z", 2, "x", "y"]
Dizi Manipülasyon Metotları: Değiştirme ve Birleştirme
Mevcut dizileri değiştirmeden yeni diziler oluşturmak veya birden fazla diziyi birleştirmek için kullanılan metotlar da mevcuttur.
slice() Metodu
slice() metodu, bir dizinin belirli bir bölümünü kopyalayarak yeni bir dizi oluşturur. Orijinal diziye dokunmaz.
slice(başlangıçİndeksi, bitişİndeksi): Bitiş indeksi dahil değildir.
const hayvanlar = ["kedi", "köpek", "kuş", "balık", "tavşan"];
const evcilHayvanlar = hayvanlar.slice(0, 3);
console.log(evcilHayvanlar); // ["kedi", "köpek", "kuş"]
const sonIkiHayvan = hayvanlar.slice(-2); // Sondan 2 elemanı alır
console.log(sonIkiHayvan); // ["balık", "tavşan"]
const tumHayvanlarKopya = hayvanlar.slice(); // Dizinin tamamının kopyası
console.log(tumHayvanlarKopya); // ["kedi", "köpek", "kuş", "balık", "tavşan"]
concat() Metodu
concat() metodu, iki veya daha fazla diziyi birleştirerek yeni bir dizi oluşturur. Orijinal dizileri değiştirmez.
const dizi1 = [1, 2];
const dizi2 = [3, 4];
const dizi3 = [5, 6];
const birlesikDizi = dizi1.concat(dizi2, dizi3);
console.log(birlesikDizi); // [1, 2, 3, 4, 5, 6]
console.log(dizi1); // [1, 2] (orijinal dizi değişmez)
fill() Metodu
fill() metodu, bir dizinin tüm elemanlarını veya belirli bir aralıktaki elemanlarını statik bir değerle doldurur.
fill(değer, başlangıçİndeksi, bitişİndeksi)
const arr = [1, 2, 3, 4, 5];
arr.fill(0); // Tüm diziyi 0 ile doldurur
console.log(arr); // [0, 0, 0, 0, 0]
const arr2 = [1, 2, 3, 4, 5];
arr2.fill("x", 1, 4); // 1. indeksten (dahil) 4. indekse (hariç) kadar "x" ile doldurur
console.log(arr2); // [1, "x", "x", "x", 5]
Dizi İterasyon Metotları
JavaScript, diziler üzerinde döngü yapmak ve her eleman üzerinde belirli işlemler gerçekleştirmek için güçlü iterasyon metotları sunar. Bu metotlar genellikle daha okunabilir ve işlevsel kod yazmayı sağlar.
forEach()
forEach() metodu, dizinin her elemanı için bir fonksiyonu bir kez çalıştırır. Geriye bir değer döndürmez, sadece yan etkiler (side effects) için kullanılır.
const isimler = ["Ayşe", "Mehmet", "Zeynep"];
isimler.forEach(function(isim, indeks) {
console.log(${indeks + 1}. isim: ${isim});
});
// Çıktı:
// 1. isim: Ayşe
// 2. isim: Mehmet
// 3. isim: Zeynep
map()
map() metodu, dizinin her elemanı için bir fonksiyonu çağırır ve bu fonksiyonun döndürdüğü değerlerle yeni bir dizi oluşturur. Orijinal diziyi değiştirmez.
const rakamlar = [1, 2, 3, 4];
const karesiAlinmisRakamlar = rakamlar.map(function(rakam) {
return rakam * rakam;
});
console.log(rakamlar); // [1, 2, 3, 4] (orijinal dizi değişmez)
console.log(karesiAlinmisRakamlar); // [1, 4, 9, 16]
filter()
filter() metodu, dizinin her elemanı için bir fonksiyonu çağırır ve bu fonksiyonun true döndürdüğü elemanlardan oluşan yeni bir dizi oluşturur. Orijinal diziyi değiştirmez.
const yaslar = [18, 22, 15, 30, 17];
const yetiskinler = yaslar.filter(function(yas) {
return yas >= 18;
});
console.log(yaslar); // [18, 22, 15, 30, 17]
console.log(yetiskinler); // [18, 22, 30]
reduce()
reduce() metodu, dizinin her elemanı için bir "reducer" fonksiyonunu çalıştırır ve tek bir sonuç değeri döndürür. Bu, dizideki tüm elemanları toplayarak, birleştirerek veya başka bir şekilde tek bir değere indirgeyerek kullanışlıdır.
reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)
const fiyatlar = [10, 20, 30, 40];
const toplamFiyat = fiyatlar.reduce(function(toplam, fiyat) {
return toplam + fiyat;
}, 0); // 0 başlangıç değeri
console.log(toplamFiyat); // 100
Dizi Sorgulama ve Arama Metotları
Dizilerde belirli elemanları bulmak, varlığını kontrol etmek veya belirli koşulları sağlayan elemanları sorgulamak için çeşitli metotlar mevcuttur.
indexOf(), lastIndexOf() ve includes()
indexOf(): Belirtilen bir elemanın dizideki ilk indeksini döndürür. Bulamazsa -1 döndürür.lastIndexOf(): Belirtilen bir elemanın dizideki son indeksini döndürür. Bulamazsa -1 döndürür.includes(): Belirtilen bir elemanın dizide olup olmadığını kontrol eder vetrueveyafalsedöndürür.
const meyveler = ["Elma", "Armut", "Elma", "Muz"];
console.log(meyveler.indexOf("Elma")); // 0
console.log(meyveler.lastIndexOf("Elma")); // 2
console.log(meyveler.indexOf("Kiraz")); // -1
console.log(meyveler.includes("Armut")); // true
console.log(meyveler.includes("Kiraz")); // false
find() ve findIndex()
find(): Belirtilen test fonksiyonunu geçen ilk elemanın değerini döndürür. Bulamazsaundefineddöndürür.findIndex(): Belirtilen test fonksiyonunu geçen ilk elemanın indeksini döndürür. Bulamazsa -1 döndürür.
const urunler = [
{ id: 1, ad: "Laptop", fiyat: 1200 },
{ id: 2, ad: "Klavye", fiyat: 80 },
{ id: 3, ad: "Mouse", fiyat: 30 }
];
const pahaliUrun = urunler.find(urun => urun.fiyat > 1000);
console.log(pahaliUrun); // { id: 1, ad: "Laptop", fiyat: 1200 }
const ucuzUrunIndeks = urunler.findIndex(urun => urun.fiyat < 50);
console.log(ucuzUrunIndeks); // 2 (Mouse'un indeksi)
some() ve every()
some(): Dizideki elemanlardan en az birinin belirtilen koşulu sağlayıp sağlamadığını kontrol eder vetrueveyafalsedöndürür.every(): Dizideki tüm elemanların belirtilen koşulu sağlayıp sağlamadığını kontrol eder vetrueveyafalsedöndürür.
const notlar = [85, 92, 78, 65];
const gectiMi = notlar.some(not => not >= 70);
console.log(gectiMi); // true (85, 92, 78 geçti)
const hepsiGectiMi = notlar.every(not => not >= 60);
console.log(hepsiGectiMi); // true (tüm notlar 60'ın üzerinde)
const hepsi90UzeriMi = notlar.every(not => not >= 90);
console.log(hepsi90UzeriMi); // false (78 ve 65 90'ın altında)
Gelişmiş Dizi Konuları ve İpuçları
Dizilerle çalışırken işinizi kolaylaştıracak bazı gelişmiş teknikler ve performans ipuçları da bulunmaktadır.
Array.from() ve Spread Operatörü (...)
Array.from(): Dizi benzeri (örneğin NodeList, arguments) veya yinelenebilir (iterable) bir nesneden yeni, sığ kopyalanmış birArrayörneği oluşturur.- Spread Operatörü (
...): Bir dizinin elemanlarını başka bir diziye veya fonksiyona ayrı ayrı aktarmak için kullanılır. Dizi kopyalamada ve birleştirmede çok kullanışlıdır.
// String'den dizi oluşturma
const kelime = "Merhaba";
const harfDizisi = Array.from(kelime);
console.log(harfDizisi); // ["M", "e", "r", "h", "a", "b", "a"]
// Spread operatörü ile dizi kopyalama
const orijinalDizi = [1, 2, 3];
const kopyaDizi = [...orijinalDizi];
console.log(kopyaDizi); // [1, 2, 3]
// Spread operatörü ile dizi birleştirme
const diziA = [1, 2];
const diziB = [3, 4];
const birlesik = [...diziA, ...diziB, 5];
console.log(birlesik); // [1, 2, 3, 4, 5]
Çok Boyutlu Diziler (Nested Arrays)
Diziler, başka dizileri de eleman olarak içerebilir. Bu sayede matrisler veya daha karmaşık veri yapıları oluşturulabilir.
const matris = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
console.log(matris[0][1]); // 2 (ilk satırın ikinci elemanı)
console.log(matris[2][0]); // 7 (üçüncü satırın ilk elemanı)
Dizi Kopyalama Yöntemleri
Dizileri kopyalarken dikkatli olmak gerekir. Direkt atama yapmak (const yeniDizi = eskiDizi;) referansı kopyalar, dizinin kendisini değil. Bu durumda, yeni dizi üzerinde yapılan değişiklikler orijinal diziyi de etkiler. "Sığ kopyalama" ve "derin kopyalama" kavramları önemlidir.
- Sığ Kopyalama:
- Spread Operatörü (
[...orijinalDizi]) slice()metodu (orijinalDizi.slice())Array.from()metodu (Array.from(orijinalDizi))concat()metodu ([].concat(orijinalDizi))
Bu yöntemler, dizi elemanları ilkel tiplerse (sayı, string, boolean) tamamen bağımsız bir kopya oluşturur. Ancak elemanlar nesne veya başka bir diziyse, bu nesnelerin/dizilerin referansları kopyalanır, yani aynı nesneyi işaret ederler.
- Spread Operatörü (
- Derin Kopyalama:
İç içe geçmiş nesneleri ve dizileri de bağımsız olarak kopyalamak için genellikle JSON yöntemleri (
JSON.parse(JSON.stringify(orijinalDizi))) veya özel kütüphaneler (örneğin Lodash'deki_.cloneDeep()) kullanılır. Ancak JSON yöntemi fonksiyonları veyaundefinedgibi bazı veri tiplerini kopyalayamaz.
Dizilerde Performans İpuçları
- Büyük dizilerde
forEach,map,filtergibi metotları kullanırken dikkatli olun. Her biri yeni bir dizi oluşturabilir veya her eleman için bir fonksiyon çağrısı yapabilir, bu da performansı etkileyebilir. - Dizinin sonuna eleman eklemek (
push()) genellikle başa eklemekten (unshift()) daha hızlıdır, çünküunshift()mevcut tüm elemanların indekslerini değiştirmeyi gerektirir. - Gereksiz yere büyük dizileri kopyalamaktan kaçının. Eğer orijinal diziyi değiştirmek sorun değilse, yerinde (in-place) değişiklik yapan metotları (örneğin
splice()) tercih edebilirsiniz. - Döngülerde dizinin uzunluğunu her seferinde yeniden hesaplamak yerine bir değişkende saklamak küçük bir performans artışı sağlayabilir (örneğin
for (let i = 0, len = arr.length; i < len; i++)).
Sonuç
JavaScript dizileri, modern web geliştirmenin vazgeçilmez bir parçasıdır. Veri koleksiyonlarını düzenlemek, işlemek ve yönetmek için sundukları esneklik ve zengin metot setleri sayesinde, karmaşık uygulamaları daha verimli bir şekilde geliştirmenize olanak tanır. Bu makalede ele aldığımız temel tanımlama yöntemlerinden gelişmiş iterasyon ve manipülasyon metotlarına kadar tüm bu bilgiler, JavaScript'te dizilerle çalışırken sağlam bir temel oluşturmanıza yardımcı olacaktır. Pratik yaparak ve farklı senaryolarda bu metotları deneyerek bilginizi pekiştirmeniz, JavaScript yeteneklerinizi bir üst seviyeye taşıyacaktır.
SSS (Sık Sorulan Sorular)
1. Bir dizinin boyutu (eleman sayısı) nasıl bulunur?
Bir dizinin eleman sayısını bulmak için .length özelliğini kullanabilirsiniz.
const ornekDizi = [10, 20, 30];
console.log(ornekDizi.length); // 3
2. Bir değişkenin dizi olup olmadığını nasıl anlarım?
Bir değişkenin gerçekten bir dizi olup olmadığını kontrol etmek için Array.isArray() metodunu kullanmalısınız. Bu, typeof operatöründen daha güvenilirdir, çünkü typeof [] çıktısı "object" olacaktır.
const myArr = [1, 2, 3];
const myObj = { a: 1 };
console.log(Array.isArray(myArr)); // true
console.log(Array.isArray(myObj)); // false
3. Dizilerde eleman sıralaması nasıl yapılır?
Dizilerdeki elemanları sıralamak için sort() metodunu kullanabilirsiniz. Sayıları doğru bir şekilde sıralamak için karşılaştırma fonksiyonu (compare function) sağlamanız önemlidir, aksi takdirde alfabetik olarak sıralanırlar.
const stringDizi = ["muz", "elma", "çilek"];
stringDizi.sort();
console.log(stringDizi); // ["elma", "muz", "çilek"] (alfabetik)
const sayiDizi = [40, 100, 1, 5, 25, 10];
sayiDizi.sort(function(a, b) { return a - b; }); // Küçükten büyüğe
console.log(sayiDizi); // [1, 5, 10, 25, 40, 100]
sayiDizi.sort(function(a, b) { return b - a; }); // Büyükten küçüğe
console.log(sayiDizi); // [100, 40, 25, 10, 5, 1]
4. JavaScript'te sabit boyutlu diziler oluşturabilir miyim?
Hayır, JavaScript'te doğrudan C++ veya Java'daki gibi sabit boyutlu diziler oluşturamazsınız. JavaScript dizileri doğası gereği dinamiktir ve eleman ekleyip çıkararak boyutları değişebilir. Ancak, bir dizinin referansının yeniden atanmasını engellemek için const anahtar kelimesini kullanabilirsiniz. Bu, dizinin içeriğini değiştirebileceğiniz anlamına gelir, ancak const ile tanımlanan değişkene başka bir dizi atayamazsınız.
const sabitDizi = [1, 2, 3];
sabitDizi.push(4); // Geçerli: [1, 2, 3, 4] (dizi içeriği değişebilir)
console.log(sabitDizi);
// sabitDizi = [5, 6]; // Hata: Assignment to constant variable. (referans yeniden atanamaz)