When working with JavaScript, arrays are everywhere. They store lists of items like numbers, names, tasks, or products. But storing data is just the beginning. We often need to add items, remove items, change values, or filter data.
JavaScript has built-in array methods that simplify these tasks.
In this article, we will explore some of the most useful array methods with simple examples:
push() and pop()
shift() and unshift()
map()
filter()
reduce()
forEach()
You can try all examples directly in your browser console or Node.js.
Lets first understand the methods which are used to add or remove the data in an array:
push()
The push() method adds a new element to the end of an array.
Example:
let fruits = ["Apple", "Banana"];
const newLength = fruits.push("Mango");
console.log(newLength) // 3
console.log(fruits); // ["Apple","Banana","Mango"]
It returns the updated length of array.
Push is generally used when adding a new item to a list, such as adding a task to a to-do list.
pop()
The pop() is used to remove the last element from the array.
Example:
const items = ["Shoe", "Tshirt", "Trouser"];
const popItem = items.pop();
console.log(popItem); // 'Trouser'
console.log(items); // ["Shoe", "Tshirt"]
It returns the element that is removed.
shift()
The shift() method removes the first element of an array.
Example:
const items = ["Shoe", "Tshirt", "Trouser"];
const shiftItem = items.shift();
console.log(shiftItem); // "Shoe"
console.log(items); // ["Tshirt", "Trouser"]
It returns the item which is removed. This works same as Queues in real life
unshift()
The unshift() method adds an item to the start of the array.
Example:
const items = ["Shoe", "Tshirt", "Trouser"];
const popItem = items.unshift("Shirt");
console.log(popItem); // 4
console.log(items); // [ 'Shirt', 'Shoe', 'Tshirt', 'Trouser' ]
It returns the new length of the array.
Let's understand the methods that are used to perform iteration (loop) on an array
forEach()
forEach() is used to perform an action on each element of an array.
It accepts a callback function that accepts three arguments, provided by forEach itself.
forEach() runs a function for every item in the array.
Example:
const numbers = [1, 2, 3]
numbers.forEach((num) => {
console.log(num);
});
Output:
1
2
3
Traditional Loop vs forEach()
for loop:
let numbers = [1, 2, 3];
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
vs
forEach:
let numbers = [1, 2, 3];
numbers.forEach(function(num) {
console.log(num);
});
As we can see in the above example, forEach is more cleaner and easier to read and use.
map()
map() creates a new array by updating each element based on the logic inside the callback.
Assume map() to be turning a crate of fruit into a crate of juices.
The number of juice will remain same as the number of fruits.
It accepts a callback function that accepts three arguments, provided by map itself.
Example:
const numbers = [1, 2, 3];
const doubledNumbers = numbers.map((num) => {
return num * 2;
});
console.log(doubledNumbers);
Output: [2, 4, 6] // updated values
console.log(numbers);
Output: [1, 2, 3] // remains same
map() returns an updated elements array. Also, it doesn't update the original array.
filter()
filter() creates a new array that only includes elements that satisfy the condition inside the callback function.
It accepts a callback function that accepts three arguments, provided by filter itself.
Example:
const numbers = [3, 7, 10, 2];
const filteredNumbers = numbers.filter((num) => {
if(num > 5){
return true;
}
return false;
});
console.log(filtersNumbers);
Output: [7, 10]
So, returned array only includes those values for which callback return true.
How filter() work?
Here:
For 3, the callback returns false. filteredNumbers doesn't contain 3
For 7, the callback returns true. filteredNumbers contain 7
For 10, the callback returns true. filteredNumbers contain 10
For 2, the callback returns false. filteredNumbers doesn't contain 2
reduce()
reduce() combines all values of an array into a single value.
Reduce is like combining flour, eggs, and sugar to bake one single cake.
Common use cases include:
total sum
calculating totals
combining data
Example:
let numbers = [5, 10, 20];
let total = numbers.reduce((accumulator, value) => {
return accumulator + value;
}, 0);
console.log(total);
Output: 35
Returns the single value after the final calculation.
How reduce() works?
Sometimes, reduce is very confusing for beginners.
| value |
accumulator |
calculation |
initialValue |
| 5 |
0 |
0 + 5 = 5 |
5 |
| 10 |
5 |
5 + 10 = 15 |
15 |
| 20 |
15 |
15 + 20 = 35 |
35 |
Visual Idea for reduce()
[5, 10, 15]
Step 1 → 0 + 5 = 5
Step 2 → 5 + 10 = 15
Step 3 → 15 + 15 = 30
Final Result = 30
Assignment for Practice
Try this in your browser console.
Try map()
Create an array
Double each number using map()
Console the output and observe by updating the array.
Try filter()
Apply filter() method on map() output
Filter numbers greater than 10
Try reduce()
Create an array
Add those numbers using reduce() method.
Check the output and retry after updating the values and number of values in array.
Final Thoughts
Array methods make JavaScript more powerful and readable.
Instead of writing long loops, you can use:
These methods are commonly used in modern JavaScript, React, and backend development.
The best way to learn them is simple: open your console and experiment with them.
Follow Javascript Series to learn more!
