JavaScript Diziler (Arrays) Nedir?

Web geliştirme serüveninize başlarken, metinler (string), sayılar (number) veya mantıksal ifadeler (boolean) gibi tekil değerleri değişkenlerde (variables) nasıl saklayacağınızı öğrenmiş olabilirsiniz. Ancak gelişmiş bir uygulama yaparken, örneğin bir alışveriş listesini (elmalar, yumurtalar ve ekmek gibi), bir sınıftaki öğrenci isimlerini veya test skorlarını tek tek değişkenlerde tutmak yönetilemez bir hale gelir. İşte tam bu noktada, birden fazla değeri tek bir değişken içinde saklamamıza olanak tanıyan Diziler (Arrays) devreye girer.

Bu kapsamlı rehberde, JavaScript’te dizilerin ne olduğunu, nasıl oluşturulduğunu ve hangi özel araçlarla (metotlarla) yönetildiklerini örneklerle adım adım pekiştireceğiz.

1. Dizi (Array) Nasıl Oluşturulur?

JavaScript’te bir dizi oluşturmanın en iyi, en yaygın ve okunabilirliği en yüksek yolu köşeli parantezler [ ] kullanmaktır.

let arabalar = ["Toyota", "Renault", "Volkswagen"];

Bazen internetteki eski kodlarda new Array("siyah", "turuncu", "pembe") şeklinde bir kullanım görebilirsiniz. Ancak bu yöntem beklenmedik hatalara yol açabilir. Örneğin; köşeli parantezle “ yazdığınızda, sadece “10” değerini içeren tek elemanlı bir dizi yaratırsınız. Fakat new Array(10) yazarsanız, içinde 10 tane tanımsız (undefined) boş alan barındıran tuhaf bir dizi oluşturursunuz,. Bu nedenle, yeni başlayan biri olarak her zaman köşeli parantezleri kullanmayı alışkanlık haline getirmelisiniz.

Ayrıca, JavaScript’te diziler içine dilediğiniz her türlü veri tipini koyabilirsiniz. Bir dizi aynı anda metin, sayı veya boolean barındırabilir. JavaScript, tüm bu değerleri tek bir tipe dönüştürmeye çalışmaz; onları kendi orijinal veri tipleriyle dizide saklar.

2. Dizi Elemanlarına Erişmek ve Onları Değiştirmek

Oluşturduğumuz bu muhteşem dizinin içindeki elemanlara ulaşmak oldukça kolaydır. JavaScript, dizideki her bir değere matematiksel bir “indeks” (index) numarası atar. JavaScript sıfır tabanlı (zero-index) bir dildir. Bu da demek oluyor ki, bir dizideki ilk elemanın indeksi her zaman 0, ikincinin 1, üçüncünün 2 olarak devam eder.

let arabalar = ["Toyota", "Renault", "Volkswagen"];
console.log(arabalar); // Çıktı: Toyota
console.log(arabalar); // Çıktı: Renault

Dizideki 0 indeksini (yani ilk elemanı) çağırdığımızda konsolda “Toyota” çıktısını alırız.

Elemanların Üzerine Yazmak: Dizideki bir değeri değiştirmek isterseniz, indeksini seçip yeni değeri atamanız yeterlidir.

arabalar = "Tesla";
console.log(arabalar); // Çıktı: Tesla

Eski “Toyota” değerinin tamamen “Tesla” ile değiştirildiğini görebilirsiniz.

Önemli Bir Not: Diziyi let yerine const (sabit) kelimesi ile oluştursanız dahi, içindeki elemanları değiştirebilirsiniz. Ancak const ile tanımlanmış bir diziyi tamamen yok edip yerine yepyeni bir dizi eşitleyemezsiniz, bu size bir hata verecektir.

3. Dizilerin Uzunluğunu Bulmak: length Özelliği

Dizilerin çok kullanışlı, yerleşik bir özelliği vardır: length (uzunluk). Bu özellik, dizinin içinde toplam kaç adet değer olduğunu bize söyler.

let renkler = ["siyah", "turuncu", "pembe"];
console.log(renkler.length); // Çıktı: 3

Bunu kullanarak, bir dizinin içindeki en son elemana kolaylıkla ulaşabilirsiniz. İndeksler 0’dan başladığı için en son elemanın indeksi her zaman dizinin uzunluğunun bir eksiğidir (length - 1).

Eğer dizide hiç var olmayan, çok uzak bir indekse atama yaparsanız ne olur? Örneğin 3 elemanlı bir dizinin 5. indeksine yeni bir sayı eklerseniz, JavaScript aradaki boş indeksleri “empty” (boş) olarak bırakır ve dizinin uzunluğu aniden artar.

