Array .filter() / find() / findIndex()
| Since: | ES5(ECMAScript 2009) |
|---|
Methods for extracting or searching elements in an array that match a condition. filter() returns all matching elements, while find() returns only the first one.
Syntax
// Extracts all elements that match the condition.
var result = array.filter(function(element, index, array) {
return condition;
});
// Returns the first element that matches the condition.
var item = array.find(function(element, index, array) {
return condition;
});
// Returns the index of the first element that matches the condition.
var index = array.findIndex(function(element, index, array) {
return condition;
});
Method List
| Method | Description |
|---|---|
| filter(function) | Returns a new array containing all elements that match the condition. Returns an empty array if no elements match. |
| find(function) | Returns the first element that matches the condition. Returns undefined if no match is found. |
| findIndex(function) | Returns the index of the first element that matches the condition. Returns -1 if no match is found. |
Sample Code
sample_filter.js
var scores = [45, 82, 70, 95, 60, 38];
// Extracts all scores of 70 or above.
var passed = scores.filter(function(score) {
return score >= 70;
});
console.log(passed); // Outputs '82,70,95'.
// Returns the first score of 80 or above.
var first = scores.find(function(score) {
return score >= 80;
});
console.log(first); // Outputs '82'.
// Returns the index of the first score of 80 or above.
var index = scores.findIndex(function(score) {
return score >= 80;
});
console.log(index); // Outputs '1'.
// Searches an array of objects.
var users = [
{ name: "Okabe Rintaro", age: 18, org: "Future Gadget Lab" },
{ name: "Makise Kurisu", age: 18, org: "Future Gadget Lab" },
{ name: "Shiina Mayuri", age: 16, org: "Future Gadget Lab" }
];
var user = users.find(function(u) {
return u.name === "Makise Kurisu";
});
console.log(user.age); // Outputs '18'.
[ 82, 70, 95 ] 82 1 18
Overview
array.filter() runs a callback function on each element of the array and creates a new array containing only the elements for which the callback returns true. The original array is not modified. If no elements match the condition, an empty array is returned, so you can safely loop over the result without additional checks.
array.find() returns only the first element that matches the condition, making it useful for looking up a specific item in an array of objects. If no match is found, it returns undefined, so always check the result before using it when the element may not exist. array.findIndex() works the same way but returns the index of the element rather than the element itself.
If you only need to check whether a value exists in an array, use array.includes(). To check whether all or some elements satisfy a condition, use array.some() / array.every().
Browser Compatibility
1 or earlier ×
2 or earlier ×
8 or earlier ×
9 or earlier ×
Android Browser
37+ ○
4 or earlier ×
Chrome Android
36+ ○
17 or earlier ×
Firefox Android
79+ ○
3 or earlier ×If you find any errors or copyright issues, please contact us.