JavaScript Array Methods Tutorial: map, filter, reduce, find, some and every with Examples

Submitted by jaypabs on Saturday, November 7, 2026 - 17:30.

Arrays are the default list type in JavaScript, and most of the day-to-day work you do with them — transform items, keep only some of them, compute a total, find the first match — is easier with the built-in array methods than with handwritten for loops. Once you are comfortable with map, filter, reduce, find, some and every, reading other people's code (and writing your own API responses) gets much faster.

In this JavaScript Array Methods tutorial you will run four small Node.js scripts that print real output. Download the zip below, extract it, and run each file with node 1_map_filter.js.

Requirements

Node.js 18 or newer (any recent LTS is fine), or a browser console.
A code editor such as VS Code.
Basic JavaScript: arrays, objects, arrow functions.

map and filter: Transform and Keep

map returns a new array with one result per item. filter returns a new array with only the items that pass a test. They do not change the original array. Save as 1_map_filter.js:

const students = [
  { name: "Ana", score: 92 },
  { name: "Ben", score: 67 },
  { name: "Cia", score: 81 },
  { name: "Dan", score: 55 },
  { name: "Eve", score: 88 },
];
 
// map: transform every item
const names = students.map((s) => s.name);
console.log("names:", names);
 
const grades = students.map((s) => ({
  name: s.name,
  passed: s.score >= 75,
}));
console.log("grades:", grades);
 
// filter: keep only items that match
const passers = students.filter((s) => s.score >= 75);
console.log(
  "passers:",
  passers.map((s) => s.name)
);
 
// chain map + filter
const honorNames = students
  .filter((s) => s.score >= 90)
  .map((s) => s.name.toUpperCase());
console.log("honor roll:", honorNames);

Run node 1_map_filter.js. Output:

names: [ 'Ana', 'Ben', 'Cia', 'Dan', 'Eve' ]
grades: [
  { name: 'Ana', passed: true },
  { name: 'Ben', passed: false },
  { name: 'Cia', passed: true },
  { name: 'Dan', passed: false },
  { name: 'Eve', passed: true }
]
passers: [ 'Ana', 'Cia', 'Eve' ]
honor roll: [ 'ANA' ]

Chaining is common: filter first (smaller list), then map (cheaper transform). Here only Ana scored 90+, so the honor roll is ['ANA'].

reduce: Turn a List into One Value

reduce walks the array and carries an accumulator. Use it for sums, grouping and frequency maps. Save as 2_reduce.js:

const cart = [
  { item: "USB cable", price: 120, qty: 2 },
  { item: "Mouse", price: 450, qty: 1 },
  { item: "Notebook", price: 55, qty: 3 },
];
 
// sum of (price * qty)
const total = cart.reduce((sum, row) => sum + row.price * row.qty, 0);
console.log("cart total:", total);
 
// group scores by pass/fail
const scores = [92, 67, 81, 55, 88, 74, 95];
const grouped = scores.reduce(
  (acc, n) => {
    (n >= 75 ? acc.pass : acc.fail).push(n);
    return acc;
  },
  { pass: [], fail: [] }
);
console.log("grouped:", grouped);
 
// count word frequency
const words = ["php", "js", "php", "python", "js", "php"];
const freq = words.reduce((acc, w) => {
  acc[w] = (acc[w] || 0) + 1;
  return acc;
}, {});
console.log("frequency:", freq);

Output:

cart total: 855
grouped: { pass: [ 92, 81, 88, 95 ], fail: [ 67, 55, 74 ] }
frequency: { php: 3, js: 2, python: 1 }

The second argument to reduce is the starting accumulator (0, { pass: [], fail: [] }, or {}). Forgetting it is a frequent source of bugs when the array might be empty.

find, some and every

These answer different questions:

find — the first matching item (or undefined)
some — true if any item matches
every — true if all items match

Save as 3_find_some_every.js:

const products = [
  { id: 1, name: "Keyboard", stock: 12, price: 899 },
  { id: 2, name: "Monitor", stock: 0, price: 4500 },
  { id: 3, name: "Webcam", stock: 4, price: 1200 },
  { id: 4, name: "Headset", stock: 7, price: 650 },
];
 
// find: first match (or undefined)
const soldOut = products.find((p) => p.stock === 0);
console.log("first sold out:", soldOut ? soldOut.name : "none");
 
const cheap = products.find((p) => p.price < 500);
console.log("under 500:", cheap ? cheap.name : "none");
 
