Sebelum kita memulai penjelasan tentang Perbedaan Method Filter dan Find pada Javascript, alangkah baiknya teman-teman membaca artikel sebelumnya. Saya telah membuat tutorial tentang Cara Menggunakan Method Filter pada Javascript dan Cara Menggunakan Method Find pada Javascript. Pada tutorial kali ini saya akan menejelaskan tentang Perbedaan Method Filter dan Find pada Javascript.

Nah, untuk memperjelas Perbedaan Method Filter dan Find pada Javascript kita pada akan menggunakan kasus yang sama namun metodenya berbeda dimana terdapat array yang berisi umur dan kita akan memfilter umurnya sehingga umur yang tampil adalah umur yang memenuhi kondisi. Berikut adalah langkah-langkah membuat filter umur dengan metode filter dan find:

1. Pertama

teman-teman buat dulu file index.html dalam folder project yang dimana kita akan menyisipkan kode javascript kedalamnya berikut dalah kode htmlnya:

/**
<!DOCTYPE html>
<html>
<head>
	<title>Filter dan Find | JS</title>
</head>
<body>

<h1>Filter Umur</h1>

<p>Method filter()</p>

<p id="demo1"></p>

<p>Method find()</p>

<p id="demo2"></p>

<button onclick="myFunction()">Filter</button>


</body>
</html>
 */

Coba teman-teman buka file index.htmlnya di browser lalau klik tombol filter, maka tidak kan terjadi apa-apa, karena kita belum menyisipkan kode javascriptnya

Perbedaan Method Filter dan Find pada Javascript

2. Kedua

kita akan memfilter umurnya dengan menggunakan metode filter() dan find(), berikut kodenya:

/**<br /><script>
//array umur
var umur = [20, 30, 40, 45];

//fungsi cekumur
function cekumur(age) {
    return age >= 22;
}

//menampilkan hasil
function myFunction() {
    document.getElementById("demo1").innerHTML = umur.filter(cekumur);
    document.getElementById("demo2").innerHTML = umur.find(cekumur);
}<br /></script>
 */

Untuk penjelasan kode di atas saya sudah beri commenting pada baris kodenya. Coba teman-teman refresh file index.html yang telah kita buka tadi, lalu klik tombol filter makan akan tampil umur yang memenuhi kondisi.

Perbedaan Method Filter dan Find pada Javascript

Berdasarka kasus dia atas, kesimpulannya adalah metode filter() akan terus menampilkan nilai yang memenuhi kondisi sedangkan metode find() akan berhenti menampilkan pada saat dia mendapatkan nilai yang sesuai kondisi.

Sekian pembahasan kali ini tentang Perbedaan Method Filter dan Find pada Javascript. Semoga bermanfaat bagi teman-teman dan sampai jumpa lagi dalam tutorial berikutnya.