When learning JavaScript, arrays are one of the most commonly used data structures. JavaScript provides powerful array methods that make working with data easier, cleaner, and faster.

In this blog, we’ll understand some important array methods with simple examples, before/after results, and beginner-friendly explanations.

We will cover:

• push() and pop()

• shift() and unshift()

• map()

• filter()

• reduce() (basic explanation)

• forEach()

All examples can be tested directly in your browser console.

1. push() and pop()

These methods add or remove elements from the end of an array.

push()

push() adds an element to the end of an array.

Example

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

fruits.push("mango");

console.log(fruits);

Before

["apple", "banana"]

After

["apple", "banana", "mango"]

pop()

pop() removes the last element from the array.

Example

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

fruits.pop();

console.log(fruits);

Before

["apple", "banana", "mango"]

After

["apple", "banana"]

---

2. shift() and unshift()

These methods work with the beginning of the array.

shift()

shift() removes the first element.

Example

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

fruits.shift();

console.log(fruits);

Before

["apple", "banana", "mango"]

After

["banana", "mango"]

unshift()

unshift() adds an element to the start of the array.

Example

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

fruits.unshift("apple");

console.log(fruits);

Before

["banana", "mango"]

After

["apple", "banana", "mango"]

3. forEach()

forEach() runs a function for every element in the array.

It is commonly used for printing or performing actions.

Example

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

numbers.forEach(function(num){
  console.log(num);
});

Output

1
2
3
4

Note: forEach() does not create a new array.

4. map()

map() creates a new array by transforming every element.

It is useful when we want to modify each element.

Traditional for Loop

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

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

console.log(doubled);

Output:

[2, 4, 6]

Using map()

let numbers = [1, 2, 3];

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

console.log(doubled);

Before

[1, 2, 3]

After

[2, 4, 6]

---

Flow of map()

Original Array
[1, 2, 3]

Step 1 → 1 * 2 → 2
Step 2 → 2 * 2 → 4
Step 3 → 3 * 2 → 6

New Array
[2, 4, 6]

map() does not modify the original array.

5. filter()

filter() creates a new array containing only elements that match a condition.

Traditional for Loop

let numbers = [5, 12, 8, 20];
let result = [];

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

console.log(result);

Output:

[12, 20]

---

Using filter()

let numbers = [5, 12, 8, 20];

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

console.log(result);

Before

[5, 12, 8, 20]

After

[12, 20]

---

Flow of filter()

Original Array
[5, 12, 8, 20]

5  → false → removed
12 → true  → kept
8  → false → removed
20 → true  → kept

New Array
[12, 20]

6. reduce() (Basic Explanation)

reduce() is used to combine all values of an array into a single value.

Common uses:

• Sum of numbers

• Product of numbers

• Calculating totals

Example: Sum of Numbers

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

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

console.log(total);

Output:

10

---

How reduce Works

Array: [1, 2, 3, 4]

Start: acc = 0

Step 1 → acc + 1 = 1
Step 2 → 1 + 2 = 3
Step 3 → 3 + 3 = 6
Step 4 → 6 + 4 = 10

Final Result = 10

Think of reduce() as accumulating values step by step.