CodeBlanks Logo Icon CodeBlanks

filter ile süzme

JavaScript kursu · Başlangıç · Ders 66/133

filter ile koşulu sağlayan elemanları seçerek yeni dizi oluşturmayı öğrenirsin.

filter ile süzme

filter metodu, bir koşul işleviyle diziyi gezer ve koşulun true döndüğü elemanlardan yeni bir dizi oluşturur. Koşulu sağlamayanlar atılır.

Sonuç her zaman bir dizidir; ancak eleman sayısı orijinalden az olabilir, hatta sıfır olabilir. Orijinal dizi yine değişmez. Bir mağazada yalnızca stokta olan ürünleri listelemek istersen filter işine yarar.

filter boş dizi dönebilir

Hiçbir eleman koşulu sağlamazsa filter boş bir dizi döndürür; hata fırlatmaz. Bu sessiz davranış bazen şaşırtıcıdır.

Örneğin yaşları 100'den büyük olanları süzersen ve kimse yoksa [] alırsın. Bu yüzden sonucun uzunluğunu kontrol etmek, arayüzde 'kayıt yok' mesajı göstermek için işine yarar. Boş dizi yine de geçerli bir dizidir.

Uygulama Geçen notları süz

scores dizisinden 50 ve üzeri olanları seçip passing dizisine koy. Sonucu konsola yazdır.

Örnek çözümü göster
const scores = [35, 72, 50, 48, 90];
// 50 ve üzeri olanları süz
const passing = scores.filter(score => score >= 50);
console.log(passing);

Uygulama Uzun isimleri süz

names dizisinden uzunluğu 5 ve üzeri olan isimleri seçip longNames dizisine koy. Sonucu konsola yazdır.

Örnek çözümü göster
const names = ["Ed", "Zeynep", "Ali", "Memet"];
// uzunluğu 5 ve üzeri olanları süz
const longNames = names.filter(name => name.length >= 5);
console.log(longNames);

Kendini test et

  1. const evens = [1,2,3,4].filter(n => n % 2 === 0); sonucu ne olur?

    const evens = [1, 2, 3, 4].filter(n => n % 2 === 0);
    • [1, 3]
    • 2
    • [2, 4]
    • true
    Cevabı göster

    [2, 4] — Doğru. filter koşulu sağlayan 2 ve 4'ü alıp [2, 4] dizisini döndürür.

  2. yalnızca pozitif sayıları seç

    const nums = [-3, 5, -1, 8];
    const positives = nums.filter(n => ____);
    console.log(positives);
    Cevabı göster
    const nums = [-3, 5, -1, 8];
    const positives = nums.filter(n => n > 0);
    console.log(positives);
  3. Yöntemi amacıyla eşleştir

    map
    her elemanı dönüştürür
    filter
    koşulu sağlayanları seçer
    forEach
    her elemanı gezer
    includes
    eleman var mı diye bakar

Başlangıç bölümündeki tüm dersler