[JS] Filter Data Array di Javascript

Filter Array Data In Javascript Thumbnail

Di JavaScript, Anda dapat menyaring array objek menggunakan metode filter(). Metode ini memungkinkan Anda membuat array baru yang hanya berisi elemen-elemen yang lolos uji tertentu. Mari saya berikan beberapa contoh:

1. Menyaring Bilangan Genap: Misalkan Anda memiliki array bilangan seperti ini:

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

Anda ingin membuat array baru yang hanya berisi bilangan genap. Anda dapat melakukannya dengan menggunakan metode filter():

const bilanganGenap = nums.filter(function isGenap(num) {  
  return num % 2 === 0;
});

// Hasil: [2, 4, 6, 8, 10]

2. Menyaring Objek Berdasarkan Properti: Misalkan Anda memiliki array objek karakter, masing-masing dengan properti name dan team:

const characters = [
  { name: 'Batman', team: 'Justice League' },
  { name: 'Hulk', team: 'Avengers' },
  { name: 'Flash', team: 'Justice League' },
  { name: 'Iron Man', team: 'Avengers' },
  { name: 'Deadpool', team: 'X-Force' }
];

Anda ingin menemukan semua karakter yang properti team-nya adalah ‘Avengers’. Berikut cara melakukannya menggunakan metode filter() dengan arrow function:

// Arrow function to filter characters by team
const filterByTeam = (team) => characters.filter(character => character.team === team);

// Example usage: Print all Justice League characters
console.log(filterByTeam("Justice League"));

// Hasil: [ { name: 'Batman', team: 'Justice League' }, { name: 'Flash', team: 'Justice League' } ]

3. Contoh Lebih Kompleks: Misalkan Anda memiliki daftar karakter Star Trek, dan Anda ingin mendapatkan hanya yang muncul di “Star Trek: The Next Generation”. Berikut cara menyaring array karakter berdasarkan properti series:

const starTrekCharacters = [
  { name: 'James T. Kirk', series: ['Star Trek'] },
  { name: 'Spock', series: ['Star Trek', 'Star Trek: The Next Generation'] },
  { name: 'Jean-Luc Picard', series: ['Star Trek: The Next Generation'] },
  { name: 'Worf', series: ['Star Trek: The Next Generation', 'Star Trek: Deep Space Nine'] }
];

const karakterTNG = starTrekCharacters.filter(character => {
  return character.series.includes('Star Trek: The Next Generation');
});
// Hasil: [{ name: 'Spock', series: ['Star Trek', 'Star Trek: The Next Generation'] }, { name: 'Jean-Luc Picard', series: ['Star Trek: The Next Generation'] }]

Ingat, metode filter() membuat array baru yang hanya berisi elemen-elemen yang memenuhi kondisi yang ditentukan. Silakan bereksperimen dengan kriteria penyaringan yang sesuai dengan kebutuhan Anda!

Apakah tutorial ini bermanfaat? Jika ya, pertimbangkan untuk memberi respon di kolom komentar. Terima Kasih! 😊🙏