Selecting Data: filter, find, some, every

Keep only the items you want with filter, grab the first match with find, and ask yes/no questions about a list with some and every.

Step 1 of 3

filter keeps many; find grabs one

Where map transforms items, these methods select them. You give each a test function that returns true or false:

filter returns a new array of every item that passes the test. Great for search results, or removing an item.
find returns the first single item that passes (or undefined if none do). Great for looking something up by id.

These are everyday React tools. Deleting a todo immutably is todos.filter((t) => t.id !== id) — keep everything except the one to remove. Opening a product page is products.find((p) => p.id === id).

Think of it this way: filter is a coffee filter: the things that pass through (the liquid) are your result; the rest is left behind. find is reaching into a drawer for the first sock that matches — you stop as soon as you find it.

Web Standard

filter always returns an array (possibly empty). find returns a single item or undefined. Mixing them up is common — if you filter when you meant find, you'll get a one-item array instead of the item.

Learn more on MDN

MDN — Array.prototype.filter()MDN — Array.prototype.find()

JAVASCRIPTREAD ONLY

CONSOLE

Click "Run" to execute your code...