JavaScript Dizi (Array): Oluşturma, Erişim ve Metotlar

JavaScript Dizi Nedir?

JavaScript'te dizi (array), değerleri sıralı bir şekilde tutan yapıdır. İçine sayı, string, nesne, hatta başka diziler bile atabilirsin — üstelik hepsinin aynı türde olması gerekmiyor. Yeni bir dizi oluşturmak için köşeli parantez kullanırsın:

Dizileri %99 ihtimalle bu literal söz dizimiyle oluşturacaksın. Bir de new Array(...) seçeneği var ama onun kötü bir sürprizi mevcut: new Array(3) sana [3] vermez, içi boş ama length değeri 3 olan bir dizi üretir. Sen en iyisi [] ile devam et.

İndeks Sıfırdan Başlar

Dizi elemanlarına konumlarına göre erişirsin ve sayma 0'dan başlar:

İki noktaya dikkat etmekte fayda var. Birincisi, dizinin sınırlarının dışındaki bir indekse erişmek hata fırlatmaz — geriye undefined döner. "Bu niye undefined geliyor ya?" diye saç baş yolduran hataların en bilindik kaynaklarından biri budur. İkincisi, istediğiniz herhangi bir indekse (hatta dizinin son elemanının bir ötesine bile) değer atayabilirsiniz; JavaScript diziyi hiç itiraz etmeden genişletir:

3 ve 4 numaralı indeksler "boş slot" (sparse hole) olarak kalır. length bir anda 6'ya çıkar. Genelde bunu istemezsiniz — dizilerin ne kadar esnek olduğunun bir yan etkisi bu, üzerine inşa edilecek bir özellik değil.

javascript dizi length Özelliği Canlıdır

array.length her zaman en yüksek indeksin bir fazlasına eşittir. Eleman ekleyip çıkardıkça otomatik olarak güncellenir:

Şu son numarayı aklınızda tutmanızda fayda var: length özelliğine değer atamak diziyi kesip kısaltıyor. Mesela nums.length = 0 yazmak, diziyi yerinde boşaltmanın en pratik yollarından biri.

push, pop, shift, unshift

Dizinin uçlarına eleman eklemek ve uçlardan eleman silmek için dört temel metot var:

• push(x) sona eleman ekler ve dizinin yeni uzunluğunu döner.
• pop() sondaki elemanı çıkarır ve çıkardığı elemanı döner.
• unshift(x) başa eleman ekler.
• shift() baştaki elemanı çıkarır.

push ve pop hızlıdır. Ama shift ve unshift diğer tüm elemanların indekslerini yeniden hesaplamak zorunda kaldığı için büyük dizilerde yavaş kalır — günlük boyutlarda sorun olmaz, ama milyonlarca elemanla çalışıyorsan bunu akılda tutmakta fayda var.

slice ve splice farkı

Bu ikisinin isimleri birbirine benziyor ama davranışları taban tabana zıt. Aralarındaki farkı net bilirsen başını çokça ağrıdan kurtarırsın.

slice(start, end) dizinin bir bölümünün kopyasını döner. Orijinal diziye dokunmaz. end değeri dahil değildir:

splice(start, deleteCount, ...items) diziyi doğrudan değiştirir. Silme, ekleme ya da ikisini birden yapabilir; geriye de çıkardığı elemanları döndürür:

Aklınızda kalması için küçük bir ipucu: bir somun ekmekten bir dilim kesmeyi düşündüren şey slice. Film şeridini kesip araya parça eklemeyi çağrıştıran ise splice.

Dizide Arama Yapmak: indexOf, includes ve find

Bir şeyi dizide aramanın üç farklı yolu var; her biri farklı durumlara göre işe yarıyor:

• indexOf(x) elemanın konumunu döndürür, bulamazsa -1 verir. İndekse ihtiyacın olduğunda işe yarar.
• includes(x) ise boolean döner. Sadece "bu dizide var mı?" diye sormak istediğinde çok daha temiz bir kullanımı var. Ayrıca NaN değerini doğru şekilde ele alır; indexOf bunu beceremez.
• find(predicate) her eleman için bir fonksiyon çalıştırır ve eşleşen ilk elemanı döndürür. Nesnelerden oluşan dizilerde asıl işe yarayan budur çünkü indexOf ve includes yalnızca katı eşitlik (strict equality) kontrolü yapar.

JavaScript Dizilerinde Döngü Kullanımı

Her biri farklı duruma uygun birkaç sağlam yöntem var:

for...of genelde en iyi seçimdir — okunması kolaydır, herhangi bir iterable ile çalışır ve sana doğrudan değeri verir. forEach ise hem index'e ihtiyacın olduğunda hem de döngüden erken çıkmayacağın durumlarda iyi iş görür (zaten forEach içinde break kullanamazsın). Klasik index'li for biraz uzun soluklu olsa da sana tam kontrol sağlar — eleman atlaman, geriye doğru gitmen ya da ikisini birden yapman gerekiyorsa bunu tercih et.

Uzak durman gereken tek döngü var: for...in. Bu döngü anahtarları dolaşır ve kalıtımla gelen özellikleri de dahil eder. Dizilere değil, nesnelere yönelik bir araçtır.

Dizi kopyalama ve birleştirme

JavaScript'te diziler referans tipindedir. Birini diğerine atamak kopya oluşturmaz — aynı diziye iki farklı isim vermiş olursun:

Gerçek bir kopya oluşturmak için spread operatörünü ya da slice() metodunu kullanman gerekir:

Her ikisi de size yüzeysel (shallow) bir kopya verir — en üst seviyedeki dizi yenidir ama elemanlar obje ise o objeler hâlâ ortak kullanılır. Spread operatörü ayrıca dizileri birleştirmenin de en temiz yoludur:

Nesne Dizileri

Gerçek projelerde dizilerin büyük çoğunluğu nesne tutar. Aynı metotlar burada da çalışır; ancak arama ve eşleştirme işleri biraz daha ilginç bir hâl alır:

filter bir predicate'i (koşul fonksiyonunu) sağlayan elemanlardan oluşan yeni bir dizi döndürür. map ise her elemanı dönüştürerek yeni bir dizi üretir. Bu ikisini zincirlemek, nesne dizileriyle çalışırken en çok başvurduğun yöntemdir — bir sonraki sayfada bu metot ailesini daha derinlemesine ele alacağız.

Dizi mi, nesne mi?

Kafanda hızlı bir model oluşturalım: sıralama önemliyse ve aynı türden şeylerin bir listesi üzerinde çalışıyorsan dizi kullan. İsimle erişeceksen nesne (ya da Map) kullan. "Birinci, ikinci, üçüncü" dediğin şey dizi işidir. "id'si 42 olan kullanıcıyı getir" dediğin şey ise nesne ya da Map işidir.

İkisini birlikte de kullanabilirsin — nesne dizileri her yerdedir — ama diziyi anahtarlı sözlük gibi, nesneyi de sıralı liste gibi kullanma. Her birinin iyi yaptığı tek bir iş var.

Sırada: Destructuring

Bir diziden indeks üzerinden değer çekmek (ve nesneden isimle özellik almak) o kadar sık karşımıza çıkıyor ki, JavaScript bunun için özel bir sözdizimi sunuyor. Bu konunun adı destructuring ve tam sırada.