Array Methods You Must Know

When beginners start JavaScript then mostly they use normal for loop for everything. And honestly this is normal because array methods looks confusing in starting.

But after some time you realize array methods make code smaller, cleaner and easy to understand.

Before jumping into frameworks like React or backend development these array methods are must know.

So let's understand the most important array methods with simple examples. Try all examples in browser console because practice is the fastest teacher here.

---

push() Method

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

let fruits = ["Apple", "Banana"]

fruits.push("Mango")

console.log(fruits)

Output

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

Before Array

["Apple", "Banana"]

After Array

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

Simple use case is adding new item in cart, messages list or student records.

---

pop() Method

pop() removes last element from array.

let fruits = ["Apple", "Banana", "Mango"]

fruits.pop()

console.log(fruits)

Output

["Apple", "Banana"]

Before Array

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

After Array

["Apple", "Banana"]

---

shift() Method

shift() removes first element from array.

let students = ["Rahul", "Ankit", "Rohit"]

students.shift()

console.log(students)

Output

["Ankit", "Rohit"]

---

unshift() Method

unshift() adds element at beginning of array.

let students = ["Ankit", "Rohit"]

students.unshift("Rahul")

console.log(students)

Output

["Rahul", "Ankit", "Rohit"]

---

forEach() Method

forEach() is used to loop through array.

Earlier people mostly use for loop like this.

let numbers = [1, 2, 3]

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

Now same thing using forEach().

let numbers = [1, 2, 3]

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

This looks cleaner and readable.

Important thing.

forEach() only loops. It does not create new array.

---

map() Method

map() is one of the most important array methods.

It creates a new array by modifying every element.

Example.

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

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

console.log(doubled)

Output

[2, 4, 6, 8]

Original Array

[1, 2, 3, 4]

New Array

[2, 4, 6, 8]

map() does not change original array. It returns new array.

---

filter() Method

filter() is used to filter data based on condition.

Suppose we want numbers greater than 10.

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

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

console.log(result)

Output

[12, 20]

Original Array

[5, 12, 8, 20]

Filtered Array

[12, 20]

filter() also returns new array.

---

reduce() Method

Many beginners get scared from reduce() because syntax looks little strange. But basic idea is simple.

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

Mostly used for total sum.

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

let total = numbers.reduce((accumulator, currentValue) => {
    return accumulator + currentValue
}, 0)

console.log(total)

Output

10

Here accumulator stores running total.

Step by Step

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

Final Output

10

---

Traditional Loop vs map() and filter()

Traditional for loop works fine and still important. But map() and filter() make intention more clear.

If transforming data then use map(). If filtering data then use filter(). If only looping then use forEach().

This makes code easy to read for other developers also.

---

Small Practice Assignment

Create an array of numbers.

let numbers = [2, 5, 8, 12, 15]

Now try these tasks yourself.

Use map() to double every number. Use filter() to get numbers greater than 10. Use reduce() to calculate total sum.

Practice these methods multiple times because these are heavily used in React, Node.js and modern JavaScript projects.