JavaScript Array Methods for Beginners: push(), pop(), shift(), unshift(), map(), filter(), reduce(), and forEach()
Software Developer passionate about building scalable backend systems and real-world products. I write about what I learn while working with different aspects of the systems and thier designs, focusing on clarity, performance, and practical engineering.
When you start learning JavaScript, arrays quickly become part of everyday coding.
You use arrays to store lists of numbers, names, products, tasks, and much more. But just storing data is not enough — you also need ways to add, remove, update, and process that data.
That is where JavaScript array methods become super useful.
In this blog, we will understand some of the most beginner-friendly and commonly used array methods:
push()andpop()shift()andunshift()map()filter()reduce()forEach()
I’ll explain each one with simple practical examples, show the array state before and after, and also compare traditional for loops with map() and filter().
Let’s begin.
Why learn array methods?
Imagine you have a list of marks, product prices, or student names.
You may want to:
add a new item
remove the last item
remove the first item
update every value
select only some values
calculate a total
print each value one by one
Array methods make these tasks much easier and cleaner.
push() — Add element to the end
The push() method adds one or more elements to the end of an array.
Example
let fruits = ["apple", "banana"];
console.log("Before:", fruits);
fruits.push("mango");
console.log("After:", fruits);
Output
Before: ["apple", "banana"]
After: ["apple", "banana", "mango"]
Practical use case
Suppose you are building a to-do app and a user adds a new task.
You can use push() to add that task at the end of the list.
let tasks = ["Study JS", "Practice coding"];
tasks.push("Revise arrays");
console.log(tasks);
["Study JS", "Practice coding", "Revise arrays"]
pop() — Remove element from the end
The pop() method removes the last element from an array.
Example
let fruits = ["apple", "banana", "mango"];
console.log("Before:", fruits);
fruits.pop();
console.log("After:", fruits);
Output
Before: ["apple", "banana", "mango"]
After: ["apple", "banana"]
Practical use case
You can think of this like removing the latest item from a cart or undoing the last step in a list.
unshift() — Add element to the beginning
The unshift() method adds one or more elements to the beginning of an array.
Example
let colors = ["blue", "green"];
console.log("Before:", colors);
colors.unshift("red");
console.log("After:", colors);
Output
Before: ["blue", "green"]
After: ["red", "blue", "green"]
Practical use case
This is useful when you want the newest item to appear first, like showing the latest notification at the top.
shift() — Remove element from the beginning
The shift() method removes the first element from an array.
Example
let colors = ["red", "blue", "green"];
console.log("Before:", colors);
colors.shift();
console.log("After:", colors);
Output
Before: ["red", "blue", "green"]
After: ["blue", "green"]
Practical use case
This can be helpful when processing a queue, where the first item should be removed first.
forEach() — Do something for every element
The forEach() method runs a function for each element of an array.
It is mainly used when you want to loop through the array and perform an action, like printing values.
Example
let numbers = [10, 20, 30];
numbers.forEach(function(num) {
console.log(num);
});
Output
10
20
30
Practical use case
If you want to display every username or print every score, forEach() is very handy.
let students = ["Aman", "Riya", "Kunal"];
students.forEach(function(student) {
console.log("Welcome " + student);
});
Output
Welcome Aman
Welcome Riya
Welcome Kunal
Important point
forEach() is great for doing something with each item, but it does not return a new transformed array like map().
map() — Create a new array by transforming each element
The map() method creates a new array by applying a function to every element of the original array.
This is one of the most useful methods in JavaScript.
Example
let numbers = [1, 2, 3, 4];
console.log("Original:", numbers);
let doubled = numbers.map(function(num) {
return num * 2;
});
console.log("New array:", doubled);
console.log("Original after map:", numbers);
Output
Original: [1, 2, 3, 4]
New array: [2, 4, 6, 8]
Original after map: [1, 2, 3, 4]
What to notice?
map()does not change the original arrayit creates a brand new array
each element gets transformed
Practical example
Suppose you have product prices and want to apply a 10 rupee increase to each price.
let prices = [100, 200, 300];
let updatedPrices = prices.map(function(price) {
return price + 10;
});
console.log(updatedPrices);
[110, 210, 310]
Traditional for loop vs map()
Let’s compare both.
Using for loop
let numbers = [1, 2, 3, 4];
let doubled = [];
for (let i = 0; i < numbers.length; i++) {
doubled.push(numbers[i] * 2);
}
console.log(doubled);
Using map()
let numbers = [1, 2, 3, 4];
let doubled = numbers.map(function(num) {
return num * 2;
});
console.log(doubled);
Why map() feels cleaner
With map():
less code
easy to read
directly shows that you are transforming data
If your goal is “convert each item into something else,” map() is usually better.
filter() — Create a new array with selected elements
The filter() method creates a new array containing only the elements that match a condition.
Example
let numbers = [5, 12, 8, 20, 3];
console.log("Original:", numbers);
let greaterThanTen = numbers.filter(function(num) {
return num > 10;
});
console.log("Filtered:", greaterThanTen);
console.log("Original after filter:", numbers);
Output
Original: [5, 12, 8, 20, 3]
Filtered: [12, 20]
Original after filter: [5, 12, 8, 20, 3]
What to notice?
filter()does not change the original arrayit returns a new array
only elements that pass the condition stay in the new array
Practical example
Suppose you want to show only students who passed.
let marks = [35, 80, 25, 90, 40];
let passed = marks.filter(function(mark) {
return mark >= 40;
});
console.log(passed);
[80, 90, 40]
Traditional for loop vs filter()
Using for loop
let numbers = [5, 12, 8, 20, 3];
let result = [];
for (let i = 0; i < numbers.length; i++) {
if (numbers[i] > 10) {
result.push(numbers[i]);
}
}
console.log(result);
Using filter()
let numbers = [5, 12, 8, 20, 3];
let result = numbers.filter(function(num) {
return num > 10;
});
console.log(result);
Why filter() is better here
With filter(), the purpose is obvious:
we are selecting values based on a condition.
reduce() — Turn the whole array into a single value
The reduce() method is used when you want to take all array elements and combine them into one final result.
That final result can be:
a sum
a total price
a count
a single object
many other things
For beginners, the easiest example is finding the total sum of numbers.
Example
let numbers = [10, 20, 30];
let total = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
console.log(total);
Output
60
Beginner-friendly explanation
Inside reduce():
accumulatorstores the running resultcurrentValueis the current item from the array0is the starting value
So this happens step by step:
start with
00 + 10 = 1010 + 20 = 3030 + 30 = 60
Final result: 60
Simple real-life use case
Suppose you have shopping prices and want the total bill.
let cartPrices = [199, 299, 499];
let totalBill = cartPrices.reduce(function(total, price) {
return total + price;
}, 0);
console.log(totalBill);
997
Keep this in mind
At first, reduce() may feel a little confusing.
That is completely normal.
Start by using it only for total sum. Once you get comfortable, then explore more advanced uses.
Before and After Array State Summary
Here’s a quick recap of how these methods affect arrays.
push()
Before: ["a", "b"]
After: ["a", "b", "c"]
pop()
Before: ["a", "b", "c"]
After: ["a", "b"]
unshift()
Before: ["b", "c"]
After: ["a", "b", "c"]
shift()
Before: ["a", "b", "c"]
After: ["b", "c"]
map()
Original: [1, 2, 3]
New: [2, 4, 6]
filter()
Original: [5, 12, 8, 20]
New: [12, 20]
reduce()
Original: [10, 20, 30]
Result: 60
forEach()
Original: [1, 2, 3]
Action: prints each value
When should you use which method?
Use:
push()when you want to add to the endpop()when you want to remove from the endunshift()when you want to add to the beginningshift()when you want to remove from the beginningforEach()when you want to do something with each itemmap()when you want to transform every item into a new arrayfilter()when you want to keep only matching itemsreduce()when you want one final value from all items
Flowchart: How map() works
Original array: [1, 2, 3]
1 ──transform──> 2
2 ──transform──> 4
3 ──transform──> 6
New array: [2, 4, 6]
Flowchart: How filter() works
Original array: [5, 12, 8, 20]
Condition: value > 10
5 ──> No ──> skip
12 ──> Yes ──> keep
8 ──> No ──> skip
20 ──> Yes ──> keep
New array: [12, 20]
Simple visual for reduce() accumulating values
Array: [10, 20, 30]
Start with accumulator = 0
0 + 10 = 10
10 + 20 = 30
30 + 30 = 60
Final result: 60
Practice in browser console
The best way to learn these methods is to try them yourself.
Open your browser console and test small examples like this:
let nums = [2, 4, 6, 8];
nums.push(10);
console.log(nums);
let doubled = nums.map(function(n) {
return n * 2;
});
console.log(doubled);
let bigNums = nums.filter(function(n) {
return n > 5;
});
console.log(bigNums);
When you run code yourself, the concepts stay in your mind much better.
Mini assignment for you
Try this on your own.
Step 1: Create an array of numbers
let numbers = [4, 7, 12, 15, 3];
Step 2: Use map() to double each number
Expected idea:
[8, 14, 24, 30, 6]
Step 3: Use filter() to get numbers greater than 10
Expected idea:
[12, 15]
Step 4: Use reduce() to calculate total sum
Expected idea:
41
Full practice solution
let numbers = [4, 7, 12, 15, 3];
let doubled = numbers.map(function(num) {
return num * 2;
});
let greaterThanTen = numbers.filter(function(num) {
return num > 10;
});
let total = numbers.reduce(function(sum, num) {
return sum + num;
}, 0);
console.log("Original:", numbers);
console.log("Doubled:", doubled);
console.log("Greater than 10:", greaterThanTen);
console.log("Total sum:", total);
Final thoughts
Array methods are one of the most important parts of JavaScript.
If you are a beginner, focus first on understanding:
what each method does
whether it changes the original array or creates a new one
when to use it in real projects
A good learning order is:
push()/pop()shift()/unshift()forEach()map()filter()reduce()
Do not worry about chaining methods right now.
First become comfortable using each one individually.
Once these basics become clear, your JavaScript code will start looking much cleaner and more professional.
Quick challenge
Take this array:
let nums = [1, 5, 10, 20];
Try to do these yourself:
add
50at the endremove the first element
create a new array with all values tripled
create another array with only values greater than
10find the total sum
