JavaScript Arrays — map, filter, reduce & Every Key Method

Half of real-world JavaScript is transforming arrays. Master map, filter and reduce, and code that used to take loops becomes one readable line.

⚡ Quick Answer

Transform with arr.map(fn), keep some with arr.filter(fn), boil down to one value with arr.reduce(fn, start). None of them touch the original array — they return new ones.

Basics & mutation methods The big three: map, filter, reduce find, some, every Sorting (and its trap)Spread & destructuring Common Mistakes FAQ

§Basics & mutation methods

basics.js

const scores = [90, 85, 77];
scores.push(100);        // add to end       [90,85,77,100]
scores.pop();            // remove last  →   returns 100
scores.unshift(50);      // add to front
scores.shift();          // remove first

console.log(scores.length);        // 3
console.log(scores.includes(85));  // true
console.log(scores.indexOf(77));   // 2

§The big three: map, filter, reduce

big_three.js

const nums = [1, 2, 3, 4, 5];

const doubled = nums.map(n => n * 2);        // [2,4,6,8,10]
const evens   = nums.filter(n => n % 2 === 0); // [2,4]
const total   = nums.reduce((sum, n) => sum + n, 0); // 15

// they chain beautifully:
const result = nums
  .filter(n => n > 1)
  .map(n => n * 10)
  .reduce((a, b) => a + b);       // 140

§find, some, every

searching.js

const users = [
  { name: "Ada",  age: 12 },
  { name: "Alan", age: 15 },
];

users.find(u => u.age > 13);      // {name:"Alan", age:15}
users.some(u => u.age > 13);      // true  — at least one?
users.every(u => u.age > 10);     // true  — all of them?
users.findIndex(u => u.name === "Ada");   // 0

§Sorting (and its trap)

sorting.js

const words = ["banana", "apple", "cherry"];
words.sort();                        // alphabetical ✓

const nums = [10, 9, 100, 1];
nums.sort();                         // [1, 10, 100, 9] ✗ string sort!
nums.sort((a, b) => a - b);          // [1, 9, 10, 100] ✓ numeric

const byAge = [...users].sort((a, b) => a.age - b.age);  // copy first

§Spread & destructuring

spread.js

const a = [1, 2], b = [3, 4];
const merged = [...a, ...b];        // [1,2,3,4]
const copy = [...a];                 // real copy, not an alias

const [first, second, ...rest] = [10, 20, 30, 40];
console.log(first, rest);            // 10 [30, 40]

const max = Math.max(...[3, 7, 2]);  // 7 — spread into arguments

§Common Mistakes to Avoid

🚨 Watch out for these

Sorting numbers without a comparator — sort() compares as strings — [10,9].sort() is [10,9]; use (a,b)=>a-b
Expecting map/filter to modify the array — they return NEW arrays — assign the result
Copying arrays with = — b = a aliases the same array — copy with [...a] or a.slice()

§Frequently Asked Questions

What's the difference between map and forEach?

map returns a new array of transformed values; forEach just runs a function for each item and returns undefined. If you want a result, use map.

How does reduce work?

reduce carries an accumulator through the array: arr.reduce((acc, item) => newAcc, start). It can build sums, objects, or anything from a list.

How do I remove an item from an array?

By index: arr.splice(i, 1). By value: arr = arr.filter(x => x !== value). filter is safer as it doesn't mutate.

How do I copy an array in JavaScript?

const copy = [...arr] or arr.slice(). Assignment (b = a) only copies the reference — both names point at one array.

🎓 Want to master JavaScript properly?This reference covers one topic — the full free course takes you from zero to real projects, with quizzes and a certificate.

Start the Free JavaScript Course →

§Related JavaScript Topics

📦 Variableslet, const, var & scope 🏷️ Data TypesTypes, == vs ===, null & undefined 🧰 FunctionsDeclarations, arrows & callbacks 🗂️ ObjectsProperties, destructuring & JSON 🔁 Loopsfor, for-of, while & control 🌳 DOM ManipulationSelect, change & create elements

← Functions Objects →