All Roadmaps›⚡ JavaScript›Phase 1›Arrays & Array Methods

Arrays & Array Methods

📖 Concept

Arrays are ordered collections of values. They can hold any type — numbers, strings, objects, even other arrays.

Mutating methods (change the original): push, pop, shift, unshift, splice, sort, reverse, fill Non-mutating methods (return new): map, filter, reduce, slice, concat, flat, flatMap, find, some, every, includes

The "Big 3" higher-order array methods:

  • map — Transform each element → new array of same length
  • filter — Keep elements that pass a test → new array (possibly shorter)
  • reduce — Accumulate all elements into a single value

🏠 Real-world analogy: map is like a factory assembly line — every item gets processed. filter is quality control — only good items pass. reduce is melting everything into one bar of gold.

💻 Code Example

codeTap to expand ⛶
1const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
2

3// map — transform every element
4const doubled = numbers.map(n => n * 2);
5// [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
6

7// filter — keep elements matching a condition
8const evens = numbers.filter(n => n % 2 === 0);
9// [2, 4, 6, 8, 10]
10

11// reduce — accumulate into a single value
12const sum = numbers.reduce((acc, n) => acc + n, 0); // 55
13

14// find — first element matching condition
15const firstOver5 = numbers.find(n => n > 5); // 6
16

17// some & every — boolean checks
18const hasNeg = numbers.some(n => n < 0);    // false
19const allPos = numbers.every(n => n > 0);   // true
20

21// forEach — side effects (no return value!)
22numbers.forEach((n, i) => {
23  console.log(`Index ${i}: ${n}`);
24});
25

26// Chaining methods
27const result = numbers
28  .filter(n => n % 2 === 0)   // [2, 4, 6, 8, 10]
29  .map(n => n ** 2)            // [4, 16, 36, 64, 100]
30  .reduce((sum, n) => sum + n, 0); // 220
31

32// Useful patterns
33const users = [
34  { name: "Alice", age: 25 },
35  { name: "Bob", age: 17 },
36  { name: "Charlie", age: 30 }
37];
38

39// Group by (using reduce)
40const grouped = users.reduce((groups, user) => {
41  const key = user.age >= 18 ? "adults" : "minors";
42  groups[key] = groups[key] || [];
43  groups[key].push(user);
44  return groups;
45}, {});
46

47// Flat & flatMap
48const nested = [[1, 2], [3, [4, 5]]];
49console.log(nested.flat());     // [1, 2, 3, [4, 5]]
50console.log(nested.flat(Infinity)); // [1, 2, 3, 4, 5]
51

52// Array.from — create arrays from iterables
53const chars = Array.from("hello"); // ['h','e','l','l','o']
54const range = Array.from({length: 5}, (_, i) => i + 1); // [1,2,3,4,5]

🏋️ Practice Exercise

Mini Exercise:

  1. Given an array of objects with name and score, return names of those who scored above 80
  2. Use reduce to count the frequency of each word in an array
  3. Write a function to remove duplicates from an array (3 different ways)
  4. Implement your own map function using reduce
  5. Flatten a deeply nested array without using .flat()

⚠️ Common Mistakes

  • forEach does NOT return a new array — use map if you need a transformed array

  • Forgetting that sort() sorts as STRINGS by default — [10, 2, 1].sort() → [1, 10, 2]! Use .sort((a,b) => a - b)

  • Using map when you should use forEach (for side effects) or filter (for subsetting)

  • Mutating the original array with splice, sort, reverse when you didn't intend to — use slice, toSorted, toReversed

  • Forgetting the initial value in reduce — without it, the first element becomes the accumulator, which fails on empty arrays

💼 Interview Questions

🎤 Mock Interview

Mock interview is powered by AI for Arrays & Array Methods. Login to unlock this feature.

← PreviousFunctionsNext →Objects