JavaScript filter İle Array Filtreleme İşlemleri

Diziler ile çalışırken bazı durumlarda filtreleme işlemleri yapmamız gerekir. Mesela üye listesi içerisinden daha önce yorum yapmış kullanıcıları listelemek isteyebiliriz. Kategoriler arasında gönderi olmayan kategorileri listeden çıkarmamız gerekebilir. Yada alışveriş sepetinde bulunan ama stoğu tükenmiş ürünleri alışveriş sepetinden çıkarmak isteyebiliriz.

Eğer elimizde bir JavaScript dizisi varsa bunun içerisinden istediğimiz elemanları seçip alabiliriz. Bunun için Array filter metodu mevcuttur.

Array filter Metodu

JavaScript dizilerinde filtreleme yaparak istediğimiz elemanları almamız için geliştirilmiş bir metodudur. Array üzerinde çalışır ve sonuçta istenen dizi elemanlarından yeni bir array oluşturur.

filter Metdonun Yazım Şekilleri (syntax)

Filter metodunu kullanırken farklı işlemler için farklı kullanım şekilleri vardır.

// Arrow function
filter((element) => { /* … */ } )
filter((element, index) => { /* … */ } )
filter((element, index, array) => { /* … */ } )

// Callback function
filter(callbackFn)
filter(callbackFn, thisArg)

// Inline callback function
filter(function(element) { /* … */ })
filter(function(element, index) { /* … */ })
filter(function(element, index, array){ /* … */ })
filter(function(element, index, array) { /* … */ }, thisArg)

Parametreler

filter metodunun aldığı parametreler şunlardır.

• callbackFn bir callback fonksiyonudur ve filter ile gönderilen dizi elemanı üzerinde işlem yaparak true veya false değeri döner.
• element o an dizi üzerinde işlem yapılan elemanı tutar.
• index o an işlem yapılan elemanın dizi içerisindeki indeks değerini tutar.
• array filter işlemini çağıran diziyi tutar.
• thisArg callback fonkisonuna this değerini geçirir.

Bunlardan element zorunlu olarak kullanılan bir parametredir. Diğer parametreler isteğe bağlı kullanılırlar.

Dönüş Değeri

Array.prototype.filter (uzun ismini yazdık) dönüş değeri olarak dizi içerisinde istenilen elemanlardan oluşan yeni bir array geriye döner. İstenmeyen elemanlar elenir. Böylece mesela bir değer dizisi içerisinde 50 den büyük olan elemanları rahatlıkla seçip alabiliriz.

Açıklama

filter metodu bir dizinin tüm elemanlarını tek tek ele alır ve onu bir callback fonskiyonu içerisinde değerlendirir. Eğer eleman istenilen değerde ise fonksiyon true değeri döner. Böylece bu eleman yeni bir diziye atanır. Tüm true değerine sahip elemanlardan yeni bir dizi oluşturulur. false değerine sahip elemanlar ise elenir.

filter ile çağrılan callback fonskiyonuna üç değer geçirilir.

• O anki işlenecek dizi elemanı.
• O anki işlenen dizi elemanının indeks değeri.
• Filter metodunu çağıran dizi.

Ayrıca istenirse this değeri de geçirilebilir.

JavaScript array filter metodu asıl dizi üzerinde bir işlem yapmaz. Bunun yerine filtrelenen elemanlardan yeni bir bir dizi oluşturur.

Örnekler ile JavaScript Array filter Metodu Kullanımı

Şimdi örnekler ile filter metodunun nasıl çalıştığını görelim.

Dizideki İstenilen Değerden Küçük Sayıları Bulma

İlk olarak elmizdeki sayı dizisinin 50 den küçük elemanlarını bularak işe başlayalım.

const dizi = [5, 19, 41, 51, 79, 81, 99];

function kucukSayilariBul(sayi) {
    if (sayi < 50) return true;
    else return false;
}

const yeniDizi = dizi.filter(kucukSayilariBul);

console.log(yeniDizi);

// Konsola
// [ 5, 19, 41 ]
// yazar.

Sonuç olarak ekrana 5, 19, 41 değerleri yazdırıldı. Çünkü bu değerler 50 den küçüktir. Diğer değerler 50 den büyük olduğu için elendiler. Şimdi adım adım ne yaptığımıza bakarsak.

1- İlk olarak bir sayı dizisi oluşturduk. 2- Bir callback fonksiyonu yazdık. Bu fonksiyon gelen sayı 50 den küçük ise true değeri dönüyor. Aksi halde false değeri dönderiyor. 3- const yeniDizi = dizi.filter(kucukSayilariBul); işlemi ile dizi elemanları tek tek çağrılıyor ve çağrılan eleman callback fonksiyonu olan kucukSayilariBul fonksiyonuna geçiriliyor. 4- Callback fonksiyonu gelen değeri denetleyerek 50 den küçük olanlarda true değerini geri dönüyor. 5- Tüm true değerlere sahip olan elemanlardan yeni bir dizi oluşturuluyor. 6- Yeni oluşturulan diziyi terminale yazdırıyoruz. 7- Ve işlemimiz bitiyor.

