Tüm blog yazıları

JavaScript’te filter() Metodu

JavaScript’te programlama yaparken elimizde genellikle listeler (diziler) bulunur. Bu listelerin içinden bazı elemanları ayıklamak, belirli kurallara uyanları seçmek isteyebiliriz. Örneğin bir öğrenci listesi düşünelim. Bu listeden sadece notu 70’ten yüksek olan öğrencileri almak isteyebiliriz

eminbasbayan4 dk okuma
JavaScript’te filter() Metodu

JavaScript’te programlama yaparken elimizde genellikle listeler (diziler) bulunur. Bu listelerin içinden bazı elemanları ayıklamak, belirli kurallara uyanları seçmek isteyebiliriz. Örneğin bir öğrenci listesi düşünelim. Bu listeden sadece notu 70’ten yüksek olan öğrencileri almak isteyebiliriz. İşte bu tür işlemleri yapmanın en doğru ve etkili yollarından biri filter() metodudur.

Bu makalede, filter() metodunu detaylı şekilde öğreneceğiz. Ne işe yarar, nasıl çalışır, hangi durumlarda kullanılabilir ve nasıl daha verimli hale getirilir gibi soruların cevaplarını örneklerle birlikte açıklayacağız.

filter() Nedir?

filter() metodu, bir dizideki her elemanı kontrol eder ve verilen koşula uyan elemanları yeni bir dizi olarak döndürür.

Buradaki önemli nokta şudur: filter() orijinal diziyi değiştirmez. Sadece koşulu sağlayan elemanlardan oluşan yeni bir dizi oluşturur.

Kullanım Şekli

jsx
yeniDizi = eskiDizi.filter(function(eleman) {
  return kosul;
});

Burada:

  • eskiDizi: Üzerinde işlem yapılan dizidir.
  • eleman: Dizideki her bir öğeyi temsil eder.
  • kosul: Eğer true dönerse, bu eleman yeni diziye dahil edilir.

Basit Örnek: Sıcaklık Verileri

Bir şehirdeki sıcaklıkların bulunduğu listeyi düşünelim. Biz sadece 30 dereceden yüksek olanları istiyoruz:

jsx
const sicakliklar = [22, 35, 28, 40, 19, 33, 25];

const sicakGunler = sicakliklar.filter(function(sicaklik) {
  return sicaklik > 30;
});

console.log(sicakGunler); // [35, 40, 33]

Burada filter, dizideki her sıcaklık değerini kontrol eder. 30’dan büyük olanları seçer ve yeni bir liste oluşturur.

Nesnelerle filter() Kullanımı

Daha gerçekçi bir senaryo düşünelim. Diyelim ki elimizde kitaplardan oluşan bir liste var. Her kitap bir nesne şeklinde tanımlanmış.

jsx
const kitaplar = [
  { ad: "Yüzüklerin Efendisi", sayfa: 1200 },
  { ad: "Küçük Prens", sayfa: 95 },
  { ad: "Sefiller", sayfa: 1463 },
  { ad: "Hayvan Çiftliği", sayfa: 112 }
];

Burada, 300 sayfadan fazla olan kitapları almak isteyelim:

jsx
const kalinKitaplar = kitaplar.filter(function(kitap) {
  return kitap.sayfa > 300;
});

console.log(kalinKitaplar);

Sonuç:

jsx
[
  { ad: "Yüzüklerin Efendisi", sayfa: 1200 },
  { ad: "Sefiller", sayfa: 1463 }
]

Daha Kısa Yazım: Arrow Function ile

Callback fonksiyonu arrow function (ok fonksiyonu) kullanarak daha kısa yazabiliriz:

jsx
const kalinKitaplar = kitaplar.filter(kitap => kitap.sayfa > 300);

Aynı işi yapar ama kod daha sade olur.

Tarihe Göre Süzme: Filmler Örneği

Bir başka örnekte filmleri tarihe göre süzelim. Elimizde şu şekilde bir dizi var:

jsx
const filmler = [
  { ad: "Matrix", yil: 1999 },
  { ad: "Interstellar", yil: 2014 },
  { ad: "Titanic", yil: 1997 },
  { ad: "Inception", yil: 2010 }
];