4. En Çok Kullanılan Dizi Metotları

JavaScript, dizilere eleman eklemeyi, silmeyi veya onları düzenlemeyi kolaylaştıran özel fonksiyonlar (metotlar) sunar.

• Sona Eleman Eklemek (push): Dizinin en sonuna yeni bir değer ekler ve ekledikten sonra dizinin yeni uzunluğunu döndürür.
• Son Elemanı Silmek (pop): Dizinin sonundaki elemanı diziden tamamen çıkarır.
• İlk Elemanı Silmek (shift): Dizinin başındaki ilk elemanı siler ve diğer tüm elemanların indeks numaralarını birer azaltarak sola kaydırır.
• Ortadan Silmek/Eklemek (splice): Oldukça yetenekli bir araçtır. splice(başlamaİndeksi, silinecekMiktar, eklenecekler) mantığıyla çalışır. Araya yeni elemanlar ekleyebilir veya belirli bir aralığı toptan silebilirsiniz,.
• Dizileri Birleştirmek (concat): Elinizdeki iki veya daha fazla diziyi uc uca ekleyerek yepyeni, birleştirilmiş bir dizi yaratmanızı sağlar.
• Elemanı Boşaltmak (delete): Bir elemanı delete arr şeklinde silerseniz değer gider, ancak dizideki o pozisyon kapanmaz; onun yerine tanımsız (undefined) bir boşluk kalır ve dizinin uzunluğu (length) değişmez,.

5. Dizilerde Arama ve Sıralama Yapmak

• indexOf(): Aradığınız bir değerin dizide kaçıncı indekste olduğunu söyler. Eğer aradığınız kelime veya sayı dizide hiç yoksa, -1 değerini döndürür.
• find(): Belirli bir şarta uyan elemanı bulmak için kullanılır. İçine bir fonksiyon yazarsınız; bu fonksiyon her eleman üzerinde çalışır ve eşleşme bulduğu ilk elemanı geri döndürür, bulamazsa undefined verir.
• sort(): Diziyi sıralar. Metinleri A’dan Z’ye, sayıları ise küçükten büyüğe dizer.
• reverse(): Dizinin o anki mevcut sırasını tam tersine çevirir,.

6. Gelişmiş Dizi Döngüleri (Modern Metotlar)

Verilerle çalışırken çoğu zaman dizinin içindeki tüm elemanlar üzerinde tek tek işlem yapmamız gerekir.

• forEach(): Klasik döngüler (loops) yerine dizideki her bir eleman için belirlediğiniz bir işlemi sırasıyla gerçekleştirir,. Fonksiyonel programlamada çok yaygındır.
• filter(): Adı üstünde filtreleme yapar. Belirlediğiniz şarta (örneğin türü metin olanları seç) uyan (true dönen) elemanları alır ve orijinal diziyi bozmadan size tamamen yeni filtrelenmiş bir dizi verir,.
• map(): Dizideki değerleri dönüştürmek istediğinizde kullanılır. Örneğin tüm elemanları 2 ile çarpmak isterseniz, map() metoduna vereceğiniz ok fonksiyonu (arrow function) her eleman için çalışır ve çarpılmış yeni değerlerden oluşan yeni bir dizi döndürür.
• every(): Dizideki tüm elemanların belirli bir şarta uyup uymadığını kontrol eder. Eğer hepsi uyuyorsa true, bir tanesi bile uymuyorsa false sonucunu üretir.

7. Çok Boyutlu Diziler (Multidimensional Arrays)

JavaScript’te diziler her türlü veriyi taşıyabildiği için, bir dizinin içine eleman olarak başka diziler de ekleyebilirsiniz. Kulağa karmaşık gelse de aslında sadece “listelerin listesi” anlamına gelir.

let ikiBoyutluDizi = [,,];
let deger = ikiBoyutluDizi;

Yukarıdaki örnekte ikiBoyutluDizi diyerek ilk diziye ulaştık, ardından “ diyerek o iç dizinin ikinci elemanı olan 2 değerini elde ettik. Bu yöntemle satırlar ve sütunlar oluşturabilir, uygulamalarınızda karmaşık veri matrisleri tasarlayabilirsiniz.

Sonuç

Değerleri tek tek saklamak yerine dizileri kullanmak, temiz ve yönetilebilir bir JavaScript kodunun en büyük adımıdır. Doğru oluşturma metotları ([ ]), temel manipülasyon fonksiyonları (push, pop, splice) ve modern filtreleme/haritalama fonksiyonları (filter, map, forEach) sayesinde, artık en karmaşık kullanıcı listelerinden alışveriş sepetlerine kadar her türlü veriyi web sitenizde ustalıkla kontrol etmeye hazırsınız!