Basit bir kullanımı olan bir metod. Fakat farklı yazım sitilleri olduğu için bazen kafa karışıklığına neden olabiliyor.

Bir Dizideki Asal Sayıları Bulma

Şimdi filter metodu ile bir dizi içerisinde bulunan asal sayıların nasıl bulunduğunu görelim. Bildiğiniz gibi asal sayılar sadece kendilerine ve 1 e tam olarak bölünürler. Bu nedenle bu iki değerden başka bir sayıya tam olarak bölünen sayılar asıl değildir. Bunu anlamak için mod (%) alma operatörünü kullanabiliriz. Mantığımız şu olacak. Önce bir 2 den başlayan ve sayının kendisine kadar giden bir döngü oluşturacağız, sayının kendisini ve 1 değerini bu döngüye katmamıza gerek yok. Çünkü tüm sayılar bu iki değere tam bölünür. Sonra bu döngüden tüm sayıları mod ile denetleyeceğiz, eğer sonuç sıfıra (0) eşitse bu sayının başka bir sayına tam bölündüğünü belirtir ve geri false değeri döner, aksi halde true değeri döndereceğiz. Çünkü sayı asaldır.

const dizi = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];

function asalMi(sayi) {
  for (let i = 2; sayi > i; i++) {
    if (sayi % i === 0) {
      return false;
    }
  }
  return sayi > 1;
}

console.log(dizi.filter(asalMi)); 
// Terminale
// [2, 3, 5, 7, 11, 13]
// sonucunu yazar.

Dizi Elemanları İçerisinde Arama Yapmak

Şimdi farklı bir örnek yapalım. İsimlerden oluşmuş bir dizimiz olsun. Biz bu dizi içerisinde istediğimiz içeriğe sahip olan elemanları listeleyelim. Mesela a harfini içeren tüm isimleri listeleyelim. Bunun için array filter metodunu ve string includes metodunu kullanacağız.

const isimler = ['Ahmet', 'Ali', 'Alim', 'Hasan', 'Dursun', 'Hakan', 'Selim', 'Nuri'];

function isimleriArastir(dizi, terim) {
    const yeniDizi = dizi.filter((eleman) => {
        let sonuc = eleman.toLowerCase().includes(terim.toLowerCase());
        if(sonuc === true) return true;
        else return false;
    });
    return yeniDizi;
}

console.log(isimleriArastir(isimler, 'al')); // ['Ali', 'Alim']
console.log(isimleriArastir(isimler, 'n')); // ['Hasan', 'Dursun', 'Hakan', 'Nuri']
console.log(isimleriArastir(isimler, 's')); // ['Selim']

Bu uygulamamızda bir arama fonksiyonu yazdık, fonksiyona arama yapılacak dizi ve arama yapılacak terimi geçiriyoruz. Sonra dizinin filter metodunu çağırıyoruz. Filter her seferinde bir eleman dönüyor. Elemanı önce toLowerCase metodu ile küçük harfe çeviriyoruz. Sonra string includes metodunu çağırıyoruz. includes metoduna terim olarak bize gelen arama terimini küçük harfe çevirerek veriyoruz. Eğer arama terimi eleman içerisinde varsa sonuç true olarak geri dönecektir. Yoksa false değeri geri döner. Burada tek satırta bir kaç işlem yapıyoruz.

Aslında ES6 ile isimeriArastir fonksiyonunun içeriğini tek satıra düşürebiliriz.

function isimleriArastir(dizi, terim) {
    return dizi.filter((eleman) => eleman.toLowerCase.includes(terim.toLowerCase));
}

Filter İle Dizinin Kendisi Üzerinde Eleman Değerini Değiştirme

Elimizde bulununan dizinin bazı durumlarda değerlerini değiştirmemiz gerekebilir. Bunun için filter metodunun bize sağladığı index ve array değişkenlerini kullanabiliriz. Mesela ilk örneğimizdeki dizi içerisinde bulunan değerlerden 50 ile 59 arasında olanlara 10 değerini eklemek istersek.

const dizi = [5, 19, 41, 51, 55, 81, 99];

function kucukSayilariBul(sayi, index, array) {
    if( sayi >= 50 && sayi < 60 ) array[index] = sayi + 10;
    if (sayi < 50) return true;
    else return false;
}

const yeniDizi = dizi.filter(kucukSayilariBul);

console.log(yeniDizi);

// Konsola
// [ 5, 19, 41 ]
// yazılacaktır.

console.log(dizi);
// Terminale
// [5, 19, 41, 61, 65, 81, 99]
// yazılacaktır

Sonuç

Diziler üzerinde işlem yapmak her zaman önemlidir. Bazen ekleme yapmak gerektiği gibi bazen dizi içerisindeki belirli kriterlere uyan elemanların alınması gerekebilir. Array içerisindeki elemanlardan istediğimiz değerlere sahip olmayanları elemek ve istediğimiz elemanları almak için Array filter metodunu kullanabiliriz.

Filter metodu ile çalışırken yaşadığınız sorunları bizimle paylaşır mısınız?