Arrays are one of the most important data structures in JavaScript.
In real-world development (frontend + backend), you will constantly manipulate arrays — API responses, database results, UI lists, logs, analytics, etc.

In this guide, we’ll cover:

• push() and pop()

• shift() and unshift()

• forEach()

• map()

• filter()

• reduce() (beginner-friendly explanation)

We will include:

• Proper indexing explanation

• Before & after array state

• Theory + practical examples

• Flow diagrams

• Comparison with traditional loops

Understanding Array Indexing (Very Important)

In JavaScript:

• Arrays are zero-indexed

• First element index = 0

• Last element index = length - 1

let arr = ["T", "E", "C", "H"];

console.log(arr[0]); // "T"
console.log(arr[1]); // "E"
console.log(arr[2]); // "C"
console.log(arr[3]); // "H"
console.log(arr.length); // 4

Visual:

Index:   0     1     2     3
Value:  "T"   "E"   "C"   "H"

push() Method

Definition

push() adds one or more elements to the end of an array.

Syntax:

array.push(element1, element2, ...)

• Modifies the original array

• Returns the new length of the array

Example

Before

let orders = ["Order1", "Order2", "Order3"];

Index:   0         1         2
Value:  Order1   Order2   Order3

Action

A new order arrives:

orders.push("Order4");

After

Index:   0         1         2         3
Value:  Order1   Order2   Order3   Order4

Now:

console.log(orders.length); // 4

Important:

• push modifies original array

• It returns new length

• Time complexity: O(1) (fast)

pop() Method

Definition

pop() removes the last element from the array.

Syntax:

array.pop()

• Modifies original array

• Returns the removed element

Example

Before:

let orders = ["Order1", "Order2", "Order3"];

Action:

let removedOrder = orders.pop();

After:

Index:   0         1
Value:  Order1   Order2

console.log(removedOrder); // Order3

Important:

• Removes last element

• Returns removed value

• Modifies original array

• Used in undo systems

shift() Method

Definition

shift() removes the first element from the array.

Syntax:

array.shift()

• Modifies original array

• Returns removed element

• All indexes shift left

Example

let items = ["Pen", "Book", "Bag"];

items.shift();

Before:

Index:   0      1      2
Value:  Pen    Book   Bag

After:

Index:   0      1
Value:  Book   Bag

⚠️ Important:

Every element re-indexes.

unshift() Method

Definition

unshift() adds elements to the beginning of the array.

Syntax:

array.unshift(element)

• Modifies original array

• Returns new length

• All existing elements shift right

Example

let items = ["Book", "Bag"];

items.unshift("Pen");

After:

Index:   0      1      2
Value:  Pen    Book   Bag

forEach() Method

Definition

forEach() executes a function for each element.

Syntax:

array.forEach((element, index, array) => {
    // logic
});

Parameters:

• element → current value

• index → current index

• array → full array

Real Scenario

You want to send email to each user.

let users = ["Deepansh", "Rahul", "Anita"];

users.forEach((user, index) => {
    console.log(`Sending email to:", \({user}, "at index:", \){index});
});

Output:

Sending email to: Deepansh at index: 0
Sending email to: Rahul at index: 1
Sending email to: Anita at index: 2

Important:

• Does NOT return new array

• Cannot break early

• Used for logging, DOM update, API calls

map() Method

Definition

map() transforms each element and returns a new array.

Syntax:

let newArray = array.map((element, index, array) => {
    return modifiedValue;
});

• Does NOT modify original array

• Returns new array (same length)

Example: Double Each Number

let numbers = [2, 4, 6];

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

Original:

[2, 4, 6]

New:

[4, 8, 12]

How map Works

Process:

[2,4,6]
   ↓
Multiply each by 2
   ↓
[4,8,12]

Traditional for Loop vs map()

Using for loop:

let result = [];

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

Using map:

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

filter() Method

Definition

filter() creates a new array with elements that satisfy a condition.

Syntax:

let newArray = array.filter((element, index, array) => {
    return condition;
});

• Returns new array

• May return smaller array

• Does NOT modify original

Example: Numbers Greater Than 10

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

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

Output:

[12, 20]

How filter Works

Process:

[5,12,8,20]
   ↓
Check num > 10
   ↓
[12,20]

reduce() Method (Beginner-Friendly)

Definition

reduce() reduces an array to a single value.

Used for:

• Sum

• Product

• Counting

• Aggregation

Syntax

array.reduce((accumulator, currentValue, index, array) => {
    return updatedAccumulator;
}, initialValue);

Parameters:

• accumulator → stores result

• currentValue → current element

• initialValue → starting value

Example: Calculate Total Sum

let numbers = [10, 20, 30];

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

Step-by-Step Execution

Initial acc = 0

Step 1: 0 + 10 = 10
Step 2: 10 + 20 = 30
Step 3: 30 + 30 = 60

Final Result:

60

reduce Visual

Think of it like:

0 → 10 → 30 → 60