JavaScript Array İçerisinden İstenilen Bir Eleman Nasıl Silinir?

Program geliştirirken çok kullandığımız dizi içerisinden belirli bir eleman silmek gerekebilir. Bunu JavaScript ile yapmanın farklı yolları vardır. Bu yolların olma sebebi kullanım yerlerinin farklı olmasıdır. Burada şunu yapacağız, elimizdeki bir array nesnesinin (array) içerisinden silmemiz gereken bir elemanı çıkarmak (silmek).

Bu yazımızda iki farklı yoldan bahsedeceğiz. Birincisinde asıl dizi üzerinde işlem yapacağız ve asıl dizinin içerisinden eleman sileceğiz, ikinci yolda ise orjinal diziye dokunmadan silmek istediğimiz elemanın olmadığı yeni bir dizi oluşturacağız.

Birinci Yol – Asıl Diziyi Değiştir

İlk olarak elimizde bir renk dizisi olduğunu varsayalım.

const colors = ['blue','red','white','black','gray'];

Dizimizden gray rengini çıkarmak isteyelim (silelim). Bunu Array.splice metodunu kullanarak yapacağız. Fakat daha öncesinden Array.indexOf ile gray renginin colors dizisindeki indeksini bulmamız gerekiyor. Bu işlemi adım adım yapalım.

• Öncelikle gray renginin colors dizinsindeki indeksini bullalım. const index = colors.indexOf("gray");
• Sonrasında aradığımız gray değeri dizide var mı diye denetlememiz gerekli olacaktır. Bunu if(index > -1) kodu ile yapıyoruz. Çünkü eğer aranınlan değer array içerisinde yoksa indexOf geriye -1 değerini dönderir. Eğer aranılan değer var ise de elemanın indeks değerini geri dönderir.
• Ardından eğer eleman dizi içerisinde varsa if bloğu içerisinde colors.splice(index, 1); kodu ile elamanı diziden siliyoruz. splice kullanırken aldığı ilk parametre silinecek elemanın indeks değeri ve ikinci parametre ise indeksten itibaren kaç eleman silineceğidir. Biz sadece bir eleman sileceğimiz için 1 değerini giriyoruz.

Şimdi kodumuzu yazalım. Sonucu görmek için de colors değişkenini işlem başlamadan ve işlem bittikten sonra konsola yazdıralım.

const colors = ['blue','red','white','black','gray'];

console.log(colors);
// Konsola
// ['blue','red','white','black','gray']
// yazdırır

const deletedItem = 'gray';
const index = colors.indexOf(deletedItem);
if(index > -1) {
    colors.splice(index, 1);
}

console.log(colors);
// Konsola 
// ['blue','red','white','black']
// yazdırır.

splice işlemi uygulandığında dizi üzerinden eleman silinecektir. Bu nedenle asıl dizi değişmiş olacaktır.

İkinci Yol – Yeni Dizi Oluştur

Array içerisinde eleman silmenin diğer bir yoluda Array.filter metodunu kullanmaktır. İstenmeyen elemanı filtreleyerek geriye istenen elemanları dönderebiliriz. Yine elimizde bir renk dizisinin olduğunu varsayalım.

const colors = ['blue','red','white','black','gray'];

Ve bu dizinden white rengini çıkarmak isteyelim. Bunu yapmak için öncelikle diziye bir filtre uyguluyoruz ve bu filtre içerisinde white değerinin ayıklanmasını sağlıyoruz. Adım adım bu işlemi yapalım.

• İlk olarak colors dizisinde filter metodunu çalıştıralım. const newColors = colors.filter(color => );
• Sonrasında filter içerisinde bize verilen color değişkenini denetleyelim. Eğer color değişkeni white değerine eşit değilse geri dönderilsin. if(color === `white`) return true;
• filter işlemi sonucunda geri dönderilen değerleri newColors değişkenine atayalım.

Şimdi kodları yazalım. Sonucu görmek için hem işlem başlamadan ve hem de işlem bittiğinde colors dizisini konsola yazdırıyoruz.

const colors = ['blue','red','white','black','gray'];

console.log(colors);
console.log(colors);
// Konsola
// ['blue','red','white','black','gray']
// yazdırır

const removedColor = 'white';
const newColors = colors.filter(color => {
    if (color !== removedColor ) return true;
    return false;
});

console.log(colors);
// Konsola
// ['blue','red','black','gray']
// yazdırır

filter metodu karşılaştırmanın sonucunda eğer sonuç doğru ise true değerinin geri dönmesini ister, böylece o değer yeni diziye aktarılır. Eğer sonuç yanlışsa false değeri geri dönderilir. true demek filtreleme şartlarımızı sağlıyor yeni diziye aktaralım demektir. false ise filtreleme şartlarımızı karşılamıyor (bu örnekte removedColor color değerine eşitse ) bu nedenle yeni diziye aktarma demektir.

Filter işlemini uyguladığımızda asıl dizinin değeri değişmez, yeni bir dizi oluşturulur.

Sonuç

Diziler üzerinde işlem yapmak için JavaScript çok sayıda yol ve yöntem sunar. Bu bölümde diziden eleman silmeyi gördük. Eğer diziden elemanı tamamen silmek isiyorsak splice işlemi uygulayabiliriz. Eğer asıl diziye dokunmadan yeni bir dizi oluşturarak işlem yapacaksak filter metodunu kullanırız.

Konu ile alakalı olarak JavaScript Array Değişkenlerden Eleman Silmenin 5 Farklı Yolu yazısına bakabilirsiniz.

Sizin de ekleyeceğiniz farklı yöntemler var mı? Lütfen bizimle paylaşın.