Transformation
Use map to transform each element and return a new array.
Use filter to keep items that match a condition.
JavaScript Tutorial
JavaScript Array Methods
Array methods help you transform, filter, search, and aggregate data without manual loops.
Knowing the common methods makes your code shorter and easier to read.
Why We Need It
Most real-world data is list-based. Array methods are built for that.
They can replace long loops with clear, expressive logic.
Syntax
arr.map(fn)
arr.filter(fn)
arr.reduce(fn, initial)
arr.find(fn)
arr.sort(fn)Basic Example
1. map and filter
const nums = [1, 2, 3, 4];
const doubled = nums.map((n) => n * 2);
const evens = nums.filter((n) => n % 2 === 0);
console.log(doubled, evens);map transforms, filter selects.
Real World Example
2. reduce
const prices = [10, 20, 30];
const total = prices.reduce((sum, p) => sum + p, 0);
console.log(total);reduce collapses to a single value.
Multiple Use Cases
Searching
Use find to return the first match, and findIndex for its index.
Use every to confirm all items match a condition.
Aggregation
Use reduce to turn an array into a single value like a sum or object.
Use sort to order values, but remember it mutates the array.
Slicing and Flattening
Use slice to copy parts of an array without mutation.
Use splice for in-place changes and flat to reduce nested arrays.
More Examples
3. find and findIndex
const users = [{ id: 1 }, { id: 2 }];
const user = users.find((u) => u.id === 2);
const idx = users.findIndex((u) => u.id === 2);
console.log(user, idx);find returns the item, findIndex returns its position.
4. slice vs splice
const items = ["a", "b", "c", "d"];
const part = items.slice(1, 3);
items.splice(1, 1);
console.log(part, items);slice does not mutate; splice does.
Comparison
Without
const result = [];
for (const n of nums) {
if (n % 2 === 0) result.push(n * 2);
}With
const result = nums.filter((n) => n % 2 === 0).map((n) => n * 2);Common Mistakes and Fixes
Forgetting sort mutates
Clone the array first if you need the original.
Using map for side effects
Use forEach when you are not returning a new array.
Confusing slice and splice
slice copies, splice edits in place.
Interview Questions
What does map return?
A new array with transformed values.
What is reduce used for?
It combines elements into a single value.
Does sort mutate?
Yes, sort changes the original array.
Practice Problem
Practice: Use map and filter to double only the even numbers in an array.
const nums = [1, 2, 3, 4];
// TODO: return [4, 8]
One Possible Solution
const nums = [1, 2, 3, 4];
const result = nums.filter((n) => n % 2 === 0).map((n) => n * 2);
console.log(result);Frequently Asked Questions
Which methods are non-mutating?
map, filter, slice, and reduce return new values.
Which methods mutate?
push, pop, splice, and sort mutate the original array.
When should I use forEach?
When you need side effects like logging.
Try It Yourself
Try combining methods to see how arrays transform.