JavaScript Dilinde Diziler (Arrays) Kullanımı

JavaScript, web geliştirmede dinamik ve etkileşimli deneyimler oluşturmak için vazgeçilmez bir dildir. Bu dilin temel yapı taşlarından biri olan diziler (arrays), birden çok değeri tek bir değişken altında depolamamızı ve yönetmemizi sağlar. Diziler, veri koleksiyonlarını düzenli bir şekilde saklamak, üzerlerinde döngüler yapmak ve çeşitli manipülasyonlar gerçekleştirmek için kritik öneme sahiptir. Bu makalede, JavaScript dizilerinin temel sözdizimini, öğelere erişimi, yaygın kullanılan metotları ve pratik uygulama örneklerini detaylı bir şekilde inceleyeceğiz.

Sözdizimi

JavaScript'te dizi oluşturmanın ve kullanmanın iki temel yolu vardır:

1. Dizi Değişmezi (Array Literal) Kullanımı

Bu, en yaygın ve önerilen yöntemdir. Köşeli parantezler [] arasına, virgülle ayrılmış olarak dizi öğeleri yazılır.

const meyveler = ["Elma", "Muz", "Portakal"];
let sayilar = [1, 2, 3, 4, 5];
const karisikDizi = ["Metin", 123, true, null, {adi: "Nesne"}];

Yukarıdaki örneklerde görüldüğü gibi, bir dizi içinde farklı veri tiplerini barındırabiliriz. Diziler const, let veya var anahtar kelimeleri ile tanımlanabilir.

2. Array Kurucu Fonksiyonu (Constructor Function) Kullanımı

new Array() kurucu fonksiyonunu kullanarak da dizi oluşturulabilir. Bu yöntem daha az tercih edilse de, belirli senaryolarda kullanılabilir.

const meyveler = new Array("Elma", "Muz", "Portakal");
const bosDizi = new Array(); // Boş bir dizi oluşturur
const onElemanliDizi = new Array(10); // 10 boş öğe içeren bir dizi oluşturur

Tek bir sayısal argümanla çağrıldığında, new Array() o boyutta boş öğeler içeren bir dizi oluşturur. Birden fazla argümanla çağrıldığında ise, bu argümanlar dizinin öğeleri haline gelir.

Dizi Öğelerine Erişim ve Değiştirme

Dizilerdeki öğelere, sıfır tabanlı indeksleme kullanarak erişilir. Yani, ilk öğenin indeksi 0, ikincisinin 1 ve bu şekilde devam eder. Öğelere erişmek için dizi adından sonra köşeli parantez içinde indeks numarası belirtilir.

const renkler = ["Kırmızı", "Yeşil", "Mavi"];
console.log(renkler[0]); // Çıktı: Kırmızı
console.log(renkler[1]); // Çıktı: Yeşil

Dizi öğelerini değiştirmek de benzer şekilde yapılır. İstenen indeks belirtilerek yeni bir değer atanır:

renkler[2] = "Sarı";
console.log(renkler); // Çıktı: ["Kırmızı", "Yeşil", "Sarı"]

Bir dizinin toplam öğe sayısını öğrenmek için length özelliğini kullanırız:

console.log(renkler.length); // Çıktı: 3

Örnekler

1. Dizi Tanımlama ve Temel Erişim

Bu örnek, bir dizi tanımlamayı ve belirli indekslerdeki öğelere nasıl erişileceğini göstermektedir.

// Bir meyve dizisi tanımlama
const meyveler = ["Elma", "Armut", "Kiraz", "Çilek"];

// Dizinin ilk elemanına erişme (indeks 0)
console.log("İlk meyve:", meyveler[0]); // Çıktı: İlk meyve: Elma

// Dizinin üçüncü elemanına erişme (indeks 2)
console.log("Üçüncü meyve:", meyveler[2]); // Çıktı: Üçüncü meyve: Kiraz

// Dizinin son elemanına erişme (length - 1)
console.log("Son meyve:", meyveler[meyveler.length - 1]); // Çıktı: Son meyve: Çilek

2. Dizi Öğelerini Değiştirme ve Yeni Öğeler Ekleme/Çıkarma

Bu örnek, var olan bir dizi öğesinin nasıl değiştirileceğini ve dizinin sonuna/başına öğe ekleme/çıkarma işlemlerini göstermektedir.

