Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 2 · 9 / 12filter and find
Phase 2JavaScript core
12 topics · 4–6 wks
  1. 1Values and variables
  2. 2Strings and numbers
  3. 3Making decisions with if
  4. 4Loops
  5. 5Functions in, values out
  6. 6Arrays
  7. 7Objects
  8. 8Arrays and map
  9. 9filter and find
  10. 10reduceoptional
  11. 11Scope
  12. 12Reading error messages
JourneyPhase 2filter and find
01 / 09Overview

filter and find

You'll learn to keep some items of a list with filter, and to get one item with find.

Why it mattersSearch boxes, "only unread messages", "the user with this id": apps pick items out of lists all the time.
about 75 min·needs: Arrays, Objects, Arrays and map
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Article
Array methods: find and filterjavascript.info · 10 min · English
MMamun's noteRead "find and findIndex" and then "filter", which comes right after. Skip findLastIndex. Stop at "map", which you already know.
Video
8 must know JavaScript array methodsYouTube · Web Dev Simplified · 3 min · English
MMamun's noteWatch 0:20–1:58 for filter and 2:54–3:42 for find. The other methods are for later.
VideoOptional
Modern JavaScript in Bangla #7: array filter()YouTube · Learn with Sumit · 3 min · Bangla
MMamun's noteIn Bangla, under three minutes. A quick second look at filter.
DocsOptional
Array.prototype.find()MDN Web Docs · reference · English
MMamun's noteKeep it as a reference. The first example at the top is all you need now.
03 / 09

Explanation

You have a class list and you want only the students who passed. Or you want the one student called Nusrat. Both jobs mean looking at each item and asking a yes or no question.

Like map, both take a function, the callback. Here the callback answers a question with true or false for each item: "did this student pass?"

const passed = students.filter(s => s.marks >= 33);
const nusrat = students.find(s => s.name === "Nusrat");

filter always gives back a new array with every item where the callback said true. It can hold many items, one item, or none. When nothing matches, you get an empty array, [].

find gives back one item: the first one where the callback said true, and then it stops looking. It does not wrap the item in an array. When nothing matches, you get undefined.

People often use filter when they want one thing, and then write result.name. But result is an array, so result.name is undefined. If you want one item, use find. If you want a list, use filter.

The other common slip is forgetting that find can give undefined. Before you read nusrat.name, make sure nusrat was found.

When you read these calls, look at the callback and ask: for which items is this true? Then ask: do I get a list, or one item?

Words to recognise
filterfindcallbacktrue / false[]undefined=>
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

script.js5 notes
const students = [
Mentor note · line 1
An array of objects, like most real app data.
2 { name: "Rafi", marks: 72 },
3 { name: "Nusrat", marks: 88 },
4 { name: "Tanvir", marks: 25 },
5];
6
const passed = students.filter(s => s.marks >= 33);
// [{ name: "Rafi", ... }, { name: "Nusrat", ... }]
9
const topper = students.find(s => s.marks >= 80);
11// { name: "Nusrat", marks: 88 }
12
const sadia = students.find(s => s.name === "Sadia");
14// undefined
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1const prices = [120, 450, 80, 600];
2console.log(prices.filter(p => p > 300));
3console.log(prices.find(p => p > 300));
What does this print?
DrillFind the bug2 / 2
findStudent should give back one student object, or undefined if nobody has that name. passedStudents should give back an array of everyone with 33 or more. The two functions use the wrong method. Fix them so all four checks pass.
1
2
3
4
5
6
7
Try 1 of 3 · solution unlocks after 3
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3What is [20, 35, 50].filter(n => n > 100)?
  2. 2 / 3What is [20, 35, 50].find(n => n > 30)?
  3. 3 / 3find finds nothing. What do you get?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with filter and find?

09 / 09

Done

You can now
Read a filter or find call and say exactly what it gives back, including when nothing matches.
Next: reduce Back to Phase 2
On this page
  1. 01filter and find
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 2JavaScript core
12 topics · 4–6 wks
  1. 1Values and variables
  2. 2Strings and numbers
  3. 3Making decisions with if
  4. 4Loops
  5. 5Functions in, values out
  6. 6Arrays
  7. 7Objects
  8. 8Arrays and map
  9. 9filter and find
  10. 10reduceoptional
  11. 11Scope
  12. 12Reading error messages
JourneyPhase 2filter and find
01 / 09Overview

filter and find

You'll learn to keep some items of a list with filter, and to get one item with find.

