JavaScript Array Methods for Beginners
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.
Arrays are one of the most important parts of JavaScript.
They help us store multiple values in a single variable, and once you start working with arrays, you quickly realize that you need easy ways to add items, remove items, loop through them, transform them, and calculate results from them.
That is where JavaScript array methods become very useful.
In this blog, we will understand these beginner-friendly array methods:
push()andpop()shift()andunshift()map()filter()reduce()forEach()
We will keep the examples simple, practical, and beginner-friendly.
We will also see:
before and after array state
traditional
forloop vsmap()traditional
forloop vsfilter()a very basic explanation of
reduce()small text-based diagrams using plain Markdown
a practice assignment at the end
Let’s begin.
Why learn array methods?
Imagine you have an array of:
marks
product prices
student names
tasks
cart items
You may want to:
add a new value
remove a value
print each value
create a modified version of the array
select only certain values
calculate the total sum
Array methods help us do all of this in a cleaner and easier way.
push() — Add an 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"]
Before and after
Before: ["apple", "banana"]
After: ["apple", "banana", "mango"]
Practical example
Suppose you are building a to-do list app. When a user adds a new task, you can use push().
let tasks = ["Study JavaScript", "Practice coding"];
tasks.push("Revise arrays");
console.log(tasks);
Output
["Study JavaScript", "Practice coding", "Revise arrays"]
pop() — Remove an 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"]
Before and after
Before: ["apple", "banana", "mango"]
After: ["apple", "banana"]
Practical example
You can think of pop() like removing the most recent item from a list.
unshift() — Add an 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"]
Before and after
Before: ["blue", "green"]
After: ["red", "blue", "green"]
Practical example
This is useful when you want to add the newest item at the top, like a latest notification.
shift() — Remove an 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"]
Before and after
Before: ["red", "blue", "green"]
After: ["blue", "green"]
Practical example
This is useful in queue-like situations where the first item should be removed first.
forEach() — Do something for every element
The forEach() method runs a function once for every element in the array.
It is useful when you want to perform an action like printing values.
Example
let numbers = [10, 20, 30];
numbers.forEach(function(num) {
console.log(num);
});
Output
10
20
30
Practical example
Suppose you want to greet every student in an array.
let students = ["Aman", "Riya", "Kunal"];
students.forEach(function(student) {
console.log("Welcome " + student);
});
Output
Welcome Aman
Welcome Riya
Welcome Kunal
Important point
forEach() is used when you want to do something with each item.
It does not create a new array like map().
map() — Create a new array by changing each element
The map() method creates a new array by applying a function to every element of the original array.
This is very useful when you want to transform data.
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 returns a new array
every item gets transformed
Before and after
Original array: [1, 2, 3, 4]
New array: [2, 4, 6, 8]
Practical example
Suppose you want to increase every product price by 10.
let prices = [100, 200, 300];
let updatedPrices = prices.map(function(price) {
return price + 10;
});
console.log(updatedPrices);
Output
[110, 210, 310]
Visualizing map()
map() takes every value, transforms it, and puts the result into a new array.
Original array: [1, 2, 3]
1 ──> 2
2 ──> 4
3 ──> 6
New array: [2, 4, 6]
Another simple view
[1, 2, 3]
↓
Pick 1 → transform it → add to new array
Pick 2 → transform it → add to new array
Pick 3 → transform it → add to new array
↓
[2, 4, 6]
Traditional for loop vs map()
Let us compare both approaches.
Using a traditional 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():
the code is shorter
the purpose is easier to read
it clearly shows that we are transforming data
If your goal is to create a changed version of every element, map() is usually a great choice.
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 creates a new array
only matching values stay in the new array
Before and after
Original array: [5, 12, 8, 20, 3]
New array: [12, 20]
Practical example
Suppose you want only the students who passed.
let marks = [35, 80, 25, 90, 40];
let passed = marks.filter(function(mark) {
return mark >= 40;
});
console.log(passed);
Output
[80, 90, 40]
Visualizing filter()
filter() checks every value and only keeps the ones that match the condition.
Original array: [5, 12, 8, 20]
Condition: value > 10
5 ──> skip
12 ──> keep
8 ──> skip
20 ──> keep
New array: [12, 20]
Another simple view
[5, 12, 8, 20]
↓
Check 5 → does not match
Check 12 → matches
Check 8 → does not match
Check 20 → matches
↓
[12, 20]
Traditional for loop vs filter()
Using a traditional 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 becomes very clear:
we are selecting only the values that match a condition.
reduce() — Turn the whole array into one final value
The reduce() method takes all elements of an array and combines them into a single result.
That final result can be:
a total sum
a total price
a count
one final value
For beginners, the easiest use case is finding the total sum.
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 array element0is the starting value
So the calculation happens like this:
Start with accumulator = 0
0 + 10 = 10
10 + 20 = 30
30 + 30 = 60
Final result: 60
Practical example
Suppose you want to calculate the total bill of products in a cart.
let cartPrices = [199, 299, 499];
let totalBill = cartPrices.reduce(function(total, price) {
return total + price;
}, 0);
console.log(totalBill);
Output
997
Visualizing reduce()
reduce() combines all values into one final result.
Array: [10, 20, 30]
acc = 0
acc + 10 = 10
acc + 20 = 30
acc + 30 = 60
Final result = 60
Another simple view
[10, 20, 30]
↓
acc = 0
acc = acc + 10 → 10
acc = acc + 20 → 30
acc = acc + 30 → 60
↓
Final result = 60
Keep this in mind
At first, reduce() may feel a little confusing.
That is normal.
Start by practicing only sum-related examples. Once that becomes easy, you can explore more advanced cases later.
Quick summary of before and after array states
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 one by one
When should you use which method?
Use:
push()when you want to add an item at the endpop()when you want to remove an item from the endunshift()when you want to add an item at the beginningshift()when you want to remove an item from the beginningforEach()when you want to perform an action on every itemmap()when you want to transform every item into a new arrayfilter()when you want only the items that match a conditionreduce()when you want one final value from the whole array
Try these examples in the browser console
One of the best ways to learn JavaScript is by running examples yourself.
Open your browser console and try 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 try code on your own, the concepts become much easier to remember.
Mini assignment
Now it is your turn.
Step 1: Create an array of numbers
let numbers = [4, 7, 12, 15, 3];
Step 2: Use map() to double each number
Expected result:
[8, 14, 24, 30, 6]
Step 3: Use filter() to get numbers greater than 10
Expected result:
[12, 15]
Step 4: Use reduce() to calculate the total sum
Expected result:
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
JavaScript array methods make your code cleaner, shorter, and easier to understand.
If you are just starting out, focus on understanding these three things for each method:
what it does
whether it changes the original array or creates a new one
when to use it in a real problem
A good order for beginners is:
push()andpop()shift()andunshift()forEach()map()filter()reduce()
Also, avoid method chaining in the beginning.
First become comfortable using one method at a time.
Once the basics are clear, you will find arrays much easier to work with in JavaScript.
Quick challenge
Take this array:
let nums = [1, 5, 10, 20];
Try to do these on your own:
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
Try them in your console before looking at any answer.
Conclusion
Array methods are a big step toward writing better JavaScript.
At first, some of them may look confusing, especially map(), filter(), and reduce(). But with a little practice, they become very natural.
Keep experimenting with small arrays, run examples in the console, and try changing the values yourself.
That is the fastest way to learn.