Arrays are one of the most commonly used data structures in JavaScript. When working with arrays, JavaScript provides several built-in methods that make data manipulation much easier.

In this blog, we will learn some important array methods every beginner must know:

• push() and pop()

• shift() and unshift()

• map()

• filter()

• reduce() (basic explanation)

• forEach()

Each method will be explained with simple practical examples, along with the before and after state of the array.

Tip: Try running these examples in your browser console or Node.js to understand them better.

1. push() – Add Element at the End

The push() method is used to add a new element to the end of an array.

Example

let numbers = [1, 2, 3];

numbers.push(4);

console.log(numbers);

Before

[1, 2, 3]

After

[1, 2, 3, 4]

Practical Example

Adding a new task in a to-do list.

let tasks = ["Study", "Workout"];
tasks.push("Read Book");

console.log(tasks);

Result:

["Study", "Workout", "Read Book"]

2. pop() – Remove Element from the End

The pop() method removes the last element from an array.

Example

let numbers = [1, 2, 3];

numbers.pop();

console.log(numbers);

Before

[1, 2, 3]

After

[1, 2]

Practical Example

Removing the most recently added item.

let cart = ["Shoes", "T-shirt", "Watch"];

cart.pop();

console.log(cart);

Result:

["Shoes", "T-shirt"]

3. shift() – Remove First Element

The shift() method removes the first element of the array.

Example

let numbers = [10, 20, 30];

numbers.shift();

console.log(numbers);

Before

[10, 20, 30]

After

[20, 30]

4. unshift() – Add Element at the Beginning

The unshift() method adds an element at the beginning of the array.

Example

let numbers = [20, 30];

numbers.unshift(10);

console.log(numbers);

Before

[20, 30]

After

[10, 20, 30]

Practical Example

Adding a priority task.

let tasks = ["Study", "Workout"];

tasks.unshift("Submit Assignment");

console.log(tasks);

Result:

["Submit Assignment", "Study", "Workout"]

5. forEach() – Loop Through an Array

forEach() is used to run a function for each element in an array.

Example

let numbers = [1, 2, 3];

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

Output

1
2
3

Traditional For Loop vs forEach()

Traditional Loop

let 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);
});

Why use forEach?

• Cleaner code

• Easier to read

• Less manual indexing

6. map() – Transform Each Element

map() creates a new array by modifying each element of the original array.

Example: Double Every Number

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]

Important:

• map() does not change the original array

• It returns a new array

Flowchart: How map() Works

Original Array
[1, 2, 3]

      |
      v

Apply Function (num * 2)

      |
      v

New Array
[2, 4, 6]

Traditional Loop vs map()

Traditional Loop

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

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

Using map()

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

map() makes the code shorter and cleaner.

7. filter() – Select Specific Elements

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

Example: Get numbers greater than 10

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]

Flowchart: How filter() Works

Original Array
[5, 12, 8, 20]

Condition: num > 10

5   -> No
12  -> Yes
8   -> No
20  -> Yes

Result
[12, 20]

8. reduce() – Combine Values (Beginner Explanation)

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

For example:

• Finding the sum

• Finding the product

• Counting values

Example: Calculate Total Sum

let numbers = [5, 10, 15];

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

console.log(total);

Output

30

How reduce Works

Start with accumulator = 0

0 + 5 = 5
5 + 10 = 15
15 + 15 = 30

Final Result = 30

Think of reduce() as gradually accumulating values.

Assignment for Students

Try this in your browser console.

Step 1: Create an array

let numbers = [5, 10, 15, 20];

Step 2: Use map() to double each number

let doubled = numbers.map(num => num * 2);
console.log(doubled);

Expected Output

[10, 20, 30, 40]

Step 3: Use filter() to get numbers greater than 10

let greater = numbers.filter(num => num > 10);
console.log(greater);

Expected Output

[15, 20]

Step 4: Use reduce() to calculate total sum

let total = numbers.reduce((acc, num) => acc + num, 0);
console.log(total);

Expected Output

50

Final Thoughts

Learning these array methods will greatly improve your JavaScript skills. They help you write cleaner, shorter, and more readable code.

The most important methods every beginner should practice are:

• push() / pop()

• shift() / unshift()

• forEach()

• map()

• filter()

• reduce()

Tip: The best way to learn is to experiment in the console and try modifying the examples.