2407

Komple Uygulamalı Web Geliştirme Eğitimi

Javascript Array

Javascript dersleri serimizin bu bölümünde javascript array nedir ve nasıl kullanılır, öğrenelim.

Javascript Array

Javascript array ile birden fazla veriyi bir değişken içinde saklayabiliriz.

Örnek

var names = ['çınar','sena','ada','yiğit'];
var years = [2017,1970,1990,1998];

var result = "Benim adım " + names[0] + " ve yaşım " + (2020- years[0]);
console.log(result); // Benim adım çınar ve yaşım 3

Neden Javascipt Array Kullanırız?

Javascript array olmadan isimleri bir string değişken içinde saklayabiliriz.

Örnek

var names = 'çınar,sena,ada,yiğit';

Bu şekilde bir string değişken tanımlaması yapabiliriz. Ancak her bir isme ulaşma ihtiyacı duyduğumuzda zorlanırız.

Daha önceki javascript string ve string metotları dersinde öğrendiğimiz split() metodunu kullanarak string bilgiyi virgülden ayırarak elemanlara teker teker ulaşabiliriz.

var names = 'çınar,sena,ada,yiğit';
var result = names.split(",");

// result[0] => çınar
// result[1] => sena
// result[2] => ada
// result[3] => yiğit

Zaten burada dikkat edersek split(",") dediğimizde string bilgiyi virgülden ayırarak bir diziye çevirir. Dolayısıyla dizi elemanlarına da indeks numaraları ile ulaşabiliriz.

Ancak bu işin tabi ki kolay yolu en başta bir dizi tanımlamaktır.

Javascript Array Tanımlama

Javascript array tanımlamak için köşeli parantezler içinde her bir elemanı virgül ile ayırmamız gerekir.

Örnek

var names = ['çınar','sena','ada','yiğit'];
var years = [2017,1970,1990,1998];

Ayrıca javascript array tanımlaması için new komutunu da kullanabiliriz.

Örnek

var names = new Array('çınar','sena','ada','yiğit');
var years = new Array(2017,1970,1990,1998);

Javascipt array içerisine aynı tipte eleman ekleyebileceğimiz gibi farklı tipte veri de eklebiliriz.

Örnek

var mix = ['sadık','turan',1983,null,undefined,['sinema','kitap']];

Javascript Array Elemanlarına Erişim

Javascript array elemanlarına erişmek için indeks numarasını kullanırız. Javascript array 'in ilk elemanı 0 indeks numarasına sahiptir.

console.log(names[0]) // çınar
console.log(names[1]) // sena
console.log(names[2]) // ada
console.log(names[3]) // yiğit

Eğer javascipt array bilgisine olduğu gibi ulaşmak istersek;

Örnek

var names = ['çınar','sena','ada','yiğit'];
print(names)  // çınar,sena,ada,yiğit'

Peki dizinin son elemanına ulaşmak istersek?

Örnek

var names = ['çınar','sena','ada','yiğit'];
var soneklenen = names[names.length - 1];

Dizinin son elemanının indeks numarası indeks 0' dan başladığı için "eleman sayısı - 1" olur. Dolayısıyla eleman sayısını bulmak için names.length özelliğini kullanabiliriz.

Peki javascript array içerisine bir başka array varsa bu durumda, ulaştığımız array üzerinden diğer array 'e gene indeks numarası ile geçiş yapabiliriz.

Örnek

var profile = ['sadık','turan',1983,['sinema','kitap']];
console.log(profile[3][0]) // sinema

Javascript Array Elemanlarına Döngü ile Erişim

Tanımlanan javascript array' ine tek tek indeks numaraları ile ulaşmak mümkün ancak bazen tüm elemanlara ulaşmak isteriz. Bu durumda dizi üzerinde döngü yardımıyla tek tek dolaşabiliriz.

Örnek

var names = ['çınar','sena','ada','yiğit'];

for (var i=0; i<names.length;i++){
    console.log(names[i]);
}

// çınar
// sena
// ada
// yiğit

Javascript Array Elemanlarını Güncelleme

Javascript array elemanına indeks numarası ile ulaşıp yeni bir değer ataması yapabiliriz.

Örnek

var cars = ['mazda','opel','toyota','bmw'];
cars[1] = "audi";
console.log(cars[1]) // audi

Javascript Array Üzerine Yeni Eleman Ekleme

Dizi üzerine eleman eklemek için kullanabileceğimiz array metotları var ve bu metotları bir sonraki dersimizde göreceğiz.

Array metotlarından başka bir de length özelliğini kullanarak eleman ekleme yapabiliriz.

Örnek

var cars = ['mazda','opel','toyota','bmw'];
cars[cars.length] = "mercedes";

cars.length bize 5 sayısını verir ve olmayan bir indeks olduğundan son eleman olarak yeni bir değeri dizi üzerine eklemiş oluruz.