Array Power Tools: map, filter & reduce

Why write a loop when one line will do? Twelve short pages from Grade 10 of High School, about 14 minutes of reading in all.

Start reading Or practice it in the game

What you’ll learn

  • Callbacks and higher-order functions
  • forEach for simple looping
  • map to transform every item
  • filter to keep only what you want
  • find, findIndex, some and every
  • reduce to boil a list down to one value
  • How sort's comparison function really works
  • Chaining methods into data pipelines

The pages

Twelve pages, about 14 minutes.

  1. Callbacks: Functions as Ingredients Back in Grade 6, you learned that functions are values, and that you can pass a function into another function. A…
  2. forEach: Loop Without the Loop The simplest array method is forEach. It calls your callback once for each item in the array. Your callback actually…
  3. map: Transform Every Item map creates a new array by running your callback on every item and collecting whatever it returns. The new array is…
  4. filter: Keep Only Some filter creates a new array containing only the items that pass a test. Your callback should return true (keep it) or…
  5. find and findIndex: Get the First Match Sometimes you don't want all the matches. You just want the first one. That's find. find returns the item itself (not…
  6. some and every: Yes-or-No Questions These two answer questions about the whole array, and return a simple true or false. some: "Does at least one item…
  7. reduce: Boil It Down to One Value And now, the most powerful (and most confusing) method of all: reduce. It takes a whole array and reduces it down to a…
  8. sort With a Comparator (Finally Explained) In Grade 7, we told you to memorize (a, b) => a - b for sorting numbers. Now you know enough to understand it! sort…
  9. Chaining: Building a Data Pipeline Here's where it all comes together. Since map and filter both return arrays, you can chain them: call another method…
  10. Other Handy Array Tricks A few more tools worth knowing. Array.from({ length: 5 }, (_, i) => i * 10) is a neat trick for creating a numbered…
  11. Mini Project: The Movie Night Dashboard Let's analyze a movie collection using nothing but array methods. Not a single for loop in sight! (In step 6 we…
  12. Recap The key ideas of Grade 10, JavaScript map, filter and reduce, on one page. A callback is a function passed into…

Reading is step one

CurlyScript turns these notes into a game: short questions, an explanation after every answer, and a test at the end of each grade. Free, with nothing to sign up for.

Start learning