Array Methods You Must Know

Arrays are everywhere in JavaScript.

we use arrays for list of users , products, comments, marks, messages etc

Example:

const fruits = ["apple", "banana", "mango"];

JavaScript gives us special array methods to work with arrays easily.

Let’s learn the most important ones in a simple way.

push()

push() adds something to the end of the array.

Example:

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

fruits.push("mango");

console.log(fruits);

Output:

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

ELI5 for push()

Imagine adding a new fruit at the end of a basket.

Before:
🍎 🍌

After push("mango"):
🍎 🍌 🥭

---

pop()

pop() removes the last item.

Example:

const fruits = ["apple", "banana", "mango"];

fruits.pop();

console.log(fruits);

Output:

["apple", "banana"]

ELI5 for pop()

Imagine removing the last fruit from the basket.

🍎 🍌 🥭
       ❌

shift()

shift() removes the first item.

Example:

const fruits = ["apple", "banana", "mango"];

fruits.shift();

console.log(fruits);

Output:

["banana", "mango"]

unshift()

unshift() adds something at the beginning.

Example:

const fruits = ["banana", "mango"];

fruits.unshift("apple");

console.log(fruits);

Output:

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

---

forEach()

forEach() runs something for every item.

Example:

const numbers = [1, 2, 3];

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

Output:

1
2
3

ELI5 for forEach()

Imagine a teacher calling each student one by one.

Student 1 → speak
Student 2 → speak
Student 3 → speak

forEach() goes through every item one by one.

map()

map() changes every item and creates a new array.

Example:

const numbers = [1, 2, 3];

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

console.log(doubled);

Output:

[2, 4, 6]

---

ELI5 for map()

Imagine a magic machine.

Every number entering becomes double.

1 → 2
2 → 4
3 → 6

New array:

[2, 4, 6]

---

map() Flow

[1, 2, 3]
    ↓
Multiply each by 2
    ↓
[2, 4, 6]

---

filter()

filter() keeps only matching items.

Example:

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

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

console.log(result);

Output:

[12, 20]

ELI5 for filter()

Imagine a security guard allowing only tall people inside.

5 ❌
12 ✅
8 ❌
20 ✅

Final array:

[12, 20]

---

filter() Flow

[5, 12, 8, 20]
        ↓
Keep only numbers > 10
        ↓
[12, 20]

reduce()

reduce() combines all values into one final value.

Usually used for totals.

Example:

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

const total = numbers.reduce((sum, num) => {
  return sum + num;
}, 0);

console.log(total);

Output:

10

ELI5 for reduce()

Imagine collecting coins.

1 coin
+ 2 coins
+ 3 coins
+ 4 coins
-----------
10 coins total

reduce() keeps adding everything together.

---

reduce() Visual

[1, 2, 3, 4]
      ↓
Add everything
      ↓
10

---

Traditional Loop vs map()

Traditional Loop

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

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

---

map()

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

Cleaner and easier to read.

Simple Mental Model

Method	Simple Meaning
push()	Add at end
pop()	Remove from end
shift()	Remove first
unshift()	Add at beginning
forEach()	Do something for every item
map()	Change every item
filter()	Keep matching items
reduce()	Combine everything