let alisverisListesi = ["Süt", "Ekmek", "Yumurta"];

// İkinci öğeyi değiştirme (indeks 1)
alisverisListesi[1] = "Peynir";
console.log("Değişen liste:", alisverisListesi); // Çıktı: Değişen liste: ["Süt", "Peynir", "Yumurta"]

// Dizinin sonuna yeni bir öğe ekleme (push metodu)
alisverisListesi.push("Meyve Suyu");
console.log("Ekleme sonrası:", alisverisListesi); // Çıktı: Ekleme sonrası: ["Süt", "Peynir", "Yumurta", "Meyve Suyu"]

// Dizinin sonundaki öğeyi çıkarma (pop metodu)
const cikarilanOge = alisverisListesi.pop();
console.log("Çıkarılan öğe:", cikarilanOge); // Çıktı: Çıkarılan öğe: Meyve Suyu
console.log("Çıkarma sonrası:", alisverisListesi); // Çıktı: Çıkarma sonrası: ["Süt", "Peynir", "Yumurta"]

// Dizinin başına yeni bir öğe ekleme (unshift metodu)
alisverisListesi.unshift("Yoğurt");
console.log("Başına ekleme:", alisverisListesi); // Çıktı: Başına ekleme: ["Yoğurt", "Süt", "Peynir", "Yumurta"]

// Dizinin başındaki öğeyi çıkarma (shift metodu)
const cikarilanBasOge = alisverisListesi.shift();
console.log("Baştan çıkarılan öğe:", cikarilanBasOge); // Çıktı: Baştan çıkarılan öğe: Yoğurt
console.log("Baştan çıkarma sonrası:", alisverisListesi); // Çıktı: Baştan çıkarma sonrası: ["Süt", "Peynir", "Yumurta"]

3. Diziler Üzerinde Döngü Kullanımı

Dizi öğeleri üzerinde işlem yapmak için döngüler sıkça kullanılır. En yaygın yöntemlerden biri for döngüsü ve forEach() metodudur.

const ogrenciler = ["Ali", "Ayşe", "Mehmet", "Fatma"];

// For döngüsü ile dizi öğelerini listeleme
console.log("For döngüsü ile öğrenciler:");
for (let i = 0; i < ogrenciler.length; i++) {
  console.log(ogrenciler[i]);
}

// forEach() metodu ile dizi öğelerini listeleme
console.log("\nforEach() ile öğrenciler:");
ogrenciler.forEach(function(ogrenci, index) {
  console.log(`${index + 1}. ${ogrenci}`);
});

Önemli Notlar

• Dinamik Boyut: JavaScript dizileri dinamik yapıdadır. Oluşturulduktan sonra boyutları otomatik olarak büyüyüp küçülebilir. Önceden bir boyut belirtme zorunluluğu yoktur.

• Karışık Veri Tipleri: JavaScript dizileri, aynı anda string, number, boolean, object, null, undefined gibi farklı veri tiplerini barındırabilir.

• Referans Tipi: Diziler birer referans tipi (reference type) veri yapısıdır. Bir diziyi başka bir değişkene atadığınızda, aslında dizinin kendisi değil, bellekteki referansı kopyalanır. Bu nedenle, yeni değişken üzerinden yapılan değişiklikler orijinal diziyi de etkiler.

• const ile Dizi Tanımlama: const ile tanımlanan bir dizinin referansı değiştirilemez, yani başka bir dizi atanması mümkün değildir. Ancak, dizinin içindeki öğeler (indeksler üzerinden) değiştirilebilir veya dizi metotları (push, pop vb.) ile manipüle edilebilir.

  
  

  const sabitDizi = [1, 2, 3];
  sabitDizi.push(4); // Geçerli: [1, 2, 3, 4]
  // sabitDizi = [5, 6]; // Hata: Assignment to constant variable.

  softmush.com

• Dizi Metotları: JavaScript, dizilerle çalışmayı kolaylaştıran zengin bir dizi metotları setine sahiptir (map(), filter(), reduce(), find(), splice(), slice() vb.). Bu metotlar, diziler üzerinde daha gelişmiş işlemler yapmak için kullanılır ve modern JavaScript programlamasında kritik öneme sahiptir.