Filter Array Pada Javascript Elemen Penyaringan

Filter Array Pada Javascript: Elemen Penyaringan

Pada artikel kali ini kita akan belajar mengenai cara menggunakan filter array pada Javascript, dimana filter array pada javascript digunakan untuk memfilter elemen yang terdapat didalam array dengan menggunakan fungsi atau method filter().

Apa yang Dilakukan Fungsi Filter Array Javascript?

Fungsi filter javascript digunakan untuk memfilter larik bedasarkan kriteria yang sudah ditentukan. Setelah melakukan filter, ia akan mengembalikan array dengan nilai yang melewati filter.

Fungsi filter tersebut mengulangi yang terdapat dalam larik dan mengembalikan nilai yang lurus. Keriteria pencarian dalam fungsi filter diteruskan dengan menggunakan file callbackfn.

Fungsi panah juga dapat digunakan untuk membuat kode array filter javascript lebih mudah untuk dibaca.

Baca Juga : Belajar Pemrograman Javascript Lengkap

Sintaks Filter Array Pada Javascript():

array.filter(function(value, index, arr), thisValue)

Disini, array larik asli yang ingin kalian filter.

Parameter Pada Filter Array Javascript:

1. function – merupakan suatu kriteria pencarian yang akan digunakan untuk memfilter nilai dalam suatu array

  • value – Diperlukan, suatu elemen yang diperlukan untuk dapat melakukan filter.
  • index – Opsional, jika kalian ingin memulai dari suatu index tertentu.
  • arr – merupakan suatu objek array yang dipanggil.
  • 2. thisValue – Opsional, nilai yang terdapat ini akan diteruskan jika parameternya kosong.

Impelementasi Metode Filter Array Pada Javascript

Salah satu tugas paling umum saat kita bekerja dengan array, yaitu membuat array baru yang berisikan subset elemen dari array yang asli. Misalnya teman-teman memiliki larik objek kota dimana setiap objek berisikan dua buah properti: name dan population. Untuk contoh kodenya seperti berikut:

let kota = [ {name: 'Los Angeles', population: 3792621}, {name: 'New York', population:8175133}, {name: 'Houston', population: 2099451}, {name: 'Chicago', population: 2695598}, {name: 'Philadelphia', population: 1526006} ]

Untuk dapat menemukan kota yang populasinya lebih dari 3 juta, kalian dapat menggunakan mengulangan element array dengan menggunakan metode loop for dan melakukan pengujian apakah nilai population properti memenuhi kondisi, seperti ini:

let Kota_Besar = []; for (let i = 0; i < kota.length; i++) { if (kota[i].population > 3000000) { Kota_Besar.push(kota[i]); } } console.log(Kota_Besar);

Maka hasil dari output script perulangan diatas adalah seperti berikut:

[ { name: 'Los Angeles', population: 3792621 }, { name: 'New York', population: 8175133 } ]

Pada javascript array menyediakan metode filter() yang merupakan metode yang memungkinkan kalian melakukan tugas tersebut dengan cara yang lebih singkat dan cepat.

Berikut ini merupakan contoh yang mengembalikan hasil yang sama seperti contoh script diatas:

let Kota_Besar = kota.filter(function (e) { return e.population > 3000000; }); console.log(Kota_Besar);

Dalam contoh tersebut, kita memanggil metode filter() dan objek aray kota dan selanjutnya meneruskan kedalam fungsi yang dapat menguji setiap elemen.

Didalam fungsi, kita melakukan pengecekan apakah population setiap kota dalam array lebih besar dari 3 juta atau tidak.

Jika kondisinya benar, maka fungsi akan dikembalikan menjadi true; jika tidak akan dikembalikan menjadi false. Pada metode filter() hanya mencangkup elemen dalam array hasil jika memenuhi unsur tes dalam fungsi.

Di ES6, bahkan lebih besar saat kalian menggunakan fungsi panah ( => ).

let Kota_Besar = kota.filter(kota => kota.population > 3000000); console.log(Kota_Besar);

Metode filter() Larik di Javascript

Metode larik filter() membuat larik baru bersama dengan elemen yang termasuk kedalam keriteria yang ditentukan dari larik yang ada, contoh penerapan scriptnya seperti berikut:

var numbers = [1, 3, 6, 8, 11];

var lucky = numbers.filter(function(number) {
  return number > 7;
});

// [ 8, 11 ]

Contoh dari script diatas mengambil suatu larik numbers dan mengembalikan larik yang sudah terfilter yang baru bersama nilai-nilai yang lebih besar dari tujuh saja.

Sitaks filter Larik Pada Javascript

var newArray = array.filter(function(item) {
  return condition;
});

Argumen Item merupakan suatu referensi kepada elemen saat ini di larik karena filter() sendiri memeriksa terdahap suatu condition. Ini sangat berguna untuk mengakses properti dalam hal objek.

Jika pada item saat ini menyalurkan syarat, ia akan dikirim kepada larik yang baru.

Selanjutnya kita akan belajar mengenai menyarik larik pada suatu objek, silahkan teman-teman perhatikan pembahasan berikut.

Menyaring Objek Pada Filter Array

Kasus penggunaan yang paling umum adalah penggunaan filter bersama dengan larik objek melalui propertinya:

var heroes = [
    {name: “Batman”, franchise: “DC”},
    {name: “Ironman”, franchise: “Marvel”},
    {name: “Thor”, franchise: “Marvel”},
    {name: “Superman”, franchise: “DC”}
];

var marvelHeroes =  heroes.filter(function(hero) {
    return hero.franchise == “Marvel”;
});

// [ {name: “Ironman”, franchise: “Marvel”}, {name: “Thor”, franchise: “Marvel”} ]

5 Parameter dalam Filter Array

  1. callbackFunction merupakan suatu fungsi yang digunakan untuk mengeksekusi setiap elemen array – required.
  2. element merupakan sesuatu yang sedang di eksekusi – required.
  3. Indeks merupakan nilai item saat ini – opsional.
  4. array ini adalah array yang sedang diproses.
  5. thisArg ini merupakan argumen yang diteruskan untuk digunakan sebagai sebagai nilai this dalam panggilan balik – opsional.

Mengembalikan Array yang Baru

Array baru dikembalikan dan ini tentunya tidak mengubah nilai array lama.

// create an array
const names = ['John', 'Peter', 'James', 'Pammy'];

// Filter the array for names having 'am'
const myName = names.filter(name => name.includes('am'));

// Output new array
console.log(myName)

Silahkan lanjutkan ke:

Kesimpulan

Nah itulah pembahasan mengenenai array filter yang sudah kita pelajari mulai dari pengenalan sintaks sampai dengan mengembalikan array yang baru, Mungkin sekian yang dapat admin sampaikan semoga artikel ini dapat membantu teman-teman dalam memahami array filter pada javascript, semoga bermanfaat.

Salam Success – by: Muhammad Rizal Supriadi

Leave a Comment

Your email address will not be published. Required fields are marked *