Array nedir? Javascript’te Array ve Javascript’te Bulunan Array Function Çeşitlerinin Örnekli Anlatımı

Yavuz Selim Kurnaz
6 min readDec 11, 2020

--

Bu yazı içerisinde;

  • Array nedir?
  • Javascript’te (bundan sonra JS olarak anılacaktır.) hangi array fonksiyonları var?
  • ECMAScript 6.0 (bundan sonra ES6 olarak anılacaktır.) ile hangi function’lar geldi? sorularını sorarken edindiğim cevapları yazacağım. Kaynak: https://www.javatpoint.com/es6-array-methods

İlk olarak nedir bu array (dizi)?

  • Array’ler js’den bağımsız olarak, bilgisayar bilimlerinde birden fazla veri tutabilen yapılardır ve js’de aşağıdaki şekilde tanımlanır.
let colors = ['green', 'blue', 'yellow', 'red']; 
// 4 eleman tutan bir dizi.
  • Array’ler içerisinde farklı string, number gibi değişkenleri, object ve başka array’leri de saklayabiliriz.
let chaos = ['pasta', 12, [23, 'mj'], 9];
chaos;

Yukarıdaki, tanımladığımız array’in console çıktısını inceleyelim.

  • Array oluşturulduğunda her elemana unique(benzersiz) bir index numarası atanır. 0 (sıfır)’dan başlar ritmik artarak devam eder.
  • İçindeki elemanların sayısı length: 4 olarak verilmiştir. Burada chaos[] array’i içerisindeki diğer array ( [23, ‘mj’] ) 1(bir) eleman olarak ele alınır.

Array’ler üzerinde hangi işlemleri yapabiliriz, bunları inceleyelim.

  • Array içindeki bi elemana erişmek için, elemanın index numarasını kullanabiliriz.
let chaos = ['pasta', 12, [23, 'mj'], 9];console.log(chaos[0]);
// pasta
console.log(chaos[1]);
// 12
  • Aşağıdaki şekilde array elemanını güncelleyebiliriz.
let chaos = ['pasta', 12, [23, 'mj'], 9];chaos[0] = 'burger'; // ilk elamanı 'burger' olarak güncelledik.chaos;
// ["burger", 12, Array(2), 9]
  • Array’in son elemanına ulaşmak için .length-1'i kullanabiliriz.
let chaos = ['pasta', 12, [23, 'mj'], 9];chaos[chaos.length-1];
// 9

Array Fonksiyonları

Javascripte ait tüm fonksiyonları aşağıda öğrendiğim şekilde tanımlayacağım. ES6 ile gelenleri fonksiyon adının yanına ES6 olarak belirteceğim. Sıralamayı, kolay bulunabilmesi için alfabetik olarak yapacağım.

  • Array.concat(): Birden fazla array’i birleştirmek için kullanılır.
let arr1 = [1, 2];
let arr2 = ['one', 'two'];
let concatArr = arr1.concat(arr2)console.log(concatArr);
//[1, 2, "one", "two"
  • Array.copyWithin(): (ES6) Verilen parametrelere göre, arraydeki elemanları, array içinde başka bir dizine üzerine yazarak kopyalar. Array’in elaman sayısı değişmez, mevcut array’in üzerine yazar.

— Syntax: Üç parametre alır.

array.copyWithin(target, start, end);/*
* İlk parametre (target) elemanların kopyalanacağı
* index numarası. Zorunludur.
*
* İkinci parametre (start) elemanların kopyalanmaya başlayacağı
* index numarası. (Varsayılan değer: 0)
*
* Üçüncü parametre (end) Elemanların kopyalanmasının son bulacağı
* index numarası. (Varsayılan değer: array.length: toplam elaman
* sayısı kadardır.)
*
*/
let fruits = ["Banana", "Pineapple", "Mango", "Melon"];fruits.copyWithin(1,0,1);
// ["Banana", "Banana", "Mango", "Meloon"]

yukarıdaki fruits.fruits.copyWithin(1,0,1);(1,0,1); kod bloğu ile;

— array’in ikinci elemanını hedefledik, (1)

— ilk elemanı kopyalayıp(0), ikinci elemanda işlemi sonlardır dedik. (1)

— sonuç olarak; array’ın ilk halinde ikinci eleman “pineapple” iken; copyWithin(1,0,1) işlemi sonrasında “Banana” olarak değiştirilmiştir.

  • Array.entries(): (ES6): Array’deki elemanları value, index numaraları key olacak şekilde object döndürür. For döngüsü yardımı ile sonucu yazdırabiliriz.
let fruits = ["Banana", "Pineapple", "Mango", "Melon"];
let fruitsToObject = fruits.entries();
for (item of fruitsToObject){
console.log(item);
}
// [0, "Banana"]
// [1, "Pineapple"]
// [2, "Mango"]
// [3, "Melon"]
  • Array.every(): Array içindeki tüm elemanların, verdiğimiz kuralı geçip geçmediğini kontrol eder.

