JavaScript arrays are one of the most used data structures in web development. If you understand a few core array methods, your code becomes shorter, cleaner, and easier to read.
In this article we will learn the most important array methods every beginner should know:
push() and pop()
shift() and unshift()
map()
filter()
reduce() (basic idea)
forEach()
Every method will include:
You should try the examples in your browser console as you read.
Prerequisites
Before reading this article you should know:
Example array:
const numbers = [2, 5, 8, 12];
Quick Overview of Methods
| Method |
What it does |
| push() |
Adds item to the end |
| pop() |
Removes last item |
| shift() |
Removes first item |
| unshift() |
Adds item to the beginning |
| map() |
Creates a new array by transforming values |
| filter() |
Creates a new array with selected values |
| reduce() |
Combines array values into a single result |
| forEach() |
Runs a function for each item |
push() and pop()
These methods modify the end of an array.
push()
Adds a new element to the end.
Example
let fruits = ["apple", "banana"];
fruits.push("mango");
console.log(fruits);
Before
["apple", "banana"]
After
["apple", "banana", "mango"]
pop()
Removes the last element from the array.
let fruits = ["apple", "banana", "mango"];
fruits.pop();
console.log(fruits);
Before
["apple", "banana", "mango"]
After
["apple", "banana"]
shift() and unshift()
These methods modify the beginning of the array.
shift()
Removes the first element.
let numbers = [10, 20, 30];
numbers.shift();
console.log(numbers);
Before
[10, 20, 30]
After
[20, 30]
unshift()
Adds a value at the start.
let numbers = [20, 30];
numbers.unshift(10);
console.log(numbers);
Before
[20, 30]
After
[10, 20, 30]
map()
map() creates a new array by transforming each element.
It does not modify the original array.
Example: Double each number
const numbers = [2, 5, 8];
const doubled = numbers.map(num => num * 2);
console.log(doubled);
Output
[4, 10, 16]
Original array remains:
[2, 5, 8]
How map works
flowchart LR
A[2] --> B[2 * 2 = 4]
C[5] --> D[5 * 2 = 10]
E[8] --> F[8 * 2 = 16]
Each value is transformed into a new value.
filter()
filter() creates a new array with only elements that pass a condition.
Example: Numbers greater than 10
const numbers = [5, 12, 8, 20];
const result = numbers.filter(num => num > 10);
console.log(result);
Output
[12, 20]
Original array stays the same.
How filter works
flowchart LR
A[5] --> B{>10?}
C[12] --> D{>10?}
E[8] --> F{>10?}
G[20] --> H{>10?}
B -->|No| X[Removed]
D -->|Yes| Y[Keep]
F -->|No| Z[Removed]
H -->|Yes| W[Keep]
reduce() (Beginner Explanation)
reduce() combines array values into a single result.
Common uses:
Sum of numbers
Total price
Counting items
Example: Calculate sum
const numbers = [2, 5, 8];
const total = numbers.reduce((sum, num) => sum + num, 0);
console.log(total);
Output
15
Explanation:
Start with 0
Add each number
Return final result
How reduce accumulates values
flowchart LR
A[Start: 0] --> B[0 + 2 = 2]
B --> C[2 + 5 = 7]
C --> D[7 + 8 = 15]
Final result = 15
forEach()
forEach() runs a function for every element in the array.
Unlike map(), it does not create a new array.
Example
const numbers = [1, 2, 3];
numbers.forEach(num => {
console.log(num);
});
Output
1
2
3
Traditional for Loop vs map() / filter()
Using a for loop
const numbers = [1, 2, 3, 4];
const doubled = [];
for (let i = 0; i < numbers.length; i++) {
doubled.push(numbers[i] * 2);
}
Using map()
const doubled = numbers.map(num => num * 2);
map() is shorter and easier to read.
Mini Practice Assignment
Try this in your console.
Step 1
Create an array:
const numbers = [5, 10, 15, 20];
Step 2 — Double numbers
Use map().
Expected result:
[10, 20, 30, 40]
Step 3 — Numbers greater than 10
Use filter().
Expected result:
[15, 20]
Step 4 — Calculate total
Use reduce().
Expected result:
50
Quick Cheat Sheet
| Method |
Returns New Array? |
Modifies Original? |
| push |
❌ |
✅ |
| pop |
❌ |
✅ |
| shift |
❌ |
✅ |
| unshift |
❌ |
✅ |
| map |
✅ |
❌ |
| filter |
✅ |
❌ |
| reduce |
❌ |
❌ |
| forEach |
❌ |
❌ |
Conclusion
Understanding array methods is a core JavaScript skill.
With just a few methods like map, filter, and reduce, you can write cleaner and more powerful code.
Instead of writing long loops, you can transform and process data with simple readable functions.
If you're learning JavaScript, practice these methods in the console and try building small examples yourself.
The more you use them, the more natural they will feel.
