Javascript Dizi (Array) Metotları — 1

Utku Kaba
3 min readFeb 10, 2023

--

Javascript Array Methods

Bu yazı serisinde Javascript dilinde dizi nesneleri ile tanımlanan metotlar yaptıkları işlevlere göre sınıflandırılıp anlatılacaktır. Bu metotlar sayesinde diziler ile çalışırken daha kısa ve verimli kodlar yazmamız mümkün olacaktır. Bu metotları kullanmadan önce tarayıcı destek durumlarını kontrol etmenizde fayda vardır.

Dizi elemanları üzerinde düzenleme işlemi yapan metotlar

  1. pop()

Bu metot dizi içerisindeki en son elemanı siler ve sildiği elemanın değerini geri döndürür.

const myFish = ["angel", "clown", "mandarin", "sturgeon"];

const popped = myFish.pop();

console.log(myFish); // Expected output: ['angel', 'clown', 'mandarin' ]

console.log(popped); // Expected output: 'sturgeon'

2. push()

Bir dizinin sonuna bir ya da daha fazla eleman eklemek için kullanılan metotdur.

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');

console.log(count); // Expected output: 4

console.log(animals); // Expected output: Array ["pigs", "goats", "sheep", "cows"]

3. reverse()

Bu metot dizi içersindeki sıralamayı ters çevirir. Bu metot geriye yeni oluşturulan dizi nesnesini döndürür. Buradaki dikkat edilecek nokta bu metotun orijinal diziyi değiştirdiğidir.

const reversed = array1.reverse();

console.log('reversed:', reversed);
// Expected output: "reversed:" Array ["three", "two", "one"]

console.log('array1:', array1);
// Expected output: "array1:" Array ["three", "two", "one"]

4. shift()

Bu metot dizi içerisindeki ilk elemanı (indeksi 0 olan eleman) siler. Geriye sildiği elemanın değerini döndürür.

const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);
// Expected output: Array [2, 3]

console.log(firstElement);
// Expected output: 1

5. unshift()

Bu metot bir dizinin başına bir ya da daha fazla eleman eklemek için kullanılır. Geriye yeni oluşan dizinin uzunluğunu döndürür.

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// Expected output: 5

console.log(array1);
// Expected output: Array [4, 5, 1, 2, 3]

6. sort()

Bir dizideki elemanları sıralamak için kullanılır. Bu metot yeni bir dizi nesnesi oluşturmaz, iletilen diziyi sıralar. Bu metot hakkında önemli bir nokta ise sıralamaları Unicode kod karakterleri sırasına göre karşılaştırarak sıralama yapmasıdır. O yüzden bu metotu direkt olarak sayılar için kullanmak beklenmedik bir sonuç getirir.

const months = ['March', 'Jan', 'Feb', 'Dec'];

months.sort();

console.log(months);
// Expected output: Array ["Dec", "Feb", "Jan", "March"]
const array1 = [1, 30, 4, 21, 100000];

array1.sort();

console.log(array1);
// Expected output: Array [1, 100000, 21, 30, 4]

Yukarıdaki kod örneğinde gördüğümüz gibi sayıları karakter olarak algılayıp sıralama yapmıştır. Bu da bizim beklediğimizin dışında bir dönüt oluşturmuştur. Bunun çözümü ise karşılaştırma fonksiyonu kullanarak sıralama yaptırmaktır.

const numbers = [5, 25, 14];

numbers.sort(function(a, b){return a - b});

console.log(numbers)// 5, 14, 25

const numbers2 = [5, 25, 14];

numbers2.sort(function(a, b){return b - a});

console.log(numbers2) //[25, 14, 5]

7. splice()

Bir diziye eleman eklemek ya da diziden eleman silmek için kullanılan metottur. Bu metot, diziden eleman silme anında diziye yeni elemanları ekleme imkanı sağlamaktadır.

array.splice(start)
array.splice(start, deleteCount)
array.splice(start, deleteCount, item1)
const months = ['Jan', 'March', 'April', 'June'];

months.splice(1, 0, 'Feb');
// Inserts at index 1

console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// Replaces 1 element at index 4

console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "May"]

Bu yazımda işinize yarayabilecek ve bilmenizde fayda olduğunu düşündüğüm dizi elemanları üzerinde düzenleme işlemi yapabileceğiniz Javascript metotlarından kısaca bahsetmeye çalıştım.

İyi çalışmalar.

Kaynakça

  1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
  2. https://www.w3schools.com/js/js_array_methods.asp

--

--