JavaScript Simplified · One concept, one day, one project · Day 24 of 32

Array Methods: filter() and find()

Picking out the items you want from a list: many with filter, one with find. You build a product search that narrows a catalogue.

By the end of today you can

Keep only matching items with filter
Get the first matching item with find
Choose between filter and find for a real need
Build a product search

Yesterday map changed every item. Today you select. filter keeps the items that pass a test (a list). find returns the first item that passes (a single thing). Together with map, these three cover most of the data work in a real app.

1. filter: keep the matches

Definition

filter goes through an array and keeps only the items for which your function returns true. It returns a new array of those matches. Your function answers "should I keep this one?"

What this code doesfilter keeps each number for which n > 10 is true. The result is a new, shorter array; the original is unchanged.

app.js

const numbers = [4, 11, 2, 19, 7, 25];

// keep only the numbers above 10
const big = numbers.filter((n) => n > 10);
console.log(big);

OUTPUT   TERMINAL

➜ webbo3 node app.js
[ 11, 19, 25 ]

2. find: the first match

Definition

find also tests each item, but it returns the first item that passes, not a list. Use it when you want one specific thing. If nothing matches, it returns undefined.

What this code doesfind returns the whole first matching object, Ada. This is an array of objects, the shape from Week 3, which is exactly how real data arrives.

app.js

const users = [
  { name: "Ada", role: "admin" },
  { name: "Bayo", role: "member" },
  { name: "Chi", role: "admin" }
];

// the first admin
const firstAdmin = users.find((user) => user.role === "admin");
console.log(firstAdmin);

OUTPUT   TERMINAL

➜ webbo3 node app.js
{ name: 'Ada', role: 'admin' }

Method	Returns	Use when
`map`	a new array, same length	changing every item
`filter`	a new array, matches only	keeping some items
`find`	one item (or undefined)	getting the first match

Today’s Mini Project

🔎 Product Search

A catalogue of products as an array of objects. Filter it by category and by price, and find a single product by name. This is a real search, in a few lines.

What this code doesfilter narrows the catalogue by category and by price; map pulls out just the names to show; find grabs one product. Three methods working together on real-shaped data.

app.js

const products = [
  { name: "Mouse", category: "tech", price: 7500 },
  { name: "Rice 5kg", category: "food", price: 6500 },
  { name: "Keyboard", category: "tech", price: 15000 },
  { name: "Beans 2kg", category: "food", price: 3500 }
];

// all tech products
const tech = products.filter((p) => p.category === "tech");
console.log(tech.map((p) => p.name));

// affordable products (under 8000)
const affordable = products.filter((p) => p.price < 8000);
console.log(affordable.map((p) => p.name));

// find one product by name
const found = products.find((p) => p.name === "Keyboard");
console.log("Found: " + found.name + " at N" + found.price);

OUTPUT   TERMINAL

➜ webbo3 node app.js
[ 'Mouse', 'Keyboard' ]
[ 'Mouse', 'Rice 5kg', 'Beans 2kg' ]
Found: Keyboard at N15000

Challenge (15 minutes)

Add a filter for tech products under 10000 (combine two conditions with &&). Expected: only the Mouse, since the Keyboard is too expensive.

Try This

From the products, use find to get the first food item, and print its price.

Expected: "Rice 5kg" at 6500, the first product whose category is food.

Picture This

You have finished the modern layer. map, filter and find turn a pile of data into exactly what you want to show: transformed, narrowed, or a single pick. This is the daily work of every app that lists anything. Next week your data starts coming from the internet.

Checkpoint

What is the difference between filter and find?

filter returns a new array of all items that pass the test. find returns only the first item that passes (or undefined if none do).

What does your function return to filter or find?

True or false: "does this item match?" filter keeps every true; find stops at the first true and returns that item.

How do map, filter and find work together?

filter narrows a list, map reshapes items (like pulling out names), and find grabs one specific item. Together they cover most data work.

Tick Before You Move On

☐ I can keep matching items with filter
☐ I can get the first match with find
☐ I can choose between filter and find
☐ I built the Product Search

Quick Recap

filter returns a new array of the items that pass your test. find returns the first item that passes, or undefined. Your function answers true or false for each item. map, filter and find together cover most everyday data work.

Next: Day 25, and the layer that scares beginners for no reason: asynchronous JavaScript. You start gently, with what "async" even means.

Array Methods: filter() and find()

1. filter: keep the matches

Definition

2. find: the first match

Definition

Today’s Mini Project

Checkpoint

Learn this with a real instructor