2000 yılından sonra çıkan filmleri almak için:

jsx
const yeniFilmler = filmler.filter(film => film.yil > 2000);

console.log(yeniFilmler);

Sonuç:

jsx
[
  { ad: "Interstellar", yil: 2014 },
  { ad: "Inception", yil: 2010 }
]

filter() ve map() Metotlarını Birlikte Kullanmak

Bazen filtrelediğimiz verilerin sadece belirli bir kısmını (örneğin sadece adlarını) almak isteyebiliriz. Bu durumda map() metodunu filter() ile birlikte kullanırız.

Örneğin: 1000 sayfadan fazla olan kitapların sadece adlarını almak:

jsx
const uzunKitapIsimleri = kitaplar
  .filter(kitap => kitap.sayfa > 1000)
  .map(kitap => kitap.ad);

console.log(uzunKitapIsimleri); // ["Yüzüklerin Efendisi", "Sefiller"]

Burada:

  • filter() ile kalın kitapları seçtik.
  • map() ile sadece isimlerini aldık.

Bu yazım tarzı, iki işlemi tek adımda yapmamızı sağlar.

Orijinal Dizi Değişmez

Unutmamız gereken bir diğer önemli nokta: filter() orijinal diziyi asla değiştirmez. Her zaman yeni bir dizi üretir. Aşağıdaki kodda bunu test edebiliriz:

jsx
console.log(kitaplar); // Tüm kitaplar hâlâ duruyor, değişmedi

Sonuç

JavaScript’te filter() metodu, bir dizideki belirli koşulları sağlayan elemanları seçmek için oldukça kullanışlıdır. Özellikle:

  • Sayısal filtrelemelerde,

  • Nesne listelerinde belirli özelliklere göre seçim yaparken,

  • Daha okunabilir ve sade kod yazmak için map() ile birlikte kullanıldığında

    çok etkilidir.

Bu metodu anladığınızda, veri işleme konusunda çok daha güçlü olacaksınız. Kendi projelerinizde öğrenci listeleri, ürün katalogları veya herhangi bir veriyi filtrelemeniz gerektiğinde rahatlıkla kullanabilirsiniz.

JavaScript Classes ile pratik uygulamalar, metotlar arası iletişim ve gerçek dünya kod örnekleri
JavaScript Dersleri9 dk okuma

JavaScript Classes - Pratik Uygulamalar

JavaScript class'ları ile pratik uygulamalara geçin! Metotlar arası iletişimden constructor'da metot çağırmaya, kod tekrarını azaltmaktan gerçek dünya senaryolarına kadar class kullanımının inceliklerini keşfedin. Kendi alışveriş sepeti örneğinizle bilginizi pekiştirin.

Yazıyı oku
JavaScript class yapısını gösteren bir kod örneği, ES6 ile modern nesne oluşturma
JavaScript Dersleri9 dk okuma

JavaScript Classes

ES6 ile JavaScript'e gelen class yapısı sayesinde nesne oluşturmak artık çok daha kolay ve düzenli! Constructor function karmaşasından kurtulup, okunabilir ve yönetilebilir kodlar yazmak isteyenler için modern JavaScript'in temel taşı olan class'ları tüm detaylarıyla keşfedin. Bu rehberle nesne şabl

Yazıyı oku
JavaScript kodunda Constructor Function ve new keyword'ü ile nesne oluşturma örnekleri
JavaScript Dersleri8 dk okuma

Constructor Functions ve new Keyword

Factory Function'ların hafıza israfı sorununa Constructor Function'lar ve new keyword'ü ile son verin! Metotları paylaştırarak JavaScript objelerini daha verimli nasıl oluşturacağınızı, new'in perde arkasında neler yaptığını ve prototype sisteminin gücünü bu rehberde keşfedin.

Yazıyı oku

Çerez tercihlerin

Platformun çalışması için zorunlu çerezler kullanıyoruz. İzin verirsen anonim kullanım verilerini ölçüyoruz. Ayrıntıları incele