📋 Table of Contents
push() and pop() - Adding & Removing from the End
shift() and unshift() — Adding & Removing from the Start
map() — Transform Every Element
filter() — Keep Only What You Need
reduce() — Combine Into a Single Value
forEach() — Loop Through Every Element
Arrays are one of the most fundamental data structures in JavaScript. Nearly every real-world program uses them — whether you are storing a list of names, product prices, or user IDs. Knowing how to work with arrays efficiently is a core skill for any developer.
In this article, we will cover eight essential array methods. Each one is explained with a simple analogy, a practical code example, and a before/after view so you can clearly see what changes. At the end, there is an assignment to solidify everything you have learned.
💡 Pro Tip: Open your browser's developer console (press F12) and type every example yourself as you read. Reading alone is not enough — writing the code is what makes it stick.
1. push() and pop()
Works at the END of the array
push() adds one or more elements to the end of an array and returns the new length. pop() removes the last element from the array and returns it.
Think of a stack of plates. You place a new plate on top (push), and when you need one, you take it from the top (pop). The plates below remain undisturbed.
push() — Adding to the end
let fruits = ["apple", "banana"];
fruits.push("mango"); // adds "mango" to the end
fruits.push("grape"); // adds "grape" to the end
console.log(fruits);
// Output: ["apple", "banana", "mango", "grape"]
pop() — Removing from the end
let fruits = ["apple", "banana", "mango"];
let removed = fruits.pop(); // removes and returns the last element
console.log(removed); // "mango"
console.log(fruits); // ["apple", "banana"]
2. shift() and unshift()
Works at the START of the array
These two methods mirror push() and pop(), but they operate on the front of the array instead of the end.
unshift() adds one or more elements to the beginning of an array. shift() removes and returns the first element. Think of a line at a counter — a VIP guest cuts to the front (unshift), and the person at the very front gets served and leaves first (shift).
unshift() — Adding to the front
let queue = ["Alice", "Bob"];
queue.unshift("Zara"); // "Zara" is added to the front
console.log(queue);
// Output: ["Zara", "Alice", "Bob"]
shift() — Removing from the front
let queue = ["Zara", "Alice", "Bob"];
let first = queue.shift(); // removes and returns the first element
console.log(first); // "Zara"
console.log(queue); // ["Alice", "Bob"]
Here is a quick reference to keep all four methods straight:
| Method |
Position |
Action |
Returns |
push() |
End |
Add element(s) |
New array length |
pop() |
End |
Remove element |
The removed element |
unshift() |
Start |
Add element(s) |
New array length |
shift() |
Start |
Remove element |
The removed element |
3. map()
Transforms every element — returns a new array
map() creates a new array by applying a function to every element of the original array. The original array is never modified. The result always has the same number of elements as the input.
Think of it like a factory conveyor belt. Every item goes in, gets processed (doubled, formatted, renamed), and comes out the other side transformed. Nothing is skipped, nothing is added or removed.
Traditional for loop vs map()
let numbers = [1, 2, 3, 4, 5];
// ❌ Old way — for loop
let doubled1 = [];
for (let i = 0; i < numbers.length; i++) {
doubled1.push(numbers[i] * 2);
}
// ✅ New way — map()
let doubled2 = numbers.map(function(num) {
return num * 2;
});
console.log(doubled2); // [2, 4, 6, 8, 10]
console.log(numbers); // [1, 2, 3, 4, 5] — unchanged!
4. filter()
Keeps only elements that pass a test
filter() creates a new array containing only the elements that pass a given condition (return true). Elements that fail the condition are excluded. The original array is never modified.
Imagine a sieve — you pour in a mix of items, and only the ones that fit through the holes come out the other side. Everything else stays behind.
filter() — Getting numbers greater than 10
let numbers = [3, 15, 7, 22, 5, 18];
let bigNumbers = numbers.filter(function(num) {
return num > 10; // true = keep it, false = remove it
});
console.log(bigNumbers); // [15, 22, 18]
console.log(numbers); // [3, 15, 7, 22, 5, 18] — unchanged
Traditional for loop vs filter()
// ❌ Old way — for loop with if statement
let result1 = [];
for (let i = 0; i < numbers.length; i++) {
if (numbers[i] > 10) {
result1.push(numbers[i]);
}
}
// ✅ New way — filter()
let result2 = numbers.filter(function(num) {
return num > 10;
});
// Same result — much cleaner code.
5. reduce()
Combines all elements into a single value
reduce() can look intimidating at first, but the core idea is simple: it processes every element in the array one by one and accumulates them into a single result — a number, a string, or any value you define.
The most beginner-friendly use case is calculating the total sum of an array of numbers. Think of it like keeping a running tally on paper — you start at zero, then add each number one at a time until you reach the final total.
reduce() — Calculating a total sum
let numbers = [1, 2, 3, 4, 5];
let total = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
}, 0); // ← 0 is the starting value
console.log(total); // 15
// Step-by-step breakdown:
// Start: acc = 0
// Step 1: 0 + 1 = 1
// Step 2: 1 + 2 = 3
// Step 3: 3 + 3 = 6
// Step 4: 6 + 4 = 10
// Step 5: 10 + 5 = 15 ← final answer
6. forEach()
Runs a function on each element — returns nothing
forEach() is the simplest of the higher-order array methods. It loops through every element and runs a function on it — but it does not return a new array. It is essentially a cleaner, more readable replacement for a for loop when you just need to do something with each element, such as printing, logging, or updating the UI.
Traditional for loop vs forEach()
let names = ["Alice", "Bob", "Charlie"];
// ❌ Old way
for (let i = 0; i < names.length; i++) {
console.log(names[i]);
}
// ✅ New way — forEach()
names.forEach(function(name) {
console.log(name);
});
// Alice
// Bob
// Charlie
forEach() with index — Building a numbered list
let fruits = ["apple", "mango", "banana"];
fruits.forEach(function(fruit, index) {
console.log(index + 1 + ". " + fruit);
});
// 1. apple
// 2. mango
// 3. banana
Here is how all four higher-order methods compare at a glance:
| Method |
Returns |
Modifies Original? |
Best For |
forEach() |
Nothing (undefined) |
No |
Printing, logging, side effects |
map() |
New array (same size) |
No |
Transforming every element |
filter() |
New array (smaller or equal) |
No |
Selecting elements by condition |
reduce() |
A single value |
No |
Totals, sums, combining values |
