iTechGuides 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
JavaScript arrays hold ordered, indexed values. Use map() to transform each value, filter() to keep every match, find() to get the first match, includes() to check membership, and reduce() to combine values into one result. For sorting, choose between changing the existing array with sort() and keeping it intact with toSorted().
How do JavaScript arrays work?
An array is an ordered collection whose items are accessed by numeric indexes starting at 0. Arrays can grow or shrink, have a length property, and contain different kinds of values; their items do not have to share one type. See MDN’s Array reference and guide to indexed collections.
const values = ["tea", 3, true];
console.log(values[0]); // "tea"
console.log(values.length); // 3Many array methods accept a callback. The callback commonly receives the current item, its index, and the array. What you return from the callback matters: methods such as map() use that return value to build results, while filter() treats it as a test.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsWhich array method should I choose?
| Need | Method | What it returns | Does it change the original? |
|---|---|---|---|
| Transform each populated item | map() |
A new array | No |
| Keep every item that passes a test | filter() |
A new shallow array | No |
| Get the first item that passes a test | find() |
An item or undefined |
No |
| Check for a particular value | includes() |
true or false |
No |
| Combine items into a result | reduce() |
The accumulator value | No |
| Sort the existing array | sort() |
The same array | Yes |
| Sort while preserving the original | toSorted() |
A new array | No |
| Read an item relative to the end | at(-1) |
An item or undefined |
No |
How do I transform each item with map()?
Use map() when each visited item should produce a corresponding result. It returns a new array and leaves the original array unchanged. If you do not need a returned array and only want to perform an action for each item, use forEach() or a loop instead. See MDN’s map() reference.
#1 Best Overall
const prices = [12, 25, 8];
const withTax = prices.map((price) => price * 1.1);
// withTax: [13.2, 27.500000000000004, 8.8]
// prices remains [12, 25, 8]The callback’s result becomes the corresponding output item. For example, mapping numbers to strings produces an array of strings rather than changing the original numbers.
When should I use filter() instead of find()?
Use filter() when you want all items that pass a test; use find() when you want only the first one. Both take a callback that returns a truthy or falsy result for each item. MDN documents filter() and find().
Rank #2
const prices = [12, 25, 8];
const affordable = prices.filter((price) => price < 20);
// [12, 8]
const firstAffordable = prices.find((price) => price < 20);
// 12filter() returns a new shallow array, which may be empty if nothing matches. find() stops at the first match and returns undefined if there is none.
Crashes, 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 minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11How do I check whether an array includes a value?
Use includes() for a direct membership check. It returns a boolean instead of the matching item, which makes it suitable for conditions. See MDN’s includes() reference.
const prices = [12, 25, 8];
const hasEight = prices.includes(8); // true
const hasTen = prices.includes(10); // falseIf you need the matching item rather than a yes-or-no answer, use find() with an appropriate test.
How does reduce() accumulate a result?
Use reduce() when each visited item contributes to one accumulated result, such as a total. The callback returns the next accumulator value, which is passed into the next call. Providing an initial value makes the starting state explicit and works safely when the array is empty. See MDN’s reduce() reference.
Rank #4
const prices = [12, 25, 8];
const total = prices.reduce((sum, price) => sum + price, 0);
// 45The 0 is the initial accumulator value for this sum. If you omit the initial value, reduce() uses the first present array element as the accumulator; calling it on an empty array without an initial value throws an error.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
How do I sort an array without changing the original?
sort() rearranges the original array in place. Without a comparator, it compares string representations of values in UTF-16 code-unit order, not numeric order. For ascending numeric order, provide (a, b) => a - b. MDN explains this behavior in its sort() reference.
const numbers = [12, 25, 8];
numbers.sort((a, b) => a - b);
// numbers is now [8, 12, 25]If the original order must remain unchanged, use toSorted(), which returns a sorted copy. It accepts the same comparator pattern. See MDN’s toSorted() reference.
const prices = [12, 25, 8];
const sortedCopy = prices.toSorted((a, b) => a - b);
// sortedCopy: [8, 12, 25]
// prices remains [12, 25, 8]The Array reference also documents non-mutating alternatives for other operations, including toReversed() and toSpliced(); check the Array reference when you need a copy-preserving operation.
How do I get the last item in an array?
Use at(-1) to read the final item, or another negative index to count backward from the end. It returns undefined when the requested position has no item. JavaScript does not use Python-style negative indexing with brackets: array[-1] accesses a property named "-1". See MDN’s at() reference.
const prices = [12, 25, 8];
const lastPrice = prices.at(-1); // 8What should beginners know about sparse arrays?
An array can have empty slots, often called holes. Methods do not all treat them alike: map(), filter(), and forEach() skip holes, while find() and includes() treat holes as undefined during traversal. Do not assume those methods visit or match missing slots in the same way; MDN details array behavior in its Array reference and find() reference.
Will these methods work in older JavaScript environments?
Runtime support depends on where the code runs. MDN marks at() as widely available since March 2022 and toSorted() since July 2023. If your code targets an older browser or runtime, check compatibility for that specific environment before relying on either method; the dates describe broad availability, not a guarantee for every target. See MDN’s at() reference and toSorted() 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.
