Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstalliTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Choose a JavaScript array method by the shape of the result you need: use map() to transform items, filter() to keep matches, reduce() to combine values, and the other methods below to find items or answer yes/no questions. The examples use one course-task list so you can see exactly what each callback returns and what the method produces.
Start by choosing the result you need
| Need | Method | Result |
|---|---|---|
| Transform each item | map() |
A new array of callback results |
| Keep items that pass a test | filter() |
A new array of matching items |
| Get the first matching item | find() |
One item or undefined |
| Check whether at least one item passes | some() |
A boolean |
| Check whether every item passes | every() |
A boolean |
| Combine items into one result | reduce() |
The accumulated value |
| Map items to zero or more values and flatten one level | flatMap() |
A new, one-level-flattened array |
Each of these methods receives a callback. For the methods that use a test, return a truthy or falsy value to say whether an item passes. For map(), return the transformed value. For reduce(), return the next accumulator value.
Use one task list for the examples
Here is a small project-like dataset. Each task has a title, completion state, estimated minutes, an overdue flag, and tags:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
const tasks = [
{
title: "Read the lesson",
complete: true,
minutes: 15,
overdue: false,
tags: ["reading", "basics"]
},
{
title: "Build the example",
complete: false,
minutes: 30,
overdue: true,
tags: ["practice", "arrays"]
},
{
title: "Review the notes",
complete: false,
minutes: 10,
overdue: false,
tags: []
}
];Transform every item with map()
Use map() when you want one output for each visited input item. Its callback returns the value that goes into the new array:
#1 Best Overall
const taskTitles = tasks.map(task => task.title);
// ["Read the lesson", "Build the example", "Review the notes"]The result is an array of strings, not an array of task objects. To make a display-ready value, return an object instead:
const taskLabels = tasks.map(task => ({
text: task.title,
status: task.complete ? "Complete" : "To do"
}));map() is for transformation, not simply for running code once per item. MDN warns that calling it and discarding the returned array is an anti-pattern; for work whose purpose is a side effect, use forEach() or a for...of loop instead. MDN’s map() reference explains its return behavior.
Keep matching items with filter()
Use filter() when the output should contain only items that pass a condition. The callback returns a truthy value to keep an item and a falsy value to leave it out:
Rank #2
const unfinishedTasks = tasks.filter(task => !task.complete);
// ["Build the example", "Review the notes"] as task objectsThe actual result contains the original task objects, not their titles. The result is still an array, and it is a shallow copy: the array is new, but the objects inside it are not cloned.
Get the first match with find()
Use find() when you need one matching item rather than an array of every match:
const practiceTask = tasks.find(task => task.title === "Build the example");
// One task objectIf nothing matches, find() returns undefined. Account for that before reading a property from the result:
const nextTask = tasks.find(task => !task.complete);
if (nextTask) {
console.log(nextTask.title);
}Answer yes-or-no questions with some() and every()
Check whether at least one item passes with some()
some() returns true as soon as it finds a passing item; if none pass, it returns false. It does not return the matching task:
const hasOverdueTask = tasks.some(task => task.overdue);
// trueCheck whether all items pass with every()
every() returns true only when every visited item passes the test. It returns false as soon as it finds one that does not:
const allTasksComplete = tasks.every(task => task.complete);
// falseBoth methods can stop early once the answer is determined, which makes them a natural fit for checks rather than for building a list. MDN documents their predicate behavior and iteration details in its Array reference and every() reference.
Rank #4
Combine values with reduce()
Use reduce() when each item contributes to a result carried forward as an accumulator. To total the task estimates, begin at zero and return the updated total on every callback:
const totalMinutes = tasks.reduce((total, task) => {
return total + task.minutes;
}, 0);
// 55The second argument, 0, is the initial accumulator value. An explicit initial value makes the intended starting point clear and ensures this example also works if tasks is empty. The result need not be a number: with a different initial value and callback, reduce() can build an object, array, or another kind of value.
Map and flatten one level with flatMap()
Use flatMap() when each input should contribute zero or more values to one output array. For example, flatten the task tags into a single list:
const allTags = tasks.flatMap(task => task.tags);
// ["reading", "basics", "practice", "arrays"]A task with no tags contributes an empty array, so it adds nothing to the result. flatMap() combines mapping with one level of flattening; it does not recursively flatten nested arrays.
Chain methods when each step has a clear job
These methods can be composed when one step’s array is the next step’s input. For example, select unfinished tasks and then display their titles:
const unfinishedTitles = tasks
.filter(task => !task.complete)
.map(task => task.title);
// ["Build the example", "Review the notes"]Read the chain from top to bottom: first keep unfinished task objects, then transform those objects into titles. If a chain grows difficult to follow, or the work involves several side effects or complicated control flow, a plain loop may be clearer.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →One edge case: sparse arrays
A sparse array contains empty slots rather than a value at every index. Some array methods, including map(), filter(), and every(), skip empty slots. Methods such as find() can treat a hole like undefined when checking an index. This distinction usually does not affect ordinary arrays created from complete data, but it matters when arrays are sparse or when code relies on their exact contents. MDN describes these differences in its Array method reference.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
