Find() vs Filter() in JavaScript

JavaScript

In this tutorial we will discuss about find() vs filter() in JavaScript. In previous article we have discussed about object.seal() vs Object.freeze() in JavaScript.

This is the most common interview question i.e. what is the difference between find() and filter() in JavaScript.

The main difference between find() and filter() is, find() returns single element which satisfies the condition in the given array otherwise it returns undefined while filter() returns all elements which satisfies the condition in the given array otherwise it returns blank array [ ].

Basically both methods are used to find the elements from an array. Firstly we will discuss about find() in JavaScript.

Find() in JavaScript

The find() method returns the first item from the given array that satisfies the given condition.
Like as below example.

let arr = [12, 5, 10, 8, 14, 2]
let findItem = arr.find(item => item < 8 )
console.log(findItem) // Output - 5

let arr = [12, 5, 10, 8, 14, 2]
let findItem = arr.find(item => item < 2 )
console.log(findItem) // Output - undefined

In this example we have to find the number which is less than 8 in the given array. It gives the first element which satisfies the condition otherwise it returns undefined, after satisfies the condition it doesn’t continue find the element in the given array. We can see in another example like as below example.

let arr = [12, 5, 10, 8, 14, 2]
let findItem = arr.find((item, index, arr) => { 
  console.log('Item is', item)
  console.log('Index is', index)
  console.log('Array is', arr)
  return item < 8 
})
console.log(findItem)

Output:
Item is 12
Index is 0
Array is [ 12, 5, 10, 8, 14, 2 ]
Item is 5
Index is 1
Array is [ 12, 5, 10, 8, 14, 2 ]
5

So in the above example you have seen find() method doesn’t continue after satisfies the condition.

Suppose we have to find some item from the array of object then how to use find() in JavaScript. We can use find() in array of object like as below example.

let arr = [
  {name: 'David', salary: 12000},
  {name: 'Shyam', salary: 5000},
  {name: 'David', salary: 25000}
]
let findName = arr.find(item => { 
  return item.name === 'David' 
})
console.log(findName) // Output - { name: 'David', salary: 12000 }

In the above example you have seen find() method returns only one object because find() method doesn’t continue after satisfies the condition. So it returns only single item.

Filter() in JavaScript

The filter() method returns the new array of all items from the given array that satisfies the given condition.
Like as below example.

let arr = [12, 5, 10, 8, 14, 2]
let findItem = arr.filter(item => item < 8 )
console.log(findItem) // Output - [ 5, 2 ]

let arr = [12, 5, 10, 8, 14, 2]
let findItem = arr.filter(item => item < 2 )
console.log(findItem) // Output - []

In this example we have to find the numbers which is less than 8 in the given array. It gives the all element which satisfies the condition otherwise it returns blank array [ ], after satisfies the condition it continue find the element in the given array. We can see in another example like as below example.

let arr = [12, 5, 10, 8, 14, 2]
let findItem = arr.filter((item, index, arr) => { 
  console.log('Item is', item)
  console.log('Index is', index)
  console.log('Array is', arr)
  return item < 8 
})
console.log(findItem)

Output:

Item is 12
Index is 0
Array is [ 12, 5, 10, 8, 14, 2 ]
Item is 5
Index is 1
Array is [ 12, 5, 10, 8, 14, 2 ]
Item is 10
Index is 2
Array is [ 12, 5, 10, 8, 14, 2 ]
Item is 8
Index is 3
Array is [ 12, 5, 10, 8, 14, 2 ]
Item is 14
Index is 4
Array is [ 12, 5, 10, 8, 14, 2 ]
Item is 2
Index is 5
Array is [ 12, 5, 10, 8, 14, 2 ]
[ 5, 2 ]

So in the above example you have seen filter() method continue after satisfies the condition.

Now we will see how to use filter() method in array of objects using below example.

let arr = [
  {name: 'David', salary: 12000},
  {name: 'Shyam', salary: 5000},
  {name: 'David', salary: 25000}
]
let findName = arr.filter(item => { 
  return item.name === 'David' 
})
console.log(findName) 

// Output - [ { name: 'David', salary: 12000 }, { name: 'David', salary: 25000 } ]

In the above example you have seen filter() method returns two objects because filter() method returns all elements which satisfies the condition.

Conclusion

So in this article we have explained find() vs filter() in JavaScript. Using this article anyone one can easily understand find() vs filter() in JavaScript. If you want to improve or you find anything wrong/incorrect in this article then please leave a message using below comment box.

Leave a Reply

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

1 × five =