— Kuralı sağlamayan bi değerle karşılaştığında; false, döndürür ve kalan öğeleri kontrol etmez.

— Eğer kural sağlanırsa; true değeri döndürür.

let ages = [30, 24, 17, 22];let findAge = ages.every(element => element > 18);
// false
/* Kural elemanların 18'den büyük olmasıydı, every() 17 değeri ile karşılaşınca false döndürüp, işlemi sonlandırdı. */
  • Array.fill(): Array’in bütün öğelerini, verilen değer ile değiştirir.
let fruits = ["Banana", "Pineapple", "Mango", "Melon"];fruits.fill("Watermelon");
// ["Watermelon", "Watermelon", "Watermelon", "Watermelon"]
  • Array.filter(): Array’e verdiğimiz kuralı sağlayan elemanları içeren yeni bir dizi oluşturur.
let ages = [7, 16, 18, 24, 44];
let findAge = ages.filter(element => element < 18);
console.log(findAge);
// [7, 16]
/* Kuralımız elamanların 18'den küçük olmasıydı, bunu sağlayan 7,16 elemanlarını içeren yeni bir dizi oluşturdu.*/
  • Array.find(ES6): Array’e verdiğimiz kuralı geçen ilk elemanının değerini döndürür.
let ages = [4, 7, 9, 16, 18, 24, 44];let findAge = ages.find(element => element > 18);console.log(findAge); 
// 24
/* 18'den büyüktür kuralını geçen ilk eleman 24 olduğu için, 24 değerini yazdırıldı. */
  • Array.findIndex(): (ES6) : Array’e verdiğimiz kuralı geçen ilk elemanının index numarasını döndürür. Sonuç, array içerisinde varsa; index değerini, yoksa -1 döndürür.
let ages = [4, 7, 9, 16, 18, 24, 44];let findAge = ages.findIndex(element => element > 18);console.log(findAge);
// 5
/* 18'den büyük ilk değer 24 olduğu için, onun index numarası olan 5 yazdırıldı. */
  • Array.forEach (): Array’deki tüm elemanları çağırır.
let chaos = ['pasta', 12, [23, 'mj'], 9];chaos.forEach(function(val){
console.log(val);
});
// pasta
// 12
// [23, 'mj']
// 9
  • Array.from(): (ES6) Verilen string ifadeyi array’e dönüştürür.
var arr = Array.from("PİNEAPPLE");console.log(arr);// ["P", "İ", "N", "E", "A", "P", "P", "L", "E"]
  • Array.includes(): Array içindeki parametre olarak verilen değeri arar, bu değerin array içinde olması halinde true, olmaması halinde false döner.
let chaos = ['pasta', 12, [23, 'mj'], 9];chaos.includes(12);
// true
chaos.includes('beer');
// false
  • Array.indexOf(); Verilen parametrelere göre array’deki elemanı arar. İlk parametre aranacak eleman, ikinci parametre aramaya başlanacak index değeridir.
let chaos = ['pasta', 12, [23, 'mj'], 9];chaos.indexOf(9);
// 3
  • Eğer aranan elaman yoksa değer olarak -1 döner.
let chaos = ['pasta', 12, [23, 'mj'], 9];chaos.indexOf('burger');
// -1
  • Array.isArray(): Bir nesnenin array olup, olmadığının sonucunu boolean değer olarak döner. Array ise true, değilse false döner. Array.isArray(obj) şeklinde kullanılır.
let chaos = ['pasta', 12, [23, 'mj'], 9];
let isArrayCheck = Array.isArray(chaos);
console.log(isArrayCheck);
// true
  • Array.join(): Aldığı parametre ile array elemanlarını birleştirir.
let chaos = ['pasta', 12, [23, 'mj'], 9];chaos.join('+');
// "pasta+12+23,mj+9"
  • Array.keys(): Array içersindeki elemanların index değerini döndürür.
let fruits = ["Banana", "Pineapple", "Mango", "Melon"];let results = fruits.keys();for (const key of results) {
console.log(key);
}
// 0
// 1
// 2
// 3
  • Array.lastIndexOf(): Parametre olarak verilen değeri, Array içerisinde arar ve index değerini döndürür.
let fruits = ['Banana', 'Pineapple', 'Mango', 'Melon'];
let result = fruits.lastIndexOf('Mango');
console.log(result);
// 2
/* 'Mango' elamanının index numarası olan 2'yi döndürdü.*/
  • Array.map(): Array’in her elemanı için, parametre olarak verilen function’u çağırarak, sonuçları yeni bir array olarak oluşturup içerisinde tutar.
let arr = [1, 2, 3];let arrResult = arr.map(x => x + 2);console.log(arrResult);
//[3, 4, 5]
  • Array.pop(): Array’deki son elemanı alır ve sonrasında siler.
let chaos = ['pasta', 12, [23, 'mj'], 9];chaos.pop();
// 9
chaos;
// ["pasta", 12, Array(2)]
  • Array.push(): Array’in sonuna parametre olarak verilen değerleri ekler ve yeni eleman sayısını döndürür.
