Home › Code Snippets › JavaScript Snippets › Array Methods

JavaScript Snippet

JavaScript Array Methods

Every essential array method with live examples you can run in your browser.

Last updated: October 2026

Quick answer: Use map to transform, filter to select, reduce to aggregate, find to search for one, some to check if any match, and every to check if all match. All of these return new arrays or values — they do not mutate the original.

🎬 Interactive Live Demo

Click any method to see it run against the sample data in real time.

💡 Click each method to see what it returns. The description explains exactly what happened.

map() — Transform Every Element

Creates a new array by applying a function to each element:

const prices = [100, 200, 300];
const withTax = prices.map(p => p * 1.1);
// [110, 220, 330]

const users = [{ name: "Alice" }, { name: "Bob" }];
const names = users.map(u => u.name);
// ["Alice", "Bob"]

Same length as the original. Always returns a new array — never mutates.

filter() — Select Matching Elements

const products = [
    { name: "Laptop", price: 1200, inStock: true },
    { name: "Monitor", price: 350, inStock: false },
    { name: "Mouse", price: 25, inStock: true }
];

const inStock = products.filter(p => p.inStock);
// [{ name: "Laptop", ... }, { name: "Mouse", ... }]

const expensive = products.filter(p => p.price > 1000);
// [{ name: "Laptop", ... }]

Result may be shorter than the original. Returns a new array — never mutates.

reduce() — Combine Into One Value

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((total, n) => total + n, 0);
// 15

// Group by property
const people = [
    { name: "Alice", role: "dev" },
    { name: "Bob", role: "designer" },
    { name: "Carol", role: "dev" }
];

const byRole = people.reduce((acc, person) => {
    (acc[person.role] ||= []).push(person.name);
    return acc;
}, {});
// { dev: ["Alice", "Carol"], designer: ["Bob"] }

The most flexible array method. Always pass an initial value to avoid edge cases with empty arrays.

find() vs filter() — One vs Many

const users = [
    { id: 1, name: "Alice", active: true },
    { id: 2, name: "Bob", active: false },
    { id: 3, name: "Carol", active: true }
];

// find — returns the first match
const first = users.find(u => u.active);
// { id: 1, name: "Alice", active: true }

// filter — returns all matches
const all = users.filter(u => u.active);
// [{ id: 1, name: "Alice", ... }, { id: 3, name: "Carol", ... }]

Use find when you need one result (faster — short-circuits). Use filter when you need all matches.

some() vs every() — Any vs All

const ages = [22, 25, 30, 18];

ages.some(a => a >= 21);  // true — at least one is 21+
ages.every(a => a >= 21); // false — the 18 breaks it

// Both short-circuit
const bigArray = [1, 2, 3, 999];
bigArray.some(n => n > 100);  // true — stops at 999
bigArray.every(n => n < 100); // false — stops at 999

Both return booleans. Both short-circuit for performance — they stop iterating as soon as the answer is known.

flat() and flatMap() — Flatten Nested Arrays

// flat — flatten by depth
[[1, 2], [3, 4], [5, 6]].flat();
// [1, 2, 3, 4, 5, 6]

[1, [2, [3, [4]]]].flat(2);
// [1, 2, 3, [4]]

[1, [2, [3, [4]]]].flat(Infinity);
// [1, 2, 3, 4]

// flatMap — map + flat in one step
const sentences = ["hello world", "foo bar"];
sentences.flatMap(s => s.split(" "));
// ["hello", "world", "foo", "bar"]

flatMap is map followed by flat(1) — useful for one-to-many transformations.

🎯 Array Methods Cheatsheet

Method	Returns	Mutates?
`map`	New array (same length)	No
`filter`	New array (subset)	No
`reduce`	Single value	No
`find`	Element or undefined	No
`some`	Boolean	No
`every`	Boolean	No
`flat`	New array (flattened)	No
`forEach`	undefined	No
`push / pop`	Length / Element	Yes
`splice`	Removed elements	Yes
`sort / reverse`	Same array	Yes

⚠️ Common Mistakes

Using map when you don't need the result. If you're not using the return value, use forEach instead.
Using find when you need all matches. find returns only the first. Use filter if you need multiple.
Forgetting the initial value in reduce. Always pass one — otherwise empty arrays throw and non-empty arrays use the first element as the seed.
Assuming sort() doesn't mutate. It does. Copy first with [...arr].sort().
Comparing arrays with ===. Arrays are compared by reference, not value. Use JSON.stringify or a custom comparison.
Chaining methods that return different types. .map().filter() is fine. .find().filter() fails if find returns an object without filter.

❓ Frequently Asked Questions

What is the difference between map and forEach?

map returns a new array with transformed elements. forEach returns undefined and is used for side effects. Use map when you need the result, forEach when you just need to iterate.

What is the difference between filter and find?

filter returns a new array with all matching elements. find returns the first matching element (or undefined). Use filter for multiple results, find for a single result.

When should I use reduce?

Use reduce when you need to combine all array elements into a single value — a sum, an object, a string, or another array. It is the most flexible array method but also the hardest to read.

What is the difference between some and every?

some returns true if at least one element passes a test. every returns true only if all elements pass. Both short-circuit as soon as the result is determined.

Do array methods mutate the original array?

map, filter, reduce, find, some, every, and flat all return new arrays or values — they do not mutate. Methods that do mutate include push, pop, shift, unshift, splice, sort, and reverse.