JavaScript Array Methods You Must Know (With Simple Examples)

Arrays are the go-to data structure when you need to work with lists of items in JavaScript. Once you know the basic methods, manipulating arrays becomes much faster and your code becomes clearer. This article explains the most important array methods every beginner should know: push, pop, shift, unshift, forEach, map, filter, and a beginner-friendly introduction to reduce. Each method has short, concrete examples and before / after states so you can see exactly what’s happening.

---

Quick refresher: an array example we’ll reuse

const numbers = [4, 8, 15, 16, 23];

numbers initially: [4, 8, 15, 16, 23]

Indexing reminder: numbers[0] === 4, numbers[4] === 23.

---

1) push() and pop() — add/remove from the end

push() — add element(s) to the end

Before: [4, 8, 15, 16, 23]

numbers.push(42);
console.log(numbers); // [4, 8, 15, 16, 23, 42]

push returns the new length (6) but we usually use it for the side-effect (adding).

pop() — remove last element

Before: [4, 8, 15, 16, 23, 42]

const removed = numbers.pop();
console.log(removed); // 42
console.log(numbers); // [4, 8, 15, 16, 23]

pop returns the removed element (42) and shrinks the array.

Use case: treat the array like a stack (LIFO — last in, first out).

---

2) shift() and unshift() — add/remove from the start

unshift() — add element(s) to the beginning

Before: [4, 8, 15, 16, 23]

numbers.unshift(1);
console.log(numbers); // [1, 4, 8, 15, 16, 23]

unshift returns the new length.

shift() — remove the first element

Before: [1, 4, 8, 15, 16, 23]

const first = numbers.shift();
console.log(first);   // 1
console.log(numbers); // [4, 8, 15, 16, 23]

shift returns the removed element and moves every index down by 1 (internally it's slightly more expensive than pop because indexes shift).

Use case: treat array like a queue (FIFO — first in, first out).

---

3) forEach() — run a function for each element

forEach is useful for performing side effects (logging, DOM updates) on each element. It does not return a new array.

Before: [4, 8, 15, 16, 23]

numbers.forEach(function(num, index) {
  console.log(index, num);
});
// Output:
// 0 4
// 1 8
// 2 15
// 3 16
// 4 23

If you need to transform the array (create a new one), use map() (below) instead of forEach().

---

4) map() — transform every element, returns a new array

What it does: runs a function on every element and returns a new array with the results.

Before: [4, 8, 15, 16, 23]

Example — double every number:

const doubled = numbers.map(function(num) {
  return num * 2;
});
console.log(doubled); // [8, 16, 30, 32, 46]
console.log(numbers); // original array remains unchanged: [4, 8, 15, 16, 23]

Important: map does not mutate the original; it returns a new array. This makes reasoning about data easier.

---

5) filter() — pick elements that match a condition, returns a new array

What it does: runs a test for each item and returns a new array containing only items where the test is true.

Before: [4, 8, 15, 16, 23]

Example — keep numbers greater than 10:

const greaterThan10 = numbers.filter(function(num) {
  return num > 10;
});
console.log(greaterThan10); // [15, 16, 23]

Use case: filtering items by condition (e.g., active users, scores above threshold).

---

6) reduce() — combine array into a single value (beginner level)

reduce is powerful — it “reduces” all elements into one value by repeatedly applying a function that keeps an “accumulator.”

Basic pattern

array.reduce(function(accumulator, currentValue) {
  // update and return new accumulator
}, initialValue);

Example — sum numbers (beginner-friendly)

Before: [4, 8, 15, 16, 23]

const sum = numbers.reduce(function(acc, num) {
  return acc + num;
}, 0);
console.log(sum); // 66

• acc starts at 0 (the initialValue).

• For each number, acc becomes acc + num.

• At the end, sum is a single number: 66.

Notes for beginners

• The initialValue is important; if you omit it, reduce will use the first array element as the initial acc and start from the second element — which can be surprising.

• Keep it simple at first: use reduce for sums, counts, or building a single object from array items. Avoid complicated uses until comfortable.

---

Compare: Traditional for loop vs map / filter

Goal: double each number.

Traditional for loop

const doubled = [];
for (let i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2);
}
console.log(doubled); // [8, 16, 30, 32, 46]

Using map

const doubled2 = numbers.map(n => n * 2);
console.log(doubled2); // [8, 16, 30, 32, 46]

Why map is nicer

• Shorter and clearer intent: “I want a new array with each value transformed.”

• map avoids boilerplate ([], push, loop index).

• Easier to reason about and less error-prone.

Compare filter with for

Traditional:

const filtered = [];
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] > 10) filtered.push(numbers[i]);
}
console.log(filtered); // [15, 16, 23]

With filter:

const filtered2 = numbers.filter(n => n > 10);
console.log(filtered2); // [15, 16, 23]

filter expresses the intent directly: “keep items where this condition is true.”

---

Before / After states — one glance summary

• push(42)

  Before: [4, 8, 15, 16, 23] → After: [4, 8, 15, 16, 23, 42]

• pop()

  Before: [4, 8, 15, 16, 23, 42] → After: [4, 8, 15, 16, 23] (returns 42)

• unshift(1)

  Before: [4, 8, 15, 16, 23] → After: [1, 4, 8, 15, 16, 23]

• shift()

  Before: [1, 4, 8, 15, 16, 23] → After: [4, 8, 15, 16, 23] (returns 1)

• forEach

  No new array — used for side effects (logging, mutating outside resources).

• map

  Returns new array: [8, 16, 30, 32, 46] (original unchanged).

• filter

  Returns new array of items that pass condition: e.g. [15, 16, 23].

• reduce

  Returns one value (e.g., sum 66).

---

Beginner tips & common pitfalls

• map and filter do not change the original array — they return new arrays. (push/pop/shift/unshift do mutate.)

• forEach returns undefined. Don’t expect it to create a new array.

• Don’t forget to pass an initialValue to reduce unless you’re very sure of the input.

• shift() and unshift() are less efficient than pop()/push() for large arrays because they change many indices.

• Avoid chaining many methods when you’re learning — do each step separately so you can inspect intermediate results.

---

Console practice — encourage experimentation

Open your browser console (F12 → Console) or use Node:

• Type const arr = [4,8,15,16,23] and try:

  • arr.push(42) → check arr

  • arr.pop() → check returned value and arr

  • arr.map(x => x * 2) → check result and arr

  • arr.filter(x => x > 10) → check result

Practicing in console makes the behavior crystal clear.

---

Assignment Idea (step-by-step solution included)

Assignment

1. Create an array of numbers: [4, 8, 15, 16, 23].

2. Use map() to double each number.

3. Use filter() to get numbers greater than 10 (apply filter to the doubled array).

4. Use reduce() to calculate the total sum of the filtered (doubled) numbers.

5. Print intermediate steps (before/after each step).

Solution (no chaining; each step explicit)

const numbers = [4, 8, 15, 16, 23];
console.log("Original:", numbers); // [4,8,15,16,23]

// 1) map to double each number
const doubled = numbers.map(n => n * 2);
console.log("Doubled:", doubled); // [8,16,30,32,46]

// 2) filter numbers greater than 10 (on doubled array)
const filtered = doubled.filter(n => n > 10);
console.log("Filtered (>10):", filtered); // [16,30,32,46]

// 3) reduce to total sum of filtered
const total = filtered.reduce((acc, n) => acc + n, 0);
console.log("Sum of filtered:", total); // 124

Explanation of numbers

• Doubled array: [8, 16, 30, 32, 46]

• Filtered (>10): [16, 30, 32, 46]

• Sum: 16 + 30 + 32 + 46 = 124