JavaScript · Beginner level

Beginner level · Module 3: Arrays, Objects and Array Methods · Lesson 2 of 3

Transforming Data with map, filter and reduce

Use array methods to transform, select, find and summarise data without writing loops by hand.

In this lesson you will

  • Use map, filter, find and reduce
  • Sort arrays correctly with a comparison function

Key concepts

mapfilter and findreducesort with a compare function

The lesson

map creates a new array by transforming every element; filter keeps the elements that pass a test; find returns the first matching element or undefined; reduce combines all elements into one value, such as a total.

These methods can be chained into a pipeline: sales.map(addTotal).filter(isLarge).reduce(sumTotals, 0). Each step does one clear job, and the original array is not changed.

sort changes the array in place and compares elements as strings by default, so [10, 9, 1].sort() gives [1, 10, 9]. Pass a compare function for numbers: prices.sort((a, b) => a - b). Use toSorted (in modern environments) or copy first to keep the original.

Step by step

  1. Add a total to each sale with map.
  2. Keep sales of 5,000 SSP or more with filter.
  3. Sum the totals with reduce.
  4. Sort the remaining sales by total, highest first.
Code example

Finding the big sales with map, filter and reduce

Add a total to each sale, keep the large ones and add up their revenue — three array methods, no hand-written counting loop.

JavaScriptbig-sales.js
const sales = [  { item: "rice", qty: 3, price: 3500 },  { item: "sugar", qty: 2, price: 2800 },  { item: "soap", qty: 4, price: 1200 },  { item: "rice", qty: 1, price: 3500 },  { item: "oil", qty: 1, price: 9000 },]; const bigSales = sales  .map((s) => ({ ...s, total: s.qty * s.price }))  .filter((s) => s.total >= 5000); const revenue = bigSales.reduce((sum, s) => sum + s.total, 0); for (const s of bigSales) {  console.log(`${s.item.padEnd(6)} ${s.total.toLocaleString("en-US").padStart(7)} SSP`);}console.log(`Sales of 5,000 SSP or more: ${bigSales.length}`);console.log(`Revenue from them: ${revenue.toLocaleString("en-US")} SSP`);

Output

rice    10,500 SSP
sugar    5,600 SSP
oil      9,000 SSP
Sales of 5,000 SSP or more: 3
Revenue from them: 25,100 SSP

How it works

map returns a new array where each sale gains a total (the spread ...s copies the original fields). filter keeps only sales of 5,000 SSP or more, so soap (4,800) and the single rice sale (3,500) drop out. reduce starts from 0 and adds each remaining total. The original sales array is never changed. padEnd and padStart line up the columns; toLocaleString("en-US") adds thousands separators. Output produced by running the code with Node.js; figures are illustrative.

Key concepts

map with object spreadfilterreduce with a starting valuechaining array methods

Practice activity

Complete the sales practical activity using a chain of array methods.

Expected result: The output lists the large sales and their revenue, matching a hand calculation.

Check your understanding

  1. What does filter return?

    Show answer

    A new array containing only the elements that pass the test.

  2. Why does [10, 9, 1].sort() give [1, 10, 9]?

    Show answer

    By default sort compares elements as strings.

Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.