When working with JavaScript, arrays are one of the most commonly used data structures.
If you know how to use array methods properly, your code becomes cleaner, shorter, and easier to understand.

In this blog, we will learn some important JavaScript array methods with simple examples.

We will cover:

• push() and pop()

• shift() and unshift()

• map()

• filter()

• reduce() (basic understanding)

• forEach()

---

1. push() – Add element to the end

adds a new element to the end of an array.

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

console.log("Before:", fruits);//Before: ["apple", "banana"]

fruits.push("mango");

console.log("After:", fruits);//After: ["apple", "banana", "mango"]

---

2. pop() – Remove element from the end

removes the last element from the array.

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

console.log("Before:", fruits); //Before: ["apple", "banana", "mango"]

fruits.pop();

console.log("After:", fruits); //After: ["apple", "banana"]

---

3. shift() – Remove element from the start

removes the first element of the array.

let numbers = [10, 20, 30];

console.log("Before:", numbers); //Before: [10, 20, 30]

numbers.shift();

console.log("After:", numbers); //After: [20, 30]

---

4. unshift() – Add element to the start

adds an element at the beginning of the array.

let numbers = [20, 30];

console.log("Before:", numbers); //Before: [20, 30]

numbers.unshift(10);

console.log("After:", numbers); //After: [10, 20, 30]

---

5. Traditional for loop vs map()

Before map(), we usually used for loops to transform arrays.

Using for loop

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

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

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

Now let's see a cleaner approach using map().

---

6. map() – Transform every element

creates a new array by applying a function to each element.

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

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

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

map() does not modify the original array.

---

---

7. filter() – Select elements based on condition

creates a new array containing only the elements that satisfy a condition.

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

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

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

---

---

8. reduce() – Combine array values into one value

reduce() is used to accumulate values and produce a single result.

Eg: Find sum of numbers

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

let sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum); //10

How reduce works

Start: accumulator = 0

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

Final result → 10

---

9. forEach() – Run a function for each element

simply runs a function on every element of the array. It does not return a new array.

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

fruits.forEach(function(fruit) {
  console.log(fruit);
});

---

Practice Assignment

// 1. Create an array of numbers
let numbers = [2, 5, 8, 12, 15];

// 2. Use map() to double each number
let doubled = numbers.map(num => num * 2);
console.log(doubled); //[4,10,16,24,30]


// 3. Use filter() to get numbers greater than 10
let greaterThanTen = numbers.filter(num => num > 10);
console.log(greaterThanTen);//[12,15]


// 4. Use reduce() to calculate total sum
let sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum);// 42