Array Methods You Must Know
Arrays are one of the most important parts of JavaScript.
Whenever you work with:
Lists of users
Products
Messages
Scores
Tasks
…you’ll probably use arrays.
JavaScript provides built-in array methods that make working with data much easier and cleaner.
In this blog, you’ll learn the most important array methods every beginner should know.
Why Array Methods Matter
Imagine manually looping through arrays every time you want to:
Add an item
Remove an item
Transform data
Filter data
Calculate totals
That becomes repetitive very quickly.
Array methods help you:
Write cleaner code
Reduce bugs
Think more clearly
Work faster
1. push() — Add Item to End
push() adds one or more items to the end of an array.
Example
let fruits = ["apple", "banana"];
fruits.push("orange");
console.log(fruits);
Output
["apple", "banana", "orange"]
Before vs After
| Before | Action | After |
|---|---|---|
["apple", "banana"] |
push("orange") |
["apple", "banana", "orange"] |
2. pop() — Remove Item from End
pop() removes the last item from an array.
Example
let fruits = ["apple", "banana", "orange"];
fruits.pop();
console.log(fruits);
Output
["apple", "banana"]
Before vs After
| Before | Action | After |
|---|---|---|
["apple", "banana", "orange"] |
pop() |
["apple", "banana"] |
3. shift() — Remove First Item
shift() removes the first item from an array.
Example
let colors = ["red", "blue", "green"];
colors.shift();
console.log(colors);
Output
["blue", "green"]
4. unshift() — Add Item to Beginning
unshift() adds items to the start of an array.
Example
let colors = ["blue", "green"];
colors.unshift("red");
console.log(colors);
Output
["red", "blue", "green"]
5. forEach() — Run Code for Every Item
forEach() loops through an array and performs an action for each item.
Example
let numbers = [1, 2, 3];
numbers.forEach(function(num) {
console.log(num);
});
Output
1
2
3
Traditional for Loop vs forEach()
Traditional Loop
let numbers = [1, 2, 3];
for(let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
Using forEach()
numbers.forEach(function(num) {
console.log(num);
});
forEach() is:
Cleaner
Easier to read
Less repetitive
6. map() — Transform Every Item
map() creates a new array by changing each item.
This is one of the most useful array methods in JavaScript.
Example: Double Numbers
let numbers = [1, 2, 3];
let doubled = numbers.map(function(num) {
return num * 2;
});
console.log(doubled);
Output
[2, 4, 6]
Before vs After
| Original Array | map() Result |
|---|---|
[1, 2, 3] |
[2, 4, 6] |
How map() Works
[1, 2, 3]
↓
Multiply each by 2
↓
[2, 4, 6]
Traditional Loop vs map()
Traditional Loop
let numbers = [1, 2, 3];
let doubled = [];
for(let i = 0; i < numbers.length; i++) {
doubled.push(numbers[i] * 2);
}
console.log(doubled);
Using map()
let doubled = numbers.map(function(num) {
return num * 2;
});
Much shorter and easier to understand.
7. filter() — Keep Matching Items
filter() creates a new array containing only items that match a condition.
Example: Numbers Greater Than 10
let numbers = [5, 12, 8, 20];
let result = numbers.filter(function(num) {
return num > 10;
});
console.log(result);
Output
[12, 20]
Before vs After
| Original Array | filter() Result |
|---|---|
[5, 12, 8, 20] |
[12, 20] |
How filter() Works
[5, 12, 8, 20]
↓
Keep numbers > 10
↓
[12, 20]
Traditional Loop vs filter()
Traditional Loop
let numbers = [5, 12, 8, 20];
let result = [];
for(let i = 0; i < numbers.length; i++) {
if(numbers[i] > 10) {
result.push(numbers[i]);
}
}
Using filter()
let result = numbers.filter(function(num) {
return num > 10;
});
Cleaner and easier to maintain.
8. reduce() — Combine Array Into One Value
reduce() takes all array items and combines them into a single value.
This can be:
A total sum
A product
A count
A final result
Beginner-Friendly Example: Sum of Numbers
let numbers = [1, 2, 3, 4];
let total = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
console.log(total);
Output
10
Understanding reduce()
Step-by-Step
Start: 0
0 + 1 = 1
1 + 2 = 3
3 + 3 = 6
6 + 4 = 10
Final Answer = 10
The accumulator stores the running total.
Why reduce() Feels Difficult Initially
Many beginners find reduce() confusing because:
It introduces an accumulator
It combines looping + calculation together
That’s normal.
Start with simple examples like:
Sum of numbers
Total marks
Shopping cart totals
Once comfortable, it becomes extremely powerful.
Important Thing to Remember
Methods like:
map()filter()reduce()
usually create new arrays or values instead of changing the original array.
Example:
let numbers = [1, 2, 3];
let doubled = numbers.map(num => num * 2);
console.log(numbers);
Output
[1, 2, 3]
The original array stays unchanged.
Practice in Browser Console
The best way to learn array methods is to try them yourself.
Open:
Chrome DevTools Console
Firefox Console
VS Code Terminal
Node.js
…and experiment with examples.
Change values and observe outputs.
That’s how these methods become natural.
Assignment Practice
Step 1: Create an Array
let numbers = [2, 5, 8, 12, 15];
Step 2: Use map() to Double Each Number
Expected Result:
[4, 10, 16, 24, 30]
Step 3: Use filter() to Get Numbers Greater Than 10
Expected Result:
[12, 15]
Step 4: Use reduce() to Calculate Total Sum
Expected Result:
42
Visual Diagram: How map() Works
Original Array
[1, 2, 3, 4]
↓ map()
Multiply each item by 2
↓
New Array
[2, 4, 6, 8]
Visual Diagram: How filter() Works
Original Array
[5, 12, 8, 20]
↓ filter()
Condition:
Keep numbers > 10
↓
New Array
[12, 20]
Visual Diagram: How reduce() Works
[1, 2, 3, 4]
Start accumulator = 0
0 + 1 = 1
1 + 2 = 3
3 + 3 = 6
6 + 4 = 10
Final Value = 10
Final Thoughts
Array methods are one of the biggest reasons JavaScript feels powerful and modern.
Start by mastering:
push()pop()shift()unshift()forEach()map()filter()reduce()
These methods appear everywhere in:
React
Node.js
APIs
Real-world projects
Interview questions
Don’t just read them — run the examples yourself.
That’s where real learning happens.