Use map() to transform every item, filter() to keep all matches, find() to get the first match, includes() to check membership, and reduce() to accumulate one result. For sorting, choose between sort(), which changes the original array, and toSorted(), which returns a sorted copy. The right choice depends on what you need back and whether the original data may change.
How do JavaScript arrays work?
An array is an indexed, resizable collection. Its items are addressed by positions beginning at zero, and its length property reports the array’s length. JavaScript does not require every item to have the same type, though keeping related data consistent usually makes code easier to understand. See MDN’s guide to indexed collections and Array reference.
As an Amazon Associate I earn from qualifying purchases.
const values = [12, "hello", true];
console.log(values[0]); // 12
console.log(values.length); // 3Most array callbacks receive the current element, its index, and the array being processed. The callback’s return value has different meaning for different methods: it becomes a mapped value, a test result, or the next accumulator state.
Which array method fits the task?
| What you need | Method | What it returns | Effect on the original |
|---|---|---|---|
| Transform each populated item | map() |
A new array with callback results | Does not change the array by itself |
| Keep every item that passes a test | filter() |
A new shallow array | Does not change the array by itself |
| Get the first item that passes a test | find() |
The item, or undefined |
Does not change the array by itself |
| Check whether a value is present | includes() |
true or false |
Does not change the array |
| Combine items into one result | reduce() |
The final accumulator value | Does not change the array by itself |
| Sort the existing array | sort() |
The same array, sorted | Mutates the array |
| Sort while preserving the original | toSorted() |
A new sorted array | Leaves the original unchanged |
| Read an item relative to the end | at(-1) |
The item, or undefined |
Does not change the array |
How do I transform every item with map()?
Use map() when each visited item should produce a corresponding output. It calls the callback for each populated slot and returns a new array of callback results; it does not edit the source array unless the callback itself changes something.
#1 Best Overall
const prices = [12, 25, 8];
const withTax = prices.map((price) => price * 1.1);
console.log(withTax); // [13.2, 27.500000000000004, 8.8]
console.log(prices); // [12, 25, 8]Use the returned array. If you only want to perform an action for each item and do not need a new array, choose forEach() or a loop instead. See MDN’s map() reference.
When should I use filter() instead of find()?
Use filter() to keep all matches
filter() returns a new shallow array containing every item whose callback returns a truthy result. It can return an empty array, one item, or many.
Rank #2
const prices = [12, 25, 8];
const affordable = prices.filter((price) => price < 20);
console.log(affordable); // [12, 8]Use find() to get the first match
find() returns the first item whose callback passes the test, then stops searching. If no item matches, the result is undefined.
Windows 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 reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteconst firstAffordable = prices.find((price) => price < 20);
console.log(firstAffordable); // 12These methods answer different questions: “Which items match?” calls for filter(); “What is the first matching item?” calls for find(). MDN documents their behavior in its filter() reference and find() reference.
How do I check whether an array includes a value?
Use includes() for a direct yes-or-no check. It returns a boolean rather than the matching item or a filtered array.
const hasEight = prices.includes(8);
console.log(hasEight); // trueFor an object or a condition-based search, use find() or some() as appropriate; includes() checks for the specified value itself. See MDN’s includes() reference.
Rank #4
When should I use reduce()?
Choose reduce() when the items should be combined into one accumulated result, such as a sum. The reducer returns the next accumulator value, which is passed to the callback on the next iteration. An explicit initial value makes the starting state clear and allows the operation to work on an empty array.
Recommended Free Tools
const total = prices.reduce((sum, price) => sum + price, 0);
console.log(total); // 45Without an initial value, reduce() starts with the first present element as its accumulator. Calling it on an empty array without an initial value throws an error. For a sum, pass 0; for another operation, choose an initial value that matches the type and meaning of the result. More details are in MDN’s reduce() reference.
How do I sort numbers without changing the original array?
sort() rearranges the original array in place. Its default order compares string representations, not numeric values, so provide a comparator for numeric sorting. The comparator (a, b) => a - b sorts numbers in ascending order.
const prices = [12, 25, 8];
const sortedCopy = prices.toSorted((a, b) => a - b);
console.log(sortedCopy); // [8, 12, 25]
console.log(prices); // [12, 25, 8]If you want to change the existing array, use prices.sort((a, b) => a - b). If the original order must remain available, use toSorted() instead. MDN explains in-place sorting in its sort() reference and the copying alternative in its toSorted() reference.
How do I get the last item in an array?
Use at(-1) to address the final item relative to the end. If the array is empty, it returns undefined.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →const lastPrice = prices.at(-1);
console.log(lastPrice); // 8prices[-1] is not negative indexing in JavaScript; it accesses a property named -1. The at() method is widely available in current runtimes, but check support if your code must run in an older environment. See MDN’s at() reference.
What should I know about sparse arrays?
A sparse array has empty slots, which are different from slots that explicitly contain undefined. Methods do not all handle empty slots the same way: map(), filter(), and forEach() skip holes, while find() and includes() treat holes as undefined during traversal. Do not assume these methods are interchangeable when an array may contain holes. MDN covers this behavior in its Array reference and find() 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.
