JavaScript’te “filter()” Metodu Kullanımı

2 dakika okuma süresi

İçerik gizle

1.1 “Arrow” Fonksiyonu ile “filter()” Metodu

1.2 “filter()” Metodunu Kullanırken Nelere Dikkat Etmeliyiz?

JavaScript’te filter() metodu, belirli bir koşulu karşılayan dizi (array) elemanlarını seçmek için kullanılır. Bu fonksiyon orijinal diziyi değiştirmez, bunun yerine koşulu karşılayan yeni bir dizi oluşturur.

JavaScript’te “filter()” Metodu

JavaScript’te “filter()” metodu, adından da anlaşılacağı gibi, bir diziyi “filtreleme” işlemi için kullanılır. Yani bu metot, belirli bir koşulu karşılayan dizi öğelerini yeni bir dizi olarak döndürmek için kullanılır.

Kelime anlamı olarak “filter”, Türkçede “filtre” ya da “süzgeç” anlamına gelmektedir. Bu metotla, bir diziyi “filtreliyormuş” gibi düşünebilirsiniz. Bu filtreleme, bizim belirttiğimiz koşullara göre çalışır ve sadece bu koşulları karşılayan elemanları yeni bir diziye ekler.

Metodumuz, bir dizi üzerinde belirli bir koşulu kontrol eden bu filtreleme işlemini yapabilmek için fonksiyon (callback function) çalıştırır. Dizinin her bir elemanı için tek tek çalışan bu fonksiyon, dizi elemanı true döndüğü takdirde o elemanı yeni bir diziye alır. Sonuç olarak, bu metot sadece true dönen elemanları barındıran yeni bir dizi döndürür.

JavaScript’te “filter()” metodunu aşağıdaki söz dizim (syntax) ile kullanırız:

array.filter(function(currentValue, index, arr) {
// dönecek değerle ilgili kod
}, thisValue);

array.filter(function(currentValue, index, arr) {

// dönecek değerle ilgili kod

}, thisValue);

function(currentValue, index, arr): Bu bir callback fonksiyonudur ve üç parametre alır:
- currentValue: (Zorunlu) Geçerli elemanın değeri.
- index: (Opsiyonel) Geçerli elemanın dizin değeri.
- arr: (Opsiyonel) filter() metodunun çağrıldığı dizi.
thisValue: (Opsiyonel) Geri çağırma fonksiyonu (callback function) içerisinde kullanılacak olan this değerini belirtir.

let obj = {
value: 5,
filterByValue: function(arr) {
return arr.filter(function(item) {
return item >= this.value;  // 'this' burada 'obj' objesine referans verir
}, this);
}
};
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let filteredNumbers = obj.filterByValue(numbers);
console.log(filteredNumbers);  // [5, 6, 7, 8, 9, 10]

let obj = {

value: 5,

filterByValue: function(arr) {

return arr.filter(function(item) {

return item >= this.value; // 'this' burada 'obj' objesine referans verir

}, this);

}

};

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let filteredNumbers = obj.filterByValue(numbers);

console.log(filteredNumbers); // [5, 6, 7, 8, 9, 10]

Yukarıdaki örnekte, filterByValue metodu obj nesnesinin value özelliğine (5) eşit veya daha büyük olan sayıları filtreleyerek yeni bir dizi döndürmektedir. thisValue parametresi, yani örneğimizdeki adıyla (this) sayesinde, geri çağırma fonksiyonu içindeki this kelimesi obj nesnesine referans vermektedir.

Bu parametrelerin tamamını kullanmak zorunda değiliz. Eğer yalnızca mevcut değere ihtiyacınız varsa, currentValue parametresini kullanmak yeterli olacaktır. Örneğin:

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenNumbers = numbers.filter(function(number) {
return number % 2 === 0;
});
console.log(evenNumbers); // [2, 4, 6, 8, 10]

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let evenNumbers = numbers.filter(function(number) {

return number % 2 === 0;

});

console.log(evenNumbers); // [2, 4, 6, 8, 10]

Yukarıdaki örnekte, evenNumbers değişkeni, numbers dizisindeki çift sayıları içerir. filter() fonksiyonu, dizinin her elemanını kontrol eder ve yalnızca çift olanları (yani number % 2 === 0 koşulunu sağlayanları) yeni bir diziye ekler.

“Arrow” Fonksiyonu ile “filter()” Metodu

JavaScript’te “filter()” metodunun “arrow” (ok) fonksiyonu ile birlikte kullanıldığında, söz dizimi daha sade ve anlaşılır hale gelir. Bakınız:

array.filter((currentValue, index, arr) => {
// dönecek değerle ilgili kod
});

array.filter((currentValue, index, arr) => {

// dönecek değerle ilgili kod

});

“Arrow” fonksiyonlarının en belirgin özelliklerinden biri, kendi this değerlerini oluşturmamalarıdır. Bu nedenle, “arrow” fonksiyonlarını içeren bir fonksiyon çağrıldığında, “arrow” fonksiyonu çevreleyen fonksiyonun this değerini kullanır. Bu özellik, özellikle bu tür yöntemlerde kullanıldığında çok yararlı olmaktadır. Bakınız:

