QJavaScript · Interview preparation
How are find and filter different?
find returns the first matching element or undefined, while filter returns an array containing every matching element.
The idea to remember.
find returns the first matching element or undefined, while filter returns an array containing every matching element. Use find when only one result is needed, instead of scanning and storing all matches.
01Learn by doing
From first example to real project.
Start with the smallest working idea, examine a more detailed example, then look at a real application pattern. Adapt dependencies, error handling and data models to your project.
Basic: transform a list
01 / BEGINNERMap builds a new array without changing the original.
const prices = [5, 10, 15];
const discounted = prices.map(price => price * 0.9);Intermediate: group with reduce
02 / INTERMEDIATEReduce can create a lookup keyed by a stable ID.
const usersById = users.reduce((map, user) => {
map[user.id] = user;
return map;
}, {});Real scenario: efficient list filtering
03 / REAL SCENARIODerive results without mutating your source collection.
function visibleProducts(products, query, category) {
const term = query.trim().toLowerCase();
return products.filter(item =>
(!category || item.category === category) &&
item.name.toLowerCase().includes(term)
);
}02Check your understanding
Try it in your own words.
Explain how are find and filter different without looking at the code. Then modify the intermediate example, describe one trade-off and identify when the real-world pattern fits.
Keep learning here.
Explore more in-depth guides, exercises and related interview questions in this library.
Browse JavaScript study guides ↗