JavaScript: JavaScript Arrays Advanced

Last updated: 2026-10-13

In the previous lesson, you learned basic array operations. Now let's level up with array "power moves" — higher-order methods. These let you do more with less code and are essential skills in modern JavaScript development.

Related Array Methods：findIndex forEach filter reduce every find push some sort map

1. map — Transform Each Element

map runs a function on every element and returns a new array — the original stays unchanged. Think of it as an assembly line: each element goes in, gets transformed, and comes out as part of a new product.

<script>
let prices = [10, 20, 30];
let doubled = prices.map(p => p * 2);   // [20, 40, 60]
</script>

The callback receives three arguments: (element, index, originalArray). Most of the time you only need the first one.

2. filter — Keep What Passes

filter keeps elements that pass a test and returns a new array — the original is untouched. Like a security checkpoint: items that meet the criteria go through; the rest get filtered out.

<script>
let scores = [45, 80, 92, 55, 78, 98];
let passed = scores.filter(s => s >= 60);  // [80, 92, 78, 98]
</script>

Elements where the callback returns true are kept; those returning false are discarded.

3. reduce — Accumulate Into One Value

reduce "compresses" an array into a single value. The most common use case is summing:

<script>
let nums = [1, 2, 3, 4, 5];
let sum = nums.reduce((acc, cur) => acc + cur, 0);  // 15
</script>

What the parameters mean:

• acc (accumulator): the running total, carried over from the previous iteration
• cur (current): the current element
• The second argument 0 is the initial value for the accumulator

▶ Example: Combining map, filter, and reduce

4. find and findIndex

• find — returns the first element that matches
• findIndex — returns the index of the first match

If nothing is found, find returns undefined and findIndex returns -1.

<script>
let users = [
  { name: 'Alice', age: 20 },
  { name: 'Bob', age: 17 },
  { name: 'Charlie', age: 25 }
];

users.find(u => u.age > 22);       // { name: 'Charlie', age: 25 }
users.findIndex(u => u.age < 18);  // 1 (Bob's index)
</script>

5. sort — Order Elements

sort arranges the array in place (it modifies the original!). By default it sorts as strings, which trips up many beginners:

<script>
let nums = [10, 1, 21, 2];
nums.sort();           // [1, 10, 2, 21]  ← String sort! "10" < "2"

// Correct: numeric sort requires a comparator function
nums.sort((a, b) => a - b);   // [1, 2, 10, 21]  ← Ascending
nums.sort((a, b) => b - a);   // [21, 10, 2, 1]  ← Descending
</script>

▶ Example: Sorting Student Scores

6. some and every

• some — does at least one element pass the test? (returns a boolean)
• every — do all elements pass the test? (returns a boolean)

<script>
let scores = [60, 75, 82, 90];

scores.some(s => s >= 90);    // true  — someone scored 90+
scores.some(s => s === 100);  // false — no one got a perfect score
scores.every(s => s >= 60);   // true  — everyone passed
</script>

7. Spread Operator (...)

The spread operator ... "unpacks" an array. It's commonly used for copying and merging:

<script>
let a = [1, 2, 3];
let b = [...a];          // Copy: [1, 2, 3] (new array, not a reference)
let c = [...a, 4, 5];    // Merge: [1, 2, 3, 4, 5]
let d = [0, ...a, 4];    // Insert: [0, 1, 2, 3, 4]

let x = [1, 2], y = [3, 4];
let z = [...x, ...y];    // [1, 2, 3, 4]
</script>

8. Destructuring Assignment

Extract values from an array and assign them to variables by position:

<script>
let [a, b, c] = [1, 2, 3];
// a = 1, b = 2, c = 3

let [first, ...rest] = [1, 2, 3, 4, 5];
// first = 1, rest = [2, 3, 4, 5]

let [name, score] = ['Alice', 95];
// name = 'Alice', score = 95
</script>

9. Chaining Methods

Higher-order methods return new arrays, so you can chain them one after another:

<script>
let result = students
  .filter(s => s.score >= 60)     // First, filter passing students
  .map(s => s.name)               // Then, extract names
  .sort();                         // Finally, sort
</script>

▶ Example: Chaining to Process Data

▶ Example: Spread Operator and Destructuring

Related Array Methods：findIndex forEach filter reduce every find push some sort map

❓ FAQ

📖 Summary

• map transforms each element into a new array, filter keeps matching elements, reduce accumulates into a single value
• find returns the first matching element, findIndex returns the first matching index
• sort defaults to string ordering — for numbers, always pass a comparator: (a, b) => a - b
• some checks if any element matches, every checks if all elements match
• The spread operator ... copies and merges arrays; destructuring extracts elements into variables
• Higher-order methods return new arrays and can be chained for concise, readable code

📝 Exercises

1. Given the array [3, 8, 12, 5, 9, 17, 4], use filter to keep numbers greater than 7, then map to double them. Output the result.
2. Use reduce to count occurrences of each word in an array like ['apple', 'banana', 'apple', 'cherry', 'banana', 'apple'] → { apple: 3, banana: 2, cherry: 1 }.
3. Given an array of students (with name and score), use chaining to: filter passing students → sort by score descending → extract names into a new array. Display the result on the page.

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us