Summary of the Differences between find() and filter() Methods in JavaScript

Preface

JavaScript has many array methods in ES6, each with unique uses and benefits.

While developing applications, you mostly use array methods to get a specific list of values ​​and get single or multiple matching items.

Before listing the differences between these two methods, let’s understand these methods one by one.

JavaScript find() Method

The ES6 find() method returns the value of the first element that passes a test function. If no value satisfies the test function, undefined is returned.

grammar

Arrow functions used in the following syntax.

find((element) => { /* ... */ } )
find((element, index) => { /* ... */ } )
find((element, index, array) => { /* ... */ } )

We have a list of user objects with properties name age and id as shown below:

let users = [{
    id:1,
    name: 'John',
    age: 22
}, {
    id:2,
    name: 'Tom',
    age: 22
}, {
    id:3,
    name: 'Balaji',
    age: 24
}];

The following code uses the find() method to find the first user whose age is greater than 23.

console.log(users.find(user => user.age > 23));
//console
//{ id: 3, name: 'Balaji', age: 24}

Now we want to find the first user whose age is 22

console.log(users.find(user => user.age === 22));
//console
//{ id: 1, name: 'John', age: 22}

Assuming no match is found means it returns undefined

console.log(users.find(user => user.age === 25));
//console
//undefined

JavaScript filter() Method

The filter() method creates a new array containing all elements that pass a test function. If no elements satisfy the test function, an empty array is returned.

grammar

filter((element) => { /* ... */ } )
filter((element, index) => { /* ... */ } )
filter((element, index, array) => { /* ... */ } )

We will use the same users array and test function as the filter example.

The following code uses the filter() method to find the first user whose age is greater than 23.

console.log(users.filter(user => user.age > 23));
//console
Now we want to filter users whose age is 22 years old //[{ id: 3, name: 'Balaji', age:24}]

Now we want to filter users who are 22 years old

console.log(users.filter(user => user.age === 22));
//console
//[{ id: 1, name: 'John', age:22},{ id: 2, name: 'Tom', age:22}]

Assuming no matches are found means it returns an empty array

console.log(users.filter(user => user.age === 25));
//console
//[]

Differences and similarities between find() and filter()

Common Points

Higher-Order Functions: Both of these functions are higher-order functions.

the difference

1. Pass a test function

find() returns the first element.

filter() returns a new array containing all elements that pass the test function.

2. If no value satisfies the test function

find() returns undefined;

filter() returns an empty array;

Directly on the code

let arr = [
  {
    name: 'Rick',
    age: 60
  },

  {
    name: 'Rick',
    age: 70
  },

  {
    name: 'Morty',
    age: 14
  }

]

let findResult = arr.find(i => i.name === 'Rick')
let filterResult = arr.filter(i => i.name === 'Rick')

console.log(arr); 
/* Output result[
    {
      name: "Rick",
      age: 60
    },

    {
      name: "Rick",
      age: 70
    },

    {
      name: "Morty",
      age: 14
    }
  ]

*/

console.log(findResult); // {name: "Rick", age: 60}
console.log(filterResult); // [{name: "Rick", age: 60}, {name: "Rick", age: 70}]

According to the output of the above code, we can find that neither find nor filter changes the original array.

Summarize

This concludes this article about the differences between find() and filter() methods in JavaScript. For more information about the differences between js find() and filter() methods, please search 123WORDPRESS.COM’s previous articles or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!