JavaScript Array Methods Reference
Browse, search, and learn every JavaScript Array method with syntax, examples, and visual diagrams.
About This Tool
The JavaScript Array Methods Reference is a comprehensive, interactive guide
to every method available on JavaScript arrays. Whether you are a beginner
learning the basics of push and pop, or an experienced developer reaching
for ES2023 additions like toSorted, toReversed, and with, this tool
puts the entire API at your fingertips with working code examples, parameter
tables, and visual transformation diagrams.
Methods are organized into three categories: Mutating methods that change
the original array (such as push, pop, splice, sort, and
reverse), Non-Mutating methods that return new values without touching
the source (such as map, filter, reduce, find, slice,
toSorted, and with), and Static methods on the Array constructor
itself (Array.from, Array.of, Array.isArray). Each card clearly
indicates whether the method mutates the array, so you can write safer,
more predictable code -- especially important in React and other
state-driven frameworks.
The built-in "Which method should I use?" decision helper lets you describe what you want to do (add elements, remove elements, transform, search, sort, etc.) and instantly see the recommended methods with explanations of when to use each one.
All processing runs entirely in your browser. No data is sent to any server, no accounts or signups are required, and the tool works offline once loaded. If you work with JSON data, check out the JSON Formatter for formatting and validation. For TypeScript-specific utilities, the JSON to TypeScript converter generates type definitions from sample data.
How to Use
- Use the search bar at the top to find a method by name, description, or use case (e.g., type "sort", "remove", or "immutable").
- Click a category tab (All, Mutating, Non-Mutating, Static) to filter the list.
- Click the "Which method?" button to open the decision helper -- pick what you want to do and get recommended methods.
- Click any method card to expand it and see the full syntax, parameters, return value, visual diagram, and code example.
- Click Copy on a code example to copy it to your clipboard, or use Ctrl+Shift+C to copy the currently expanded method's code.
- Look for the Mutates (red) or Pure (green) badge on each card to know whether the method modifies the original array.
- Check the Performance section at the bottom of each card for Big-O complexity and optimization tips.
Popular Array Method Examples
FAQ
Is my data safe when using this tool?
Yes. This tool is a static reference that runs entirely in your browser. There is no user input sent anywhere -- all method data, examples, and diagrams are bundled into the page. No servers are contacted, no data is logged.
What is the difference between mutating and non-mutating methods?
Mutating methods (like push, pop, sort, reverse, splice) change the original array in place. Non-mutating methods (like map, filter, slice, toSorted, with) return a new array or value, leaving the original unchanged. In frameworks like React, you should generally prefer non-mutating methods to avoid unintended side effects in state.
What are the ES2023 array methods?
ES2023 (ECMAScript 2023) introduced four new non-mutating array methods: toSorted() (immutable sort), toReversed() (immutable reverse), toSpliced() (immutable splice), and with() (immutable element replacement). These are supported in all modern browsers as of 2024.
When should I use reduce vs map + filter?
Use map when you want to transform every element 1-to-1. Use filter when you want to remove elements based on a condition. Use reduce when you need to accumulate a single value (like a sum, grouped object, or custom data structure). While reduce can replicate map and filter, chaining map().filter() is usually more readable.
Why does sort() without a compare function sort numbers incorrectly?
By default, sort() converts elements to strings and compares them by UTF-16 code unit values. So [10, 1, 21, 2].sort() gives [1, 10, 2, 21] because '10' comes before '2' alphabetically. Always pass a compare function for numeric sorting: .sort((a, b) => a - b).
What is the difference between find and filter?
find() returns the first element that matches and stops searching (short-circuits). filter() returns ALL elements that match as a new array. Use find when you need one result; use filter when you need all matches.
How do I copy code examples from this tool?
Click the Copy button next to any code example, or expand a method and press Ctrl+Shift+C to copy its code to your clipboard.