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

Arrays are one of the most commonly used data structures in JavaScript. They allow developers to store multiple values in a single variable and manipulate collections of data efficiently.

JavaScript provides built-in array methods that simplify operations such as adding elements, removing elements, transforming data, and aggregating values.

This article explains the most important array methods every beginner should know, using simple examples, diagrams, and before/after states.

---

1. push() and pop()

These methods operate on the end of an array.

Method	Purpose
push()	Adds an element to the end
pop()	Removes the last element

push()

Adds a new element to the end of an array.

const numbers = [1, 2, 3];

numbers.push(4);

console.log(numbers);

Output

[1, 2, 3, 4]

Array State

Before

[1, 2, 3]
        ↑
      end

After push(4)

[1, 2, 3, 4]
           ↑
         end

---

pop()

Removes the last element from the array.

const numbers = [1, 2, 3];

numbers.pop();

console.log(numbers);

Output

[1, 2]

Array State

Before

[1, 2, 3]
        ↑
     removed

After pop()

[1, 2]

---

2. shift() and unshift()

These methods operate on the beginning of an array.

Method	Purpose
shift()	Removes first element
unshift()	Adds element at beginning

---

shift()

const numbers = [1, 2, 3];

numbers.shift();

console.log(numbers);

Output

[2, 3]

Array State

Before

[1, 2, 3]
 ↑
removed

After shift()

[2, 3]

---

unshift()

const numbers = [2, 3];

numbers.unshift(1);

console.log(numbers);

Output

[1, 2, 3]

Array State

Before

[2, 3]

After unshift(1)

[1, 2, 3]
 ↑
added

---

3. forEach()

forEach() is used to loop through every element of an array.

const numbers = [1, 2, 3];

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

Output

1
2
3

forEach() does not return a new array.

It simply executes a function for each element.

---

Traditional Loop vs forEach

Traditional for loop

const numbers = [1,2,3];

for(let i = 0; i < numbers.length; i++){
  console.log(numbers[i]);
}

Using forEach

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

Advantages of forEach

• Cleaner syntax

• Easier to read

• Less boilerplate code

---

4. map()

map() is used to transform each element of an array and return a new array.

Example: Double each number

const numbers = [1, 2, 3];

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

console.log(doubled);

Output

[2, 4, 6]

Original array remains unchanged.

Original → [1,2,3]
Result   → [2,4,6]

---

map() Flow Diagram

Input Array
[1, 2, 3]

      │
      │ apply function (num * 2)
      ▼

Processing
1 → 2
2 → 4
3 → 6

      │
      ▼

New Array
[2, 4, 6]

---

Traditional Loop vs map()

Using for loop

const numbers = [1,2,3];
const result = [];

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

Using map()

const result = numbers.map(num => num * 2);

map() removes the need to manually create and push values into a new array.

---

5. filter()

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

Example: Get numbers greater than 10

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

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

console.log(result);

Output

[12, 20]

Original array remains unchanged.

Original → [5,12,8,20]
Result   → [12,20]

---

filter() Flow Diagram

Input Array
[5, 12, 8, 20]

Condition
num > 10

Processing
5   → rejected
12  → accepted
8   → rejected
20  → accepted

Result
[12, 20]

---

6. reduce() (Beginner Explanation)

reduce() is used to combine all array values into a single result.

Examples include:

• summing numbers

• counting items

• calculating totals

---

Example: Calculate total sum

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

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

console.log(total);

Output

10

---

reduce() Visual Diagram

Array
[1, 2, 3, 4]

Step 1
acc = 0 + 1 → 1

Step 2
acc = 1 + 2 → 3

Step 3
acc = 3 + 3 → 6

Step 4
acc = 6 + 4 → 10

Final Result
10

---

Summary Table

Method	Purpose
push()	Add element to end
pop()	Remove last element
shift()	Remove first element
unshift()	Add element at beginning
forEach()	Iterate over array
map()	Transform elements
filter()	Select elements based on condition
reduce()	Combine elements into one value

Final Thoughts

Understanding these array methods is essential for writing modern JavaScript. Instead of manually looping and managing arrays, methods such as map, filter, and reduce allow developers to express logic in a more readable and declarative way.

For beginners, the best way to master these concepts is through hands-on experimentation. Try running the examples in the browser console or on your local development environment, and observe how the array changes after each operation. Practicing these methods regularly will help build intuition about how data flows through JavaScript programs and will significantly improve your ability to write clean, efficient code.