Stop Memorizing Array Methods — Understand Them

Most developers use array methods like map, filter, and reduce…

…but don’t actually understand how they work.

Let’s fix that — simply.

1. Introduction

When we work with JavaScript, we use arrays almost everywhere. Arrays help us store multiple values in one place, like a list of numbers, names, or items.

But just storing data is not enough. We also need to add, remove, update, and process that data. That is where array methods help us.

Instead of writing long loops again and again, JavaScript gives us built-in methods that make our work easier, cleaner, and faster.

In this blog, we will learn the most important array methods in a very simple way.

What You Will Learn

• How to add and remove items from an array

• How to process array data using map, filter, reduce

• Difference between for loop and array methods

• How arrays change before and after each operation

1. push() and pop()

What is push()?

push() is used to add an element at the end of an array.

Think of it like adding a new book at the end of a stack.

Example

let arr = [1, 2, 3];

arr.push(4);

console.log(arr);

Output

[1, 2, 3, 4]

The new value is added at the end.

What is pop()?

pop() is used to remove the last element from an array.

It removes the last item and also returns it.

Example

let arr = [1, 2, 3];

arr.pop();

console.log(arr);

Output

[1, 2]

The last value is removed.

2. shift() and unshift()

What is shift()?

shift() removes the first element from the array.

Think of it like removing the first person from a queue.

Example

let arr = [1, 2, 3];

arr.shift();

console.log(arr);

Output

[2, 3]

What is unshift()?

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

Example

let arr = [2, 3];

arr.unshift(1);

console.log(arr);

Output

[1, 2, 3]

3. forEach()

What is forEach()?

forEach() is used to loop through each element in an array.

It runs a function for every item, one by one.

Example

let arr = [1, 2, 3];

arr.forEach((num) => {
  console.log(num);
});

Output

1
2
3

It does not return a new array. It is mainly used for side work like printing.

4. map()

What is map()?

map() is used when we want to create a new array by changing each element.

It does not change the original array.

Simple Idea

“Take each value → change it → return new array”

Example

let arr = [1, 2, 3];

let newArr = arr.map((num) => {
  return num * 2;
});

console.log(newArr);

Output

[2, 4, 6]

Before vs After

Before: [1, 2, 3]
After : [2, 4, 6]

5. filter()

What is filter()?

filter() is used to select only some elements based on a condition.

It returns a new array with only matching values.

Simple Idea

“Check each value → keep it if true”

Example

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

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

console.log(result);

Output

[15, 20]

Before vs After

Before: [5, 10, 15, 20]
After : [15, 20]

6. reduce()

What is reduce()?

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

For example:

• sum of numbers

• total price

• count of items

Simple Idea

“Take all values → combine step by step → get one result”

Example

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

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

console.log(sum);

Output

10

How It Works

Start: acc = 0

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

Final result = 10

for loop vs map/filter

Traditional for loop

let arr = [1, 2, 3];
let result = [];

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

Works fine, but:

• More code

• Less readable

Using map()

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

Cleaner and easier to understand.

Summary

Array methods make JavaScript much easier and cleaner.

• push/pop → add/remove from end

• shift/unshift → add/remove from start

• forEach → loop through array

• map → transform data

• filter → select data

• reduce → combine data
  If you understand these well, you can handle most real-world problems easily.