Array Methods You Must Know
When I started learning JavaScript arrays, I thought they were just a way to store multiple values. But after practicing more, I realized the real power of arrays comes from the methods we can use on them.
These methods make our code cleaner, shorter, and much easier to understand.
In this article, we’ll look at some important array methods every beginner should know:
push()
pop()
shift()
unshift()
map()
filter()
reduce()
forEach()
I’ll keep everything simple and practical.
Why Array Methods Matter
An array can store many values in one place.
let numbers = [1, 2, 3, 4, 5];
But just storing values is not enough. In real programs, we often want to:
add items
remove items
change items
create a new array
find matching values
calculate totals
That is where array methods help us.
push() and pop()
These methods work at the end of an array.
push()
push() adds a new value to the end of an array.
let fruits = ["apple", "banana"]; fruits.push("mango"); console.log(fruits);
Output:
["apple", "banana", "mango"]
Before:
["apple", "banana"]
After:
["apple", "banana", "mango"]
pop()
pop() removes the last value from an array.
let fruits = ["apple", "banana", "mango"]; fruits.pop(); console.log(fruits);
Output:
["apple", "banana"]
Before:
["apple", "banana", "mango"]
After:
["apple", "banana"]
A simple way I remember it is:
push() adds to the end
pop() removes from the end
shift() and unshift()
These methods work at the beginning of an array.
unshift()
unshift() adds a new value to the beginning of an array.
let colors = ["blue", "green"]; colors.unshift("red"); console.log(colors);
Output:
["red", "blue", "green"]
shift()
shift() removes the first value from an array.
let colors = ["red", "blue", "green"]; colors.shift(); console.log(colors);
Output:
["blue", "green"]
A simple way to remember these is:
unshift() adds to the beginning
shift() removes from the beginning
forEach()
When I first started looping through arrays, I used for loops for everything. That works, but forEach() often feels cleaner when we want to do something with each item.
forEach() runs a function once for every element in the array.
let numbers = [1, 2, 3]; numbers.forEach(function(num) { console.log(num); });
Output:
1 2 3
This is useful when we just want to print values or perform an action on each item.
Traditional for loop vs forEach()
Using a for loop:
let numbers = [1, 2, 3]; for (let i = 0; i < numbers.length; i++) { console.log(numbers[i]); }
Using forEach():
let numbers = [1, 2, 3]; numbers.forEach(function(num) { console.log(num); });
Both work, but forEach() feels more readable for simple tasks.
map()
map() is one of the most useful array methods.
It creates a new array by changing each element of the original array.
Let’s say I want to double every number in an array.
let numbers = [1, 2, 3, 4]; let doubled = numbers.map(function(num) { return num * 2; }); console.log(doubled);
Output:
[2, 4, 6, 8]
Original array:
[1, 2, 3, 4]
New array:
[2, 4, 6, 8]
The original array stays the same.
How map() Works
Original array -> [1, 2, 3, 4] | v Multiply each value by 2 | v New array -> [2, 4, 6, 8]
So map() is useful when we want to transform each value.
filter()
filter() is used when we want to keep only the values that match a condition.
For example, if I want numbers greater than 10:
let numbers = [5, 12, 8, 20, 3]; let greaterThanTen = numbers.filter(function(num) { return num > 10; }); console.log(greaterThanTen);
Output:
[12, 20]
Original array:
[5, 12, 8, 20, 3]
New array:
[12, 20]
How filter() Works
Original array -> [5, 12, 8, 20, 3] | v Check: is value > 10? | v Keep only matching values | v New array -> [12, 20]
So filter() is useful when we want to select specific values from an array.
map() vs filter()
This difference helped me a lot when I was learning.
map() changes every item and returns a new array
filter() checks every item and returns only matching items
Example
let numbers = [1, 2, 3, 4];
Using map():
let doubled = numbers.map(function(num) { return num * 2; }); console.log(doubled); // [2, 4, 6, 8]
Using filter():
let evenNumbers = numbers.filter(function(num) { return num % 2 === 0; }); console.log(evenNumbers); // [2, 4]
reduce()
When I first saw reduce(), it looked harder than the other methods. But at a beginner level, we can think of it in a simple way:
reduce() takes all the values in an array and reduces them to one final value.
A common example is finding the total sum.
let numbers = [1, 2, 3, 4]; let total = numbers.reduce(function(accumulator, currentValue) { return accumulator + currentValue; }, 0); console.log(total);
Output:
10
Beginner-Friendly Meaning
In this example:
accumulator keeps the running total
currentValue is the current number
0 is the starting value
Simple Visual for reduce()
Start with 0 0 + 1 = 1 1 + 2 = 3 3 + 3 = 6 6 + 4 = 10
Final result:
10
That is why reduce() is useful for totals and combined results.
Assignment Practice
Let’s do the assignment idea step by step.
Create an Array of Numbers
let numbers = [5, 10, 15, 20];
Use map() to Double Each Number
let doubledNumbers = numbers.map(function(num) { return num * 2; }); console.log(doubledNumbers);
Output:
[10, 20, 30, 40]
Use filter() to Get Numbers Greater Than 10
let greaterThanTen = numbers.filter(function(num) { return num > 10; }); console.log(greaterThanTen);
Output:
[15, 20]
Use reduce() to Calculate the Total Sum
let totalSum = numbers.reduce(function(accumulator, currentValue) { return accumulator + currentValue; }, 0); console.log(totalSum);
Output:
50
Quick Revision Table
| Method | What it does |
|---|---|
| push() | Adds an item to the end |
| pop() | Removes the last item |
| unshift() | Adds an item to the beginning |
| shift() | Removes the first item |
| forEach() | Runs a function for each item |
| map() | Creates a new array by changing each item |
| filter() | Creates a new array with matching items |
| reduce() | Reduces the array to one value |
Easy Way to Remember
This is the simple way I remember them:
push() -> add at end
pop() -> remove from end
unshift() -> add at start
shift() -> remove from start
forEach() -> do something for every item
map() -> transform each item
filter() -> keep matching items
reduce() -> combine everything into one result
Final Thoughts
When I started using array methods, JavaScript arrays became much more interesting. Instead of writing long loops again and again, I could solve many problems with cleaner and more readable code.
If you are a beginner, don’t try to memorize everything in one go. Open the console, create a small array, and try each method one by one. That is the best way to understand them.
Once these methods become familiar, working with arrays in JavaScript feels much easier and much more fun.