let obj = {
value: 5,
filterByValue: function(arr) {
// Arrow fonksiyonu burada çevreleyen 'filterByValue' fonksiyonun 'this' değerini kullanır.
return arr.filter(item => item >= this.value);
}
};
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let filteredNumbers = obj.filterByValue(numbers);
console.log(filteredNumbers);  // [5, 6, 7, 8, 9, 10]

let obj = {

value: 5,

filterByValue: function(arr) {

// Arrow fonksiyonu burada çevreleyen 'filterByValue' fonksiyonun 'this' değerini kullanır.

return arr.filter(item => item >= this.value);

}

};

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let filteredNumbers = obj.filterByValue(numbers);

console.log(filteredNumbers); // [5, 6, 7, 8, 9, 10]

Yukarıdaki kodumuzda, “arrow” fonksiyonu, çevreleyen filterByValue fonksiyonunun this değerini (yani obj objesini) kullanır, bu nedenle ayrıca this argümanını belirtmeye gerek kalmaz. Haliyle bu tür senaryolarda normal fonksiyon ifadelerinden daha pratik olduğu için tercih edilir.

Bir diğer örneğimizi de “arrow” fonksiyonu ile yazalım:

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenNumbers = numbers.filter((currentValue, index, arr) => {
return currentValue % 2 === 0; // dönecek değerle ilgili kod
});
console.log(evenNumbers); // [2, 4, 6, 8, 10]

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let evenNumbers = numbers.filter((currentValue, index, arr) => {

return currentValue % 2 === 0; // dönecek değerle ilgili kod

});

console.log(evenNumbers); // [2, 4, 6, 8, 10]

❗ Eğer “callback” fonksiyonumuz tek bir ifadeden oluşuyorsa, “arrow” fonksiyonumuz daha da kısaltabilir:

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenNumbers = numbers.filter(currentValue => currentValue % 2 === 0);
console.log(evenNumbers); // [2, 4, 6, 8, 10]

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let evenNumbers = numbers.filter(currentValue => currentValue % 2 === 0);

console.log(evenNumbers); // [2, 4, 6, 8, 10]

Yukarıdaki örneğimizde, fonksiyon yalnızca tek bir ifade içermesi nedeniyle süslü parantezler ({}) ve return anahtar kelimesi atlanmıştır.

“filter()” Metodunu Kullanırken Nelere Dikkat Etmeliyiz?

JavaScript’te “filter()” metodu kullanırken nelere dikkat etmem gerekir sorumu araştırırken bazı önemli noktaları not aldım:

Immutability (Değişmezlik): filter metodu, orijinal diziyi değiştirmez. Bunun yerine, belirtilen koşula uyan dizi elemanlarını içeren yeni bir dizi döndürür.
Geri Dönüş Değeri: Geri çağırma (callback) fonksiyonun döndürdüğü değer mutlaka boolean (doğru ya da yanlış) olmalıdır. Bu değer, filtrelenecek dizideki elemanın yeni diziye dahil edilip edilmeyeceğini belirler.
Performans: Büyük dizilerle çalışırken, filter metodunun performansını göz önünde bulundurmalısınız. Zira filter metodu, dizi üzerindeki her öğe için geri çağırma fonksiyonunu çalıştırır. Eğer çok büyük bir dizi üzerinde karmaşık bir filtreleme işlemi yaparsanız performans sorunları yaşayabilirsiniz.
this Değeri: Eğer geri çağırma fonksiyonu içinde this kullanmayı planlıyorsanız, filter metodunun ikinci argümanını kullanarak bu değeri belirtebilirsiniz. Arrow fonksiyonları kullanıldığında, bu this değeri otomatik olarak dış kapsamdaki this değerine set edilir.
Boş Öğeler: Eğer bir dizi boş öğeler içeriyorsa, filter bu öğeleri göz ardı eder ve geri çağırma fonksiyonunu bu öğeler için çağırmaz.
Geri çağırma Fonksiyonundaki Değişkenler: filter metodu geri çağırma fonksiyonuna “şu anki değer”, “şu anki indeks” ve “dizi” olmak üzere üç argüman gönderir. Ancak bu üç argümanı da kullanmak zorunda değilsiniz. İhtiyacınıza bağlı olarak sadece şu anki değeri (veya diğer argümanları) kullanabilirsiniz.

2 dakika okuma süresi

JavaScript’te “filter()” Metodu

“Arrow” Fonksiyonu ile “filter()” Metodu

“filter()” Metodunu Kullanırken Nelere Dikkat Etmeliyiz?

İlgili Makaleler

JavaScript’te “map()” Metodu Kullanımı

JavaScript’te “charAt()” Metodu Kullanımı

JavaScript’te DOM Metotları Nelerdir?

JavaScript “async” ve “defer” Kullanımı

Bir yanıt yazın Yanıtı iptal et

😔 Reklam Engelleyicisi 😔