When you start learning JavaScript, arrays quickly become one of the most useful tools you use. Whether you're storing numbers, names, or objects, arrays help you manage collections of data easily.

But working with arrays efficiently requires understanding some important array methods. These methods allow you to add, remove, transform, and process data without writing long loops.

In this article, we’ll explore some of the most commonly used JavaScript array methods in a simple and practical way:

• push() and pop()

• shift() and unshift()

• map()

• filter()

• reduce() (beginner explanation)

• forEach()

All examples are beginner-friendly and easy to try in your browser console.

1. push() and pop()

These methods are used to add and remove elements from the end of an array.

Think of it like stacking plates.

• push() → adds a plate on top

• pop() → removes the top plate

Example

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

fruits.push("mango");
console.log(fruits);

Before

["apple", "banana"]

After

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

Now using pop():

fruits.pop();
console.log(fruits);

Before

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

After

["apple", "banana"]

So remember:

Method	What it does
push()	Adds item to end
pop()	Removes item from end

2. shift() and unshift()

These methods work on the beginning of an array.

• unshift() → adds element at the start

• shift() → removes element from the start

Example

let numbers = [2, 3, 4];

numbers.unshift(1);
console.log(numbers);

Before

[2, 3, 4]

After

[1, 2, 3, 4]

Now using shift():

numbers.shift();
console.log(numbers);

Before

[1, 2, 3, 4]

After

[2, 3, 4]

Summary:

Method	What it does
shift()	Removes first element
unshift()	Adds element at start

3. forEach()

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

It performs an action on each item.

Example

let numbers = [1, 2, 3];

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

Output:

1
2
3

Unlike map() or filter(), forEach does not return a new array.
It simply executes code for each element.

4. Traditional for Loop vs map()

Before modern JavaScript methods, developers mostly used for loops.

Using a 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]

Now compare with map().

5. map()

map() is used to transform each element of an array.

It creates a new array after applying a function to each element.

Example

let numbers = [1, 2, 3];

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

console.log(doubled);

Output:

[2, 4, 6]

Before

[1, 2, 3]

After

[2, 4, 6]

The original array remains unchanged.

Simple Flow of map()

Original Array
[1,2,3]

Apply function (x * 2)

Result Array
[2,4,6]

You can imagine map() like a machine that processes every item and outputs a new array.

6. filter()

filter() is used when you want only some elements from an array based on a condition.

Example

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

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

console.log(greaterThan10);

Output:

[12, 20]

Before

[5, 8, 12, 3, 20]

After

[12, 20]

Flow of filter()

Original Array
[5,8,12,3,20]

Condition → num > 10

Result
[12,20]

Elements that do not match the condition are removed.

7. reduce() (Beginner Explanation)

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

For example:

• sum of numbers

• total price

• counting items

Example: Sum of numbers

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

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

console.log(total);

Output

10

How reduce works

Start with accumulator = 0

0 + 1 = 1
1 + 2 = 3
3 + 3 = 6
6 + 4 = 10

Final result → 10

So reduce() keeps accumulating values until the array ends.

Quick Comparison

Method	Purpose
push()	Add element at end
pop()	Remove element from end
shift()	Remove first element
unshift()	Add element at start
forEach()	Run a function for each element
map()	Transform elements into a new array
filter()	Select elements based on condition
reduce()	Combine values into one result

Assignment (Try This Yourself)

Open your browser console or Node.js terminal and try this exercise.

Step 1: Create an array

let numbers = [4, 8, 12, 3, 15];

Step 2: Use map() to double numbers

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

Expected output

[8, 16, 24, 6, 30]

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

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

Expected output

[12, 15]

Step 4: Use reduce() to calculate sum

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

Expected output

42

Final Thoughts

JavaScript array methods like map(), filter(), and reduce() make code cleaner, shorter, and easier to understand compared to traditional loops.

Instead of manually controlling loops and pushing values into arrays, these methods allow you to describe what you want to do with the data.

As a beginner, the best way to learn them is simple:

Open your console and experiment.

Change numbers, modify conditions, and observe how arrays change. That hands-on practice is what truly builds understanding.