Mastering JavaScript Array Higher‑Order Functions (with One Simple Example)

If you are learning JavaScript, array methods are a turning point. They help you write cleaner, readable, and more declarative code instead of long loops.

In this article, we’ll understand the most important Array Higher‑Order Functions (HOFs) using one common example so the differences become crystal clear.

Get Mayuriwasu’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

We’ll cover:

• forEach
• map
• filter
• find
• some
• reduce
• sort

The Example We’ll Use Everywhere

let scores = [40, 30, 60, 80];

Imagine these are exam scores of students. Each method answers a different kind of question about this data.

1. forEach() → Do something for each element

Use forEach when you want side effects like logging, updating UI, or pushing to another array.

scores.forEach(s => console.log(s));

Key Points

• Does not return anything useful (undefined)
• Cannot be chained to create new arrays
• Best for actions, not transformations

🧠 Think of it as: “Just loop and do something.”

2. map() → Transform every element

Use map when you want a new array of the same length with modified values.

let plusTen = scores.map(s => s + 10);
console.log(plusTen); // [50, 40, 70, 90]

Key Points

• Returns a new array
• Original array stays unchanged
• Every element is transformed

🧠 Think of it as: “Change each value.”

3. filter() → Select many elements

Use filter when you want only some elements that match a condition.

let passedAll = scores.filter(s => s >= 50);
console.log(passedAll); // [60, 80]

Key Points

• Returns a new array
• Result array length may be smaller
• Callback must return true or false

🧠 Think of it as: “Keep only the matching ones.”

4. find() → Select one element

Use find when you need only the first match.

let firstPassed = scores.find(s => s >= 50);
console.log(firstPassed); // 60

Key Points

• Returns a single value, not an array
• Stops searching after the first match
• Returns undefined if nothing is found

🧠 Think of it as: “Give me the first match.”

5. some() → Check if ANY element matches

Use some when you just need a yes / no answer.

let hasFailed = scores.some(s => s < 35);
console.log(hasFailed); // true

Key Points

• Returns boolean (true or false)
• Stops early as soon as condition is met
• Does not return elements

🧠 Think of it as: “Is there at least one?”

6. reduce() → Combine everything into one value

Use reduce when you want to calculate a single result from an array.

Example 1: Total score

let total = scores.reduce((sum, s) => sum + s, 0);
console.log(total); // 210

Example 2: Average score

let avg = scores.reduce((sum, s) => sum + s, 0) / scores.length;
console.log(avg); // 52.5

Key Points

• Returns one value (number, object, array, etc.)
• Very powerful but should be used thoughtfully

🧠 Think of it as: “Merge everything into one result.”

7. sort() → Reorder elements

⚠️ Important: sort mutates the original array.

Ascending order

let ascSorted = scores.sort((a, b) => a - b);
console.log(ascSorted); // [30, 40, 60, 80]

Descending order

let descSorted = scores.sort((a, b) => b - a);
console.log(descSorted); // [80, 60, 40, 30]

Key Points

• Changes the original array
• Comparison function decides order

🧠 Think of it as: “Rearrange the items.”

One‑Line Mental Model (Very Important 🚀)

MethodPurposeReturnsforEachDo somethingundefinedmapTransform valuesNew arrayfilterSelect manyNew arrayfindSelect oneSingle valuesomeAny match?BooleanreduceCombine to one valueAny typesortReorder elementsMutated array

Final Advice

• ❌ Don’t use forEach when you want a returned value
• ✅ Prefer map, filter, find for clarity
• ⚠️ Use reduce only when simpler methods don’t fit
• ⚠️ Be careful with sort because it mutates data

If you master these methods, 90% of array problems become easy.

Happy Coding! 🚀

If you found this helpful, consider sharing it with someone learning JavaScript.