JavaScript Array Methods

push, pop, shift, unshift, map, filter, reduce, forEach

This article is for complete beginners. You can follow along by opening your browser console (Right-click → Inspect → Console tab) and typing the examples.

1. push() and pop() – Working with the END of an array

push() – Add to the end

Idea: Put a new item at the end of the list.

let fruits = ["apple", "banana"];
console.log(fruits); // ["apple", "banana"]

fruits.push("mango");

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

• Before: ["apple", "banana"]

• After push("mango"): ["apple", "banana", "mango"]

pop() – Remove from the end

Idea: Take the last item out of the list.

let fruits = ["apple", "banana", "mango"];
console.log(fruits); // ["apple", "banana", "mango"]

let lastFruit = fruits.pop();

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

• Before: ["apple", "banana", "mango"]

• After pop(): ["apple", "banana"]

2. shift() and unshift() – Working with the START of an array

unshift() – Add to the start

let numbers = [2, 3, 4];
console.log(numbers); // [2, 3, 4]

numbers.unshift(1);

console.log(numbers); // [1, 2, 3, 4]

shift() – Remove from the start

let numbers = [1, 2, 3, 4];
console.log(numbers); // [1, 2, 3, 4]

let firstNumber = numbers.shift();

console.log(firstNumber); // 1
console.log(numbers);     // [2, 3, 4]

• Before: [1, 2, 3, 4]

• After shift(): [2, 3, 4]

3. for loop vs map() / filter() / forEach()

Traditional for loop example

Goal: Create a new array with each number doubled.

let nums = [1, 2, 3];
let doubled = [];

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

console.log(doubled); // [2, 4, 6]

This works, but we manually manage i, length, and push.

4. map() – Transform each item

Idea: Take an array, apply a function to every item, and get a new array.

let nums = [1, 2, 3];
console.log("before:", nums); // [1, 2, 3]

let doubled = nums.map(function (num) {
  return num * 2;
});

console.log("after (new array):", doubled); // [2, 4, 6]
console.log("original:", nums);             // [1, 2, 3]

• Before: [1, 2, 3]

• After map(num => num * 2): [2, 4, 6]

• Original array stays the same

Simple map “flowchart” (mental model)

1. Take first value → run function → put result in new array

2. Move to next value → repeat

3. Stop when no more values → return new array

5. filter() – Keep only what you want

Idea: Test each item; if the test is true, keep it. The result is a new array.

let nums = [5, 10, 15, 20];
console.log("before:", nums); // [5, 10, 15, 20]

let greaterThan10 = nums.filter(function (num) {
  return num > 10;
});

console.log("after (filtered):", greaterThan10); // [15, 20]
console.log("original:", nums);                  // [5, 10, 15, 20]

• Before: [5, 10, 15, 20]

• After filter(num > 10): [15, 20]

• Original stays the same

Simple filter “flowchart” (mental model)

For every item:

1. Run the test (condition)

2. If the condition is true, → item goes into the new array

3. If the condition is false → ignore that item

4. Return the new array at the end

6. reduce() – Combine all values into one

Idea: Go through the array and keep an “accumulator” (a running total or result). At the end, you get one value.

Example: sum of all numbers.

let nums = [1, 2, 3, 4];

let sum = nums.reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 10

• accumulator: starts at 0 (the second argument to reduce)

• Step-by-step:

  • Start: accumulator = 0

  • Step 1: 0 + 1 = 1

  • Step 2: 1 + 2 = 3

  • Step 3: 3 + 3 = 6

  • Step 4: 6 + 4 = 10 → final result

Simply reduce “visual.”

Think of reduce like this line:

0 → (add 1) → 1 → (add 2) → 3 → (add 3) → 6 → (add 4) → 10

You pass through all values and keep updating a single result.

7. forEach() – Do something for each item (no new array)

Idea: Loop over each item and run a function. Does not return a new array.

let fruits = ["apple", "banana", "mango"];

fruits.forEach(function (fruit, index) {
  console.log(index, fruit);
});

// 0 "apple"
// 1 "banana"
// 2 "mango"

Use forEach when you just want to do something (like console.log) for each item, not create a new array.

8. Common beginner mistakes (and how to avoid them)

• Confusing map and forEach:

  • map Returns a new array.

  • forEach returns undefined (it’s just for side effects).

• Expecting filter to change the original array:

  • It doesn’t. It returns a new array. Always store the result.

• Forgetting the initial value in reduce:

  • As a beginner, always pass an initial value like 0 for sums.

9. Your practice assignment

Try these directly in the browser console.

1. Create an array of numbers

let numbers = [3, 7, 12, 5, 20];

1. Use map() to double each number

let doubled = numbers.map(function (num) {
  return num * 2;
});

console.log(doubled);

1. Use filter() to get numbers greater than 10

let greaterThan10 = numbers.filter(function (num) {
  return num > 10;
});

console.log(greaterThan10);

1. Use reduce() to calculate the total sum

let total = numbers.reduce(function (acc, num) {
  return acc + num;
}, 0);

console.log(total);

• Type all code yourself (don’t just copy-paste) to build muscle memory.

• Change the numbers and see what happens to the results.

• Once you’re comfortable, try replacing the function (num) { ... } with arrow functions like num => num * 2.

You can now explain these array methods to someone else—that’s a great sign you understand them.

Happy learning!