// findIndex
const idx = products.findIndex((p) => p.id === 3);
console.log("webcam index:", idx);
 
// some: true if ANY item matches
console.log("any sold out?", products.some((p) => p.stock === 0));
console.log("any over 5000?", products.some((p) => p.price > 5000));
 
// every: true if ALL items match
console.log("all in stock?", products.every((p) => p.stock > 0));
console.log("all under 10000?", products.every((p) => p.price < 10000));
 
// practical: can fulfill an order?
const orderQty = 5;
const webcam = products.find((p) => p.name === "Webcam");
const canShip = webcam && webcam.stock >= orderQty;
console.log(`can ship ${orderQty} webcams?`, canShip);

Output:

first sold out: Monitor
under 500: none
webcam index: 2
any sold out? true
any over 5000? false
all in stock? false
all under 10000? true
can ship 5 webcams? false

Prefer some/every when you only need a yes/no answer — they can stop early. Prefer find when you need the object itself.

Practical Capstone Example

A small enrollment report that filters active Web Dev students, computes the average, finds the top scorer and builds a pass/fail list. Save as 4_practical.js:

// Capstone-style: filter enrolled students, compute average, top scorer
const enrollments = [
  { student: "Ana", course: "Web Dev", score: 92, active: true },
  { student: "Ben", course: "Web Dev", score: 67, active: true },
  { student: "Cia", course: "Database", score: 81, active: false },
  { student: "Dan", course: "Web Dev", score: 55, active: true },
  { student: "Eve", course: "Web Dev", score: 88, active: true },
  { student: "Fay", course: "Database", score: 95, active: true },
];
 
const webDevActive = enrollments.filter(
  (e) => e.course === "Web Dev" && e.active
);
console.log(
  "active Web Dev:",
  webDevActive.map((e) => e.student)
);
 
const avg =
  webDevActive.reduce((sum, e) => sum + e.score, 0) / webDevActive.length;
console.log("Web Dev average:", avg.toFixed(1));
 
const top = webDevActive.reduce((best, e) =>
  e.score > best.score ? e : best
);
console.log("top student:", top.student, top.score);
 
const anyoneFailing = webDevActive.some((e) => e.score < 60);
console.log("anyone failing?", anyoneFailing);
 
const allPassing = webDevActive.every((e) => e.score >= 50);
console.log("all at least 50?", allPassing);
 
// Build a report list with map
const report = webDevActive.map((e) => ({
  name: e.student,
  grade: e.score >= 75 ? "Passed" : "Failed",
  score: e.score,
}));
console.log("report:", report);

Output:

active Web Dev: [ 'Ana', 'Ben', 'Dan', 'Eve' ]
Web Dev average: 75.5
top student: Ana 92
anyone failing? true
all at least 50? true
report: [
  { name: 'Ana', grade: 'Passed', score: 92 },
  { name: 'Ben', grade: 'Failed', score: 67 },
  { name: 'Dan', grade: 'Failed', score: 55 },
  { name: 'Eve', grade: 'Passed', score: 88 }
]

This is the same shape of code you will write for dashboards: filter the rows that matter, reduce for totals, map into a view model for the table.

Quick Comparison

Method	Returns	Typical use
`map`	New array (same length)	Format rows for a UI or API
`filter`	New array (0..n items)	Search results, active records
`reduce`	Any single value	Sum, group, index by id
`find` / `findIndex`	Item or index	Lookup by id
`some` / `every`	Boolean	Validation, permissions checks

Common Mistakes

Using map when you meant forEach (or the other way around). map builds a new array; if you ignore the return value, use forEach.
Mutating objects inside map and wondering why the original list changed — clone fields you change.
Calling find and immediately reading a property without checking for undefined.
Writing a giant reduce when a simple filter + map chain is clearer.

Conclusion

Mastering map, filter, reduce, find, some and every covers most array work in front-end and Node.js projects. Practice with the four scripts in the download, then rewrite one of your old for loops as a chain and compare readability. Once these methods feel natural, the rest of the array toolkit (flatMap, sort, includes) slots in easily.

Download the complete example scripts below and run them with Node.js. Happy coding!

Search

JavaScript Array Methods Tutorial: map, filter, reduce, find, some and every with Examples

Requirements

map and filter: Transform and Keep

reduce: Turn a List into One Value

find, some and every

Practical Capstone Example

Quick Comparison

Common Mistakes

Conclusion