Array Methods You Must Know!

📋 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