Arrays are one of the most useful data structures in JavaScript. They allow us to store multiple values in a single variable and work with them easily. But simply storing values in an array is only the beginning — the real power comes from the methods that help us manipulate and process those values efficiently.

JavaScript provides several built-in array methods that make common tasks much simpler. Whether you want to add elements, remove elements, transform data, or calculate results, there is usually a method designed for that job.

In this article, we’ll explore some of the most important array methods every beginner should understand:

• push() and pop()

• shift() and unshift()

• map()

• filter()

• reduce()

• forEach()

Instead of writing long loops every time, these methods help you write cleaner, shorter, and more readable code.

Let’s take a look at how each of them works with simple examples

push() and pop()

These two methods are used when you want to add or remove elements from the end of an array.

push() → Adds an element to the end

const fruits = ["Apple", "Banana", "Mango"];

fruits.push("Orange");

console.log(fruits);

Output:

["Apple", "Banana", "Mango", "Orange"]

Before push()

["Apple", "Banana", "Mango"]

After push()

["Apple", "Banana", "Mango", "Orange"]

---

pop() → Removes the last element

const fruits = ["Apple", "Banana", "Mango"];

fruits.pop();

console.log(fruits);

Output:

["Apple", "Banana"]

Before pop()

["Apple", "Banana", "Mango"]

After pop()

["Apple", "Banana"]

These two methods behave like a stack, where elements are added and removed from the end.

---

shift() and unshift()

Unlike push and pop, these methods work on the beginning of the array.

shift() → Removes the first element

const fruits = ["Apple", "Banana", "Mango"];

fruits.shift();

console.log(fruits);

Output:

["Banana", "Mango"]

---

unshift() → Adds an element at the beginning

const fruits = ["Banana", "Mango"];

fruits.unshift("Apple");

console.log(fruits);

Output:

["Apple", "Banana", "Mango"]

So remember:

Method	What it does
push()	Add element at end
pop()	Remove element from end
shift()	Remove element from start
unshift()	Add element at start

---

forEach()

Before learning map and filter, it’s useful to understand forEach().

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

Example:

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

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

Output:

1
2
3
4

This is often cleaner than writing a traditional loop.

Traditional for loop

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

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

Both work, but forEach() is usually shorter and easier to read.

---

map()

map() is one of the most useful array methods in JavaScript.

It is used when you want to transform every element of an array.

It creates a new array based on the original one.

Example: double every number.

const numbers = [2, 4, 6, 8];

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

console.log(doubled);

Output:

[4, 8, 12, 16]

Before map()

[2, 4, 6, 8]

After map()

[4, 8, 12, 16]

Important:

map() does not change the original array.

---

filter()

filter() is used when you want to select certain elements from an array based on a condition.

Example: get numbers greater than 10.

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

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

console.log(result);

Output:

[12, 20]

Before filter()

[5, 8, 12, 20, 3]

After filter()

[12, 20]

So filter() returns a new array containing only the values that match the condition.

---

reduce() (Beginner Explanation)

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

Common use cases include:

• Calculating total sum

• Finding averages

• Counting values

Example: finding the sum of numbers.

const numbers = [5, 10, 15];

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

console.log(total);

Output:

30

How it works step-by-step:

Step	Accumulator	Current	Result
Start	0	5	5
Next	5	10	15
Next	15	15	30

So reduce() gradually combines values until one final result remains.

---

Quick Comparison: for loop vs map/filter

Traditional approach

const numbers = [2, 4, 6];
const result = [];

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

Using map()

const numbers = [2, 4, 6];

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

The second version is:

• shorter

• cleaner

• easier to understand

---

Assignment Practice

Try this small exercise in your browser console.

Step 1: Create an array

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

---

Step 2: Double each number using map()

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

---

Step 3: Get numbers greater than 10 using filter()

const greaterThanTen = numbers.filter(num => num > 10);
console.log(greaterThanTen);

---

Step 4: Calculate total sum using reduce()

const total = numbers.reduce((sum, num) => sum + num, 0);
console.log(total);

---

Final Thoughts

Learning array methods is a big step toward writing modern JavaScript.

Instead of manually looping through arrays every time, methods like:

• map()

• filter()

• reduce()

• forEach()

allow you to write cleaner and more expressive code.

At first they might feel slightly unfamiliar, but after practicing a few times, they become one of the most powerful tools in JavaScript.

👉 Now open your browser console and experiment with arrays.