let chaos = ['pasta', 12, [23, 'mj'], 9];chaos.push('chicken', 6, 'cows');
// 7
chaos;
// ["pasta", 12, Array(2), 9, "chicken", 6, "cows"]
  • Array.reduce(): İlk parametresinde verilen değeri, ilk elemandan son elemana olacak şekilde, tüm array elemanları üzerine uygular. Değerlerin toplamını tek bir sonuç olarak geri döner. Array’in yapısını değiştirmez.
let arr = [2, 4, 6, 8, 10];
let reducer = (acc, currentValue) => acc + currentValue;
console.log(arr.reduce(reducer));/*
*
* Bu örnek üzerinden anlatacak olursam, reducer;
* ilk iteration'da;
* acc değeri 2, currentValue 4, dönen değer 6 olacak;
* ikinci iteration'da;
* acc değeri 6, currentValue 6, dönen değer 12 olacak;
* üçüncü iteration'da
* acc değeri 12, currentValue 8, dönen değer 20 olacak;
* dördüncü iteration'da
* acc değeri 20, currentValue 10, dönen değer 30 olacak,
* Bu iteration ile tamamlanan işlemin çıktısı 30 olacaktır.
*
* /
// 30
  • Array.reverse(): Array içerisindeki elemanları index numarasına göre tersten sıralar.
let chaos = ['pasta', 12, [23, 'mj'], 9];chaos.reverse();
// [9, Array(2), 12, "pasta"]
  • Array.shift(): Array’deki ilk elemanı alır ve sonrasında siler.
let chaos = ['pasta', 12, [23, 'mj'], 9];chaos.shift();
// pasta
chaos;
// [12, Array(2), 9]
  • Array.slice(): Verilen parametrelere göre dönen sonucu, yeni bir array oluşturarak içerisine ekler. Başlangıç ve bitiş parametrelerini alır.
let fruits = ["Banana", "Pineapple", "Mango", "Melon"];fruits.slice(1,2);// ["Pineapple", "Mango"]
  • Array.some(): Verilen kurala uyan tek bir eleman bulduğunda, true değeri döndürür ve kalan değerleri kontrol etmez. Kurala uyan eleman yoksa false değeri döndürür.
let ages = [30, 24, 17, 22];
let findAge = ages.some(element => element > 25);
// console.log(findAge);
true
/* Array içerisindeki elemanlarda 25'ten büyük bir elaman olduğu için true değerini döndü. */
  • Array.sort(): Array elemanlarını alfabetik olarak sıralar. Varsayılan sıralama şekli, alfabetik artan şeklindedir.
let fruits = ["Banana", "Pineapple", "Mango", "Melon", "Apple"];fruits.sort();
// ["Apple", "Banana", "Mango", "Melon", "Pineapple"]
/* Sayıları sıralarken aşağıdaki yöntemi kullanabiliriz. */let numbers = [9, 4, 8, 10];numbers.sort((a, b) => a - b);
// [4, 8, 9, 10]
  • Array.splice(): Array içerisindeki elemanları verdiğimiz parametrelere göre kaldırarak veya yerine yeni elemanlar ekleyerek array içeriğini değiştirir.
let fruits = ["Banana", "Pineapple", "Mango", "Melon"];fruits.splice(1, 1, 'Kiwi');/* 
* İlk parametre ile array'deki birinci eleman olan "Pineapple"'ı seçtik,
* İkinci parametre ile kaldırılacak eleman sayısını seçtik,
* Üçüncü parametre ile eklenecek değeri gönderdik.
*/
console.log(fruits);
// ["Banana", "Kiwi", "Mango", "Melon", "Apple"]
  • Array.toString(): Array içerisinde virgülle ayrılan bütün elemanların array’ini döndürür.
let chaos = ['pasta', 12, [23, 'mj'], 9];chaos.toString();
// pasta,12,23,mj,9
  • Array.unshift(): Array’ın başlangıcına; verilen parametrelerdeki değeri ekler.
let arr = [3, 4, 5];console.log(arr.unshift(1, 2));
// 5
/* Yeni eleman sayısını döndürdü. */
console.log(arr);
// [1, 2, 3, 4, 5]
/* arr Array'inin başlangıcına parametrede verdiğimiz 1 ve 2 elemanlarını ekledi. */
  • Array.valueOf(): Array içerisinde bir değişiklik yapmadan, array değerini döndürür.
let fruits = ["Banana", "Pineapple", "Mango", "Melon"];fruits.valueOf();
// ["Banana", "Pineapple", "Mango", "Melon"]

Yazı hakkında soru, görüş veya öneriniz olursa, yorum ya da e-mail ile kurnazyavuzselim[at]gmail.com üzerinden bana ulaşabilirsiniz. Zaman ayırıp okuduğunuz için teşekkür ederim.

Sevgiler.

--

--