Why it mattersSearch boxes, "only unread messages", "the user with this id": apps pick items out of lists all the time.
about 75 min·needs: Arrays, Objects, Arrays and map
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Article
Array methods: find and filterjavascript.info · 10 min · English
MMamun's noteRead "find and findIndex" and then "filter", which comes right after. Skip findLastIndex. Stop at "map", which you already know.
Video
8 must know JavaScript array methodsYouTube · Web Dev Simplified · 3 min · English
MMamun's noteWatch 0:20–1:58 for filter and 2:54–3:42 for find. The other methods are for later.
VideoOptional
Modern JavaScript in Bangla #7: array filter()YouTube · Learn with Sumit · 3 min · Bangla
MMamun's noteIn Bangla, under three minutes. A quick second look at filter.
DocsOptional
Array.prototype.find()MDN Web Docs · reference · English
MMamun's noteKeep it as a reference. The first example at the top is all you need now.
03 / 09

Explanation

You have a class list and you want only the students who passed. Or you want the one student called Nusrat. Both jobs mean looking at each item and asking a yes or no question.

Like map, both take a function, the callback. Here the callback answers a question with true or false for each item: "did this student pass?"

const passed = students.filter(s => s.marks >= 33);
const nusrat = students.find(s => s.name === "Nusrat");

filter always gives back a new array with every item where the callback said true. It can hold many items, one item, or none. When nothing matches, you get an empty array, [].

find gives back one item: the first one where the callback said true, and then it stops looking. It does not wrap the item in an array. When nothing matches, you get undefined.

People often use filter when they want one thing, and then write result.name. But result is an array, so result.name is undefined. If you want one item, use find. If you want a list, use filter.

The other common slip is forgetting that find can give undefined. Before you read nusrat.name, make sure nusrat was found.

When you read these calls, look at the callback and ask: for which items is this true? Then ask: do I get a list, or one item?

Words to recognise
filterfindcallbacktrue / false[]undefined=>
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

script.js5 notes
const students = [
Mentor note · line 1
An array of objects, like most real app data.
2 { name: "Rafi", marks: 72 },
3 { name: "Nusrat", marks: 88 },
4 { name: "Tanvir", marks: 25 },
5];
6
const passed = students.filter(s => s.marks >= 33);
// [{ name: "Rafi", ... }, { name: "Nusrat", ... }]
9
const topper = students.find(s => s.marks >= 80);
11// { name: "Nusrat", marks: 88 }
12
const sadia = students.find(s => s.name === "Sadia");
14// undefined
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1const prices = [120, 450, 80, 600];
2console.log(prices.filter(p => p > 300));
3console.log(prices.find(p => p > 300));
What does this print?
DrillFind the bug2 / 2
findStudent should give back one student object, or undefined if nobody has that name. passedStudents should give back an array of everyone with 33 or more. The two functions use the wrong method. Fix them so all four checks pass.
1
2
3
4
5
6
7
Try 1 of 3 · solution unlocks after 3
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3What is [20, 35, 50].filter(n => n > 100)?
  2. 2 / 3What is [20, 35, 50].find(n => n > 30)?
  3. 3 / 3find finds nothing. What do you get?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with filter and find?

09 / 09

Done

You can now
Read a filter or find call and say exactly what it gives back, including when nothing matches.
Next: reduce Back to Phase 2
On this page
  1. 01filter and find
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read

You have a class list and you want only the students who passed. Or you want the one student called Nusrat. Both jobs mean looking at each item and asking a yes or no question.

Like map, both take a function, the callback. Here the callback answers a question with true or false for each item: "did this student pass?"

const passed = students.filter(s => s.marks >= 33);
const nusrat = students.find(s => s.name === "Nusrat");

filter always gives back a new array with every item where the callback said true. It can hold many items, one item, or none. When nothing matches, you get an empty array, [].

find gives back one item: the first one where the callback said true, and then it stops looking. It does not wrap the item in an array. When nothing matches, you get undefined.

People often use filter when they want one thing, and then write result.name. But result is an array, so result.name is undefined. If you want one item, use find. If you want a list, use filter.

The other common slip is forgetting that find can give undefined. Before you read nusrat.name, make sure nusrat was found.

When you read these calls, look at the callback and ask: for which items is this true? Then ask: do I get a list, or one item?

Words to recognise
filterfindcallbacktrue / false[]undefined=>

You have a class list and you want only the students who passed. Or you want the one student called Nusrat. Both jobs mean looking at each item and asking a yes or no question.

Like map, both take a function, the callback. Here the callback answers a question with true or false for each item: "did this student pass?"

const passed = students.filter(s => s.marks >= 33);
const nusrat = students.find(s => s.name === "Nusrat");

filter always gives back a new array with every item where the callback said true. It can hold many items, one item, or none. When nothing matches, you get an empty array, [].

find gives back one item: the first one where the callback said true, and then it stops looking. It does not wrap the item in an array. When nothing matches, you get undefined.

People often use filter when they want one thing, and then write result.name. But result is an array, so result.name is undefined. If you want one item, use find. If you want a list, use filter.

The other common slip is forgetting that find can give undefined. Before you read nusrat.name, make sure nusrat was found.

When you read these calls, look at the callback and ask: for which items is this true? Then ask: do I get a list, or one item?

Words to recognise
filterfindcallbacktrue / false[]undefined=>