JavaScript – Diziler (Arrays)
Dizileri const veya let olarak tanımlayabiliriz. JavaScript’te const veya let’in bir dizi olduğunu anlamamız veya belirtmemiz için köşeli parantezlere ihtiyaç duyarız [];
const x = [];
x[0]=1;
x[1]=2;
x[2]=3;
x[3]=4;
console.log(a);
Diziler, sıfırdan başladığı için ilk elemanı sıfırıncı indise atanır.
Yani aslında yukarıdaki kodun ilk elemanı 1, birinci elemanı ise 2’dir.
JavaScript’te dizinin tipini belirtemediğimiz için diziye istediğimiz gibi string, int, double veya boolean ifade yazabiliyoruz.
Örnek;
const x = [];
x[0]=1;
x[1]=’Merhaba Dünya’;
x[2]=true;
x[3]=3.14;
console.log(x);
Yukarıdaki örnekte const olarak tanımlanmış x adlı dizinin;
0. elemanı int 1’dir.
1. elemanı string merhaba dünya’dır.
2. elemanı boolean true/false döndürdüğü için true burada boolean tipindedir.
3. elemanı double tipinde 3.14’tür.
console.log(x); komutu ile bir dizinin içerisinde farklı tipte veriler çıktısını görebiliriz.
şimdi de if ile dizideki bir elemana müdahale edelim;
const x = [];
x[0]=1;
x[1]=’Merhaba Dünya’;
x[2]=true;
x[3]=3.14;
if(x[2]==true)
{
x[2]=false;
}
console.log(x);
Yukarıdaki kodun çıktısı bi önceki x dizisi ile aynı olacaktır fakat if ile 2. indisinin değeri true ise false olarak değiştirmesini söylediğimiz için tek fark true çıktısı false olacaktır.
Peki şimdi dizinin tanımlanmamış, eklenmemiş bir elemanını çağırırsak yani olmayan bir şeyi getirmeye çalışırsak ne olur?
const x = [];
x[0]=1;
console.log(x[2]);
//undefined
yani tanımsız olduğuna dair bir hata mesajı alırız.
Şimdi gelelim indis numarasını belirtmeden diziye eleman ekleme kısmına;
Eleman eklerken dizinin index/indis numarasını bilmek zorunda değiliz o yüzden diziye eleman eklememizi sağlayan push() fonksiyonuna kullanırız.
const y =[];
y.push(‘merhaba’);
console.log(y);
Yukarıdaki kodda y adındaki diziye push fonksiyonunu kullanarak merhaba adında bir string eleman ekledik.
Aşağıdaki kodda ise const olarak tanımlanmış dizinin ilk elemanının değerini değiştiriyoruz.
const dizi =[‘ali’,1,false];
dizi[0]=10; //dizinin 0.indexine 10 değerini verdik.
console.log(dizi);
// [“10”, 1, false]
çıktısını [“ali”, 1, false] değil de [“10”, 1, false] olarak göreceksiniz çünkü const tanımlanmış bir dizinin elemanına müdahale edebiliyoruz.
Ama diziyi değiştirmek istersek yani şöyle;
const dizi =[‘ali’,1,false];
dizi = 7;
console.log(dizi);
burada kod çalışmaz hata alırız çünkü const değiştirilemez özelliğe sahiptir.
Aynı kodu let ile deneyelim;
let dizi =[‘ali’,1,false];
dizi = 7;
console.log(dizi);
// 7
kodun çıktısı 7 olacaktır çünkü let değiştirilebilir ama const sabittir. const olarak tanımlanmış bir dizinin elemanları değiştirilebilir ama kendisi değiştirilemez. bu arada evet dizi = 7 diyerek dizi olmasını bozup bir sayı verdik.
console.log(‘Fonksiyon Çalıştı!’);
}];
Yukarıdaki kodda meyveler adlı dizimizin 0. elamanına Armut, 1. elemanına Portakal, 2. elemanına Karpuz, 3. elamanına bir dizi ekledik.
3. elamanı bir dizi olan meyveler dizisini çağırıp sonuca bakalım.
meyveler;
//[“Armut”, “Portakal”, “Karpuz”, Array(2), ƒ]
Bakın yukarıdaki çıktıda 3. eleman ‘Array(2)’ yani 2 elemanlı bir dizi olduğunu söylüyor.
Şimdi iki elemanlı dizimizi çağıralım;
meyveler[3];
//[“Muz”, “Çilek”]
//0: “Muz”
//1: “Çilek”
Yukarıda yazdığımız meyveler[3]; kodu bize üçüncü elemanı getirdi ve bu eleman dizi olduğu için tüm elemanları listelendi.
Eğer dizinin içindeki dizinin yani meyveler[3]’ün bir elemanını almak istiyorsak;
meyveler[3][0];
// “Muz”
Sıfır, yani ilk elemanı çağırdık eğer ikinci elemanı çağırmak isteseydik meyveler[3][1]; yazmamız gerekirdi.
Eğer dizinin içindeki diziye eleman eklemek istersek;
meyveler[3].push(“Kiraz”);
//meyveler[3];
//(3) [“Muz”, “Çilek”, “Kiraz”]
Diziye, push() fonksiyonu ile “Kiraz” adlı elemanı eklemiş olduk ve dizi 3 elemanlı oldu.
Şimdi de diziye eklemiş olduğumuz fonksiyona gelelim.
Yukarıda gördük ki meyveler dizisini çağırınca ‘Array(2)’nin hemen yanında ‘ƒ’ harfi var.
Bu da demek oluyor ki diziye fonksiyon ekleyip çağırabiliyoruz.
ES6 standartlarına uygun fonksiyonumuzu dizi içinden önce listeleyip görelim, sonra da çalıştıralım;
meyveler[4];
//() => {
// console.log(‘Fonksiyon Çalıştı!’);
//}
Yukarıda kod çıktı olarak çalışacaktır konsol’a veya alert box’a yazılı bir şekilde değil. Konsola veya alert box’a yazdırmak için;
meyveler[4]();
// Fonksiyon Çalıştı!
Bu şekilde parantezler kullanarak diziler içinden yazdığımız fonksiyonu çağırıp kullanabiliyoruz.
Eğer JavaScript’te dizi içinden ilk veya son elemanları almak istersek kullanabileceğimiz shift() ve pop() fonksiyonları var.
JavaScript shift() fonksiyonu kullanımı;
shift() fonksiyonu dizinin ilk elemanını dizi içinden çekip almaya yarar.
Bir örnek ile gösterelim.
const sebzeler = [‘domates’,’biber’,’patlıcan’];
sebzeler adında bir dizimiz var ve bu dizimiz 3 elemanlı. Burada shift() fonksiyonunu kullanarak ilk elemanı yani ‘domates’i almak istiyorum.
sebzeler.shift();
// “domates”
shift() fonksiyonu ile domates’i diziden alıyorum. Şimdi dizimizi tekrar çağıralım.
sebzeler;
//(2) [“biber”, “patlıcan”]
Burada dizimizin 2 elemanı kaldığını görüyoruz.
Diziden aldığımız ilk elemanı bir değişkene aktarmak istiyorsak şu şekilde yapabiliriz;
const ilkDeger = sebzeler.shift();
yeniDeger;
//biber
ilkDeger adlı değişkenimize shift() fonksiyonu sayesinde dizinin ilk elemanını atamış olduk, atadığımız eleman diziden yine çıkacaktır.
JavaScript pop() fonksiyonu kullanımı;
pop() fonksiyonu ise dizinin en son elemanını dizi içinden çekip almaya yarar.
Bir örnek ile gösterelim.
sebzeler.pop();
// “patlıcan”
Pop() fonksiyonu ile sebzeler adlı dizimizin içinden en sonuncu elemanı çekip aldık. Diziyi tekrar çağıralım.
sebzeler;
//[“biber”]
Bu çıktıda ise dizimizin eleman sayısının bir’e düştüğünü görüyoruz.
Dizinin ilk elemanını almak için shift(), en sonuncu elemanını almak için ise pop() fonksiyonunu kullanıp işimizi kolayca halledebiliriz.
Diziden aldığımız son elemanı bir değişkene aktarmak istiyorsak şu şekilde yapabiliriz;
const yeniDeger = sebzeler.pop();
yeniDeger;
//biber
yeniDeger adlı değişkenimize pop() fonksiyonu sayesinde dizinin en sonuncu elemanını atamış olduk, atadığımız eleman diziden yine çıkacaktır.
Shift() fonksiyonundan bahsetmişken hemen unshift() fonksiyonuna da bir örnek verip açıklayalım.
JavaScript’te unshift() metodu dizinin en başına eleman eklememizi sağlar.
Mesela az önce sebzeler adlı dizimizin içinde tek bir eleman olarak ‘biber’i bırakmıştık. Şimdi unshift ile ‘biber’ adlı elemanın hemen sol tarafına ‘marul’ diye bir eleman ekleyelim.
sebzeler.unshift(“marul”);
//2
şimdi sebzeler adlı dizimizi çağıralım ve görelim.
sebzeler;
//(2) [“marul”, “biber”]
Gördüğünüz gibi unshift() fonksiyonu ile dizimizin başına bir eleman eklemiş olduk.
Bir de JavaScript’te filter() fonksiyonu nedir? nasıl kullanılır? onu açıklayıp bir örnek yapalım.
filter() fonksiyonu kısaca dizi içinden filtreleme yapmamızı sağlar. Buna bir örnek verelim;
const degerDizi = [‘Armut’,’Elma’,’Muz’,’Çilek’];
yeDizi = degerDizi.filter((value,index) => {
return index !==0;
});
console.log(yeDizi);
Yukardaki kodda degerDizi adında bir dizi oluşturduk ve içine 4 adet eleman ekledik.
Eklediğimiz elemanlardan index numarası 0 olmayanları return ettirerek yeDizi adlı yeni dizimize ekledik.
Konsol’a bu yeni oluşturup içine index numarası 0 olmayanları döndüren dizimizi yazdırmasını söyledik.
Kodun çıktısı bu şekilde olacak;
//(3) [“Elma”, “Muz”, “Çilek”]
Son olarak dizileri anlatmışken JavaScript map() fonksiyonundan da bahsedip bir kaç örnek yapalım.
JavaScript map() fonksiyonu yeni bir dizi oluşturmamızı sağlar. Bu oluşturulan dizi ana diziden bağımsızdır.
Mesela bir dizi düşünelim; Bu dizinin içinde sayılar var ve biz bu sayıların sonuna soru işareti koyup yeni bir dizi oluşturmak ve ekrana yazdırmak istiyoruz.
Kodumuz bu şekilde olacak:
const anaDizi = [5,3,7,6];
const yeniDizi = anaDizi.map((value) => {
return value + “?”;
});
console.log(yeniDizi)
Kod çıktısı ise bu şekilde olacak:
//(4) [“5?”, “3?”, “7?”, “6?”]