Array Methods You Must Know

Arrays are the backbone of JavaScript programming. Whether you're building a shopping cart, filtering search results, or transforming data from an API — you'll use array methods every single day. This guide walks you through the six most important methods you need to master, with clear examples you can run right now in your browser console.

1. push() and pop()

These two methods work on the end of an array. push() adds one or more items to the end. pop() removes the last item and returns it.

push() — Add to the end

const fruits = ['apple', 'banana'];

fruits.push('mango');

console.log(fruits); // ['apple', 'banana', 'mango']

Before	After
['apple', 'banana']	['apple', 'banana', 'mango']

---

pop() — Remove from the end

const fruits = ['apple', 'banana', 'mango'];

const removed = fruits.pop();

console.log(removed); // 'mango'
console.log(fruits);  // ['apple', 'banana']

Before	After
['apple', 'banana', 'mango']	['apple', 'banana'] (removed: 'mango')

💡 Try it! Open your browser DevTools (F12), go to the Console tab, and try these examples live!

---

2. shift() and unshift()

These mirror push/pop, but work on the beginning of an array instead of the end.

unshift() — Add to the front

const queue = ['Bob', 'Charlie'];

queue.unshift('Alice');

console.log(queue); // ['Alice', 'Bob', 'Charlie']

Before	After
['Bob', 'Charlie']	['Alice', 'Bob', 'Charlie']

---

shift() — Remove from the front

const queue = ['Alice', 'Bob', 'Charlie'];

const first = queue.shift();

console.log(first); // 'Alice'
console.log(queue); // ['Bob', 'Charlie']

Before	After
['Alice', 'Bob', 'Charlie']	['Bob', 'Charlie'] (removed: 'Alice')

---

Quick Reference

Method	Action	Where?
push()	Add item(s)	End of array
pop()	Remove item	End of array
unshift()	Add item(s)	Start of array
shift()	Remove item	Start of array

---

3. map()

map() creates a brand new array by transforming every element. The original array is never changed. Think of it as: "For every item, give me a new version of it."

const prices = [10, 20, 30];

// Double every price
const doubled = prices.map(price => price * 2);

console.log(doubled); // [20, 40, 60]
console.log(prices);  // [10, 20, 30]  ← original unchanged!

Before	After
prices = [10, 20, 30]	doubled = [20, 40, 60] (prices unchanged)

---

Traditional for loop vs map()

Traditional for loop:

const prices = [10, 20, 30];
const doubled = [];

for (let i = 0; i < prices.length; i++) {
  doubled.push(prices[i] * 2);
}

map() — cleaner!

const prices = [10, 20, 30];

const doubled = prices.map(price => price * 2);

---

How map() works

[10, 20, 30]  →  price => price * 2  →  [20, 40, 60]
   Input              Transform             Output

💡 Try it! map() always returns a NEW array of the SAME length as the original.

---

4. filter()

filter() creates a new array containing only the elements that pass a test you define. If the test returns true, the item is kept. If false, it's skipped.

const scores = [5, 12, 8, 21, 3, 18];

// Keep only scores above 10
const highScores = scores.filter(score => score > 10);

console.log(highScores); // [12, 21, 18]
console.log(scores);     // [5, 12, 8, 21, 3, 18]  ← unchanged!

Before	After
scores = [5, 12, 8, 21, 3, 18]	highScores = [12, 21, 18]

---

Traditional for loop vs filter()

Traditional for loop:

const scores = [5, 12, 8, 21, 3, 18];
const highScores = [];

for (let i = 0; i < scores.length; i++) {
  if (scores[i] > 10) {
    highScores.push(scores[i]);
  }
}

filter() — cleaner!

const scores = [5, 12, 8, 21, 3, 18];

const highScores = scores.filter(score => score > 10);

---

How filter() works

[5, 12, 8, 21, 3, 18]  →  score > 10?  →  [12, 21, 18]
        Input               Test (true/false)    Output

💡 Try it! filter() returns a NEW array that may be SHORTER than the original (only passing items are kept).

---

5. reduce() — The Accumulator

reduce() is the most powerful of the group, but let's keep it simple for now. It takes an array and reduces it to a single value — like a running total.

It uses two things: an accumulator (the running total) and the current item being processed.

const numbers = [1, 2, 3, 4, 5];

const total = numbers.reduce((accumulator, current) => {
  return accumulator + current;
}, 0); // ← 0 is the starting value

console.log(total); // 15

---

Step-by-step breakdown

Step	Current	Accumulator before	Result (new acc.)
1	1	0 (start)	0 + 1 = 1
2	2	1	1 + 2 = 3
3	3	3	3 + 3 = 6
4	4	6	6 + 4 = 10
5	5	10	10 + 5 = 15 ✓

💡 Try it! For now, just remember: reduce() is perfect for calculating totals, sums, and counts.

---

6. forEach()

forEach() runs a function on every item in the array, one at a time. Unlike map(), it does NOT create a new array — it's used for side effects like logging, updating the DOM, or sending data.

const students = ['Alice', 'Bob', 'Charlie'];

students.forEach(student => {
  console.log('Hello, ' + student + '!');
});

// Hello, Alice!
// Hello, Bob!
// Hello, Charlie!

---

When to use forEach() vs map()

Use map() when...	Use forEach() when...
You want a NEW array back	You just want to DO something
e.g. doubling prices, formatting names	e.g. logging, updating UI, sending data

---