Array Methods You Must Know

Hey Everyone,

In this blog, we will be learning about Array methods.

JavaScript provides us with different array methods that make working with arrays easier and cleaner than writing long loops.

In this article, we’ll understand some important array methods:

• push() and pop()

• shift() and unshift()

• map()

• filter()

• reduce()

• forEach()

1. push() and pop()

These methods work on the end of an array.

push()

Adds an element to the end of the array.

Example

let arr = ["a", "b"];


console.log(arr); // ["a","b"]

arr.push("c");

console.log(arr); // ["a","b","c"]

---

pop()

Removes the last element from the array.

Example

let arr = ["a","b","c"]


console.log(arr); // ["a","b"]

arr.pop();

console.log(arr); //["a","b"]

---

2. shift() and unshift()

These methods work on the beginning of the array.

---

shift()

Removes the first element.

let arr = [1, 2, 3];


arr.shift();

console.log(arr); // [2,3]

---

unshift()

Adds an element to the beginning.

let arr = [2, 3];


arr.unshift(1);

console.log(arr); // [1,2,3]

---

3. forEach()

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

Example

let numbers = [1,2,3];

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

Output:

1
2
3

Important:

forEach() does not return a new array. It is mainly used for things like logging or updating values.

---

4. map()

map() creates a new array by transforming each element.

---

Using a Traditional For Loop

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

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

console.log(result);

Output

[2,4,6]

---

Using map()

let numbers = [1,2,3];

let result = numbers.map((num)=>num*2)

console.log(result); // [2,4,6]

map() is cleaner and easier to read.

---

5. filter()

filter() creates a new array with elements that pass a condition.

---

Using For Loop

let numbers = [5,10,15,20];
let result = [];

for(let i = 0; i < numbers.length; i++){
  if(numbers[i] > 10){
    result.push(numbers[i]);
  }
}

console.log(result);

Output

[15,20]

---

Using filter()

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

let result = numbers.filter((num)=>num>10)

console.log(result); // [15,20]

---

Flow of filter()

// Original Array
[5,10,15,20]

// Check Condition (>10)

/*
5  → ❌
10 → ❌
15 → ✅
20 → ✅

New Array
*/
[15,20]

---

6. reduce()

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

Common uses:

• sum of numbers

• product

• counting values

---

Example: Sum of Numbers

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

let total = numbers.reduce((accumulator, current)=>accumulator+current,0);

console.log(total); // 10

How reduce works

Start value (accumulator) = 0

Step 1
0 + 1 = 1

Step 2
1 + 2 = 3

Step 3
3 + 3 = 6

Step 4
6 + 4 = 10

---

And now, you know what array methods are.

If you have any doubt or want to connect, feel free to drop a comment — I’d be happy to help.

Thanks for reading, and see you in the next blog!

Peace ✌️ and Happy Learning!