14. JavaScript Array Methods

What you will learn

• How to transform arrays with map, filter, and reduce
• How to search with find, some, and every
• How to sort safely
• How to copy and combine arrays

Methods that take a function

Many array methods accept a callback, a small function that runs once for each item. Arrow functions make these short. Most of these methods return a new array and leave the original unchanged.

forEach: do something for each item

<ul id="demo"></ul>

<script>
  const names = ["Sam", "Ali", "Mia"];
  const list = document.getElementById("demo");

  names.forEach((name) => {
    const li = document.createElement("li");
    li.textContent = name;
    list.appendChild(li);
  });
</script>

map: transform every item

map returns a new array of the same length, with each item changed.

<p id="demo"></p>

<script>
  const prices = [10, 20, 30];
  const withTax = prices.map((p) => p * 1.2);

  document.getElementById("demo").textContent =
    "Before: " + prices.join(", ") + " | After: " + withTax.join(", ");
</script>

filter: keep matching items

filter returns a new array containing only the items for which the callback returns true.

<p id="demo"></p>

<script>
  const ages = [12, 18, 25, 9, 40];
  const adults = ages.filter((age) => age >= 18);

  document.getElementById("demo").textContent = "Adults: " + adults.join(", ");
</script>

reduce: combine into one value

reduce keeps a running result. You give it a starting value, and the callback receives the running total and the current item.

<p id="demo"></p>

<script>
  const cart = [4.5, 10, 2.25];
  const total = cart.reduce((sum, price) => sum + price, 0);

  document.getElementById("demo").textContent = "Total: " + total.toFixed(2);
</script>

find, some, and every

<p id="demo"></p>

<script>
  const scores = [45, 72, 88, 91];

  document.getElementById("demo").innerHTML =
    "First above 80: " + scores.find((s) => s > 80) + "<br>" +
    "Any below 50: " + scores.some((s) => s < 50) + "<br>" +
    "All above 40: " + scores.every((s) => s > 40);
</script>

Sorting

sort() changes the original array. Without help it sorts as text, so numbers come out in the wrong order. Give it a compare function for numbers.

<p id="demo"></p>

<script>
  const nums = [10, 9, 100, 1];
  const wrong = [...nums].sort();
  const right = [...nums].sort((a, b) => a - b);

  document.getElementById("demo").innerHTML =
    "Default sort: " + wrong.join(", ") + "<br>" +
    "Numeric sort: " + right.join(", ");
</script>

The three dots ... are the spread syntax. [...nums] makes a copy first, so the original is not changed. For text, use names.sort((a, b) => a.localeCompare(b)).

Chaining methods

Because filter and map return arrays, you can chain them.

<p id="demo"></p>

<script>
  const numbers = [1, 2, 3, 4, 5, 6];
  const result = numbers
    .filter((n) => n % 2 === 0)   // 2, 4, 6
    .map((n) => n * n);           // 4, 16, 36

  document.getElementById("demo").textContent = result.join(", ");
</script>

Copying and joining

• slice(start, end) returns a copy of part of an array.
• concat(other) or [...a, ...b] joins arrays into a new one.
• reverse() reverses in place, so copy first if you need the original.

Common mistakes

• Sorting numbers without a compare function.
• Forgetting that sort and reverse change the original array.
• Forgetting the starting value in reduce.
• Forgetting to return a value inside a map callback written with braces.
• Using map when you only want side effects. Use forEach.

<p id="demo"></p>

<script>
  const marks = [35, 80, 62, 91, 48];
  const passed = marks.filter((m) => m >= 50);
  const sum = passed.reduce((total, m) => total + m, 0);
  const average = sum / passed.length;

  document.getElementById("demo").textContent = "Average: " + average.toFixed(1);
</script>

Summary

• map transforms, filter selects, and reduce combines.
• find, some, and every search with a test.
• Sort numbers with a compare function, and copy first with [...array].