JavaScript Array Method Finder
Not sure which array method to reach for? Describe what you want to do and this tool will show you the right method with syntax, a realistic example, common gotchas, and related methods. No code is executed — it’s a fast interactive reference.
Syntax
Example
Common Gotchas
Related Methods
How to Choose the Right Method
With over a dozen array methods available, picking the right one comes down to two questions: do you need a new value back? and how many results do you expect?
map vs forEach
map | forEach | |
|---|---|---|
| Returns | A new array of the same length | undefined |
| Best for | Transforming data (extract names, format prices) | Side effects (logging, DOM updates, API calls) |
| Chainable? | Yes — .map().filter() | No |
find vs filter
find | filter | |
|---|---|---|
| Returns | First matching element (or undefined) | New array of all matches |
| Stops early? | Yes | No — always scans entire array |
| Best for | Lookup by ID or unique key | All items matching a condition |
Remember that filter relies on the truthiness of the callback’s return value. Any truthy result keeps the element; any falsy result discards it.
When to use reduce
reduce is the most versatile method — it can replicate what map, filter, and find do — but that versatility makes it harder to read. Prefer the purpose-built method when one exists. Reach for reduce when you genuinely need to collapse an array into a single value: a sum, a grouped object, a flattened structure, or a frequency count.
Try These Examples
Click an example below to jump straight to the method detail:
- Extract all email addresses from a list of users
- Get only in-stock products under £50
- Calculate the total price of a shopping cart
- Sort blog posts by publication date
- Look up a user by their unique ID
- Flatten nested category arrays into one list
- Remove duplicate tags from a merged list
- Access the last element of an array
Frequently Asked Questions
When should I use map instead of forEach?
Use map when you need a new array built from transforming each element — for example, extracting a list of names from user objects. Use forEach when you only need side effects (logging, DOM updates, API calls) and do not need a returned array. A common anti-pattern is using forEach with .push() into an external array; map handles that more cleanly.
What is the difference between find and filter?
find returns the first element that matches and stops searching immediately. filter returns a new array containing every element that matches, always scanning the entire array. Use find for lookups by unique key; use filter when multiple results are expected. Both rely on the truthiness of the callback return value.
Why can sort be tricky?
By default, sort() converts elements to strings and sorts lexicographically. This means [10, 2, 1].sort() produces [1, 10, 2]. Always pass a compare function for numbers: arr.sort((a, b) => a - b). Also note that sort mutates the original array — use toSorted() or spread into a new array first if you need immutability.
Does this tool run my code?
No. This tool does not execute any code. It is a reference guide that matches your intent to the right array method and displays pre-written documentation and examples. Everything runs in your browser with no server communication.