Difference between Find() and Filter() in JavaScript

The find() and filter() methods are both higher-order array methods in JavaScript that are used to search and manipulate arrays. However, they have different use cases and return values.

What is Find()?

The find() method is used to find the first element in an array that satisfies a given condition. It takes a callback function as an argument, which is applied to each element in the array until the first element that satisfies the condition is found. If no such element is found in the array, the find() method then returns that element, or undefined.

Example in usage of find():

const numbers = [1, 2, 3, 4, 5];

const evenNumber = numbers.find((number) => {
return number % 2 === 0;
});

console.log(evenNumber);

Output

In the above example, the find() method is used to find the first even number in the numbers array.

What is Filter()?

The filter() method is used to create a new array with all elements that satisfy a given condition. It also takes a callback function as an argument, which is applied to each element in the array. If the callback function returns true for an element, that element is included in the new array. If it returns false, the element is excluded.

Example usage of filter():

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter((number) => {
return number % 2 === 0;
});

console.log(evenNumbers); 

Output

[ 2, 4 ]

In the above example, the filter() method is used to create a new array containing only the even numbers from the numbers array.

Key differences between the find() and filter() methods

There are various key differences between the find() and filter() methods. Some of the main differences are as follows:

Return value:

The find() method returns the first element in the array that satisfies the provided testing function, while the filter() method returns a new array containing all elements that satisfy the provided testing function.

Execution:

The find() method executes the callback function once for each element in the array until it finds a match, whereas the filter() method executes the callback function for every element in the array, creating a new array with all elements for which the callback function returns true.

Output:

The find() method returns a single element, whereas the filter() method returns an array of elements (which could be empty if no elements satisfy the testing function).

Use case:

The find() method is useful when you want to find a single element in an array that satisfies a specific condition, while the filter() method is useful when you want to create a new array containing all elements in an array that satisfy a specific condition.

Here are some additional examples that demonstrate these differences:

Example 1:

const numbers = [1, 2, 3, 4, 5];

// Using find() to find the first even number in the array
const firstEvenNumber = numbers.find(num =>num % 2 === 0);

console.log(firstEvenNumber); 

Output

In the first example, the find() method is used to find the first even number in the numbers array. Since there is only one even number in the array, the find() method returns the number 2.

Example 2:

// Using filter() to create a new array of all even numbers in the array
const evenNumbers = numbers.filter(num =>num % 2 === 0);

console.log(evenNumbers); 

Output

[2, 4]

In the second example, the filter() method is used to create a new array containing all even numbers in the numbers array. The resulting array is [2, 4].

Example 3:

// Using find() to find the first number greater than 5 in the array
const firstNumberGreaterThanFive = numbers.find(num =>num> 5);

console.log(firstNumberGreaterThanFive); 

Output

Undefined

In the third example, the find() method is used to find the first number in the numbers array that is greater than 5. Since there are no numbers in the array greater than 5, the find() method returns undefined.

Example 4:

// Using filter() to create a new array of all numbers greater than 3 in the array
constnumbersGreaterThanThree = numbers.filter(num =>num> 3);

console.log(numbersGreaterThanThree); // Output: [4, 5]

Output

[4, 5]

In the fourth example, the filter() method is used to create a new array containing all numbers in the numbers array that are greater than 3. The resulting array is [4, 5].

Conclusion

In summary, the find() method is used to find the first element that satisfies a given condition, while the filter() method is used to create a new array containing all elements that satisfy a given condition.

Next TopicDifference between

← prev next →