---

Array Methods Every JavaScript Developer Must Know

Arrays are one of the most commonly used data structures in JavaScript.
To work efficiently with arrays, developers rely on built-in array methods that help manipulate and transform data easily.

In this article, we will learn some of the most important array methods every developer should know.

---

1. push() and pop()

These methods are used to add or remove elements from the end of an array.

push()

Adds an element to the end of an array.

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

fruits.push("orange");

console.log(fruits);

Before

["apple", "banana"]

After

["apple", "banana", "orange"]

---

pop()

Removes the last element from the array.

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

fruits.pop();

console.log(fruits);

Before

["apple", "banana", "orange"]

After

["apple", "banana"]

---

2. shift() and unshift()

These methods work with the start of the array.

shift()

Removes the first element.

let numbers = [1, 2, 3];

numbers.shift();

console.log(numbers);

Before

[1, 2, 3]

After

[2, 3]

---

unshift()

Adds an element to the beginning of the array.

let numbers = [2, 3];

numbers.unshift(1);

console.log(numbers);

Before

[2, 3]

After

[1, 2, 3]

---

3. forEach()

The forEach() method runs a function once for every element in an array.

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 side effects like logging or updating values.

---

4. map()

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

Example: Double each number

let numbers = [2, 4, 6];

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

console.log(doubled);

Before

[2, 4, 6]

After

[4, 8, 12]

---

Traditional Loop vs map()

Using for loop

let numbers = [2,4,6];
let result = [];

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

Using map()

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

✅ map() is shorter, cleaner, and easier to read.

---

5. filter()

The filter() method creates a new array containing only elements that pass a condition.

Example: Get numbers greater than 10

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

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

console.log(filtered);

Before

[5, 12, 8, 20]

After

[12, 20]

---

6. reduce() (Beginner Friendly)

The reduce() method combines all values of an array into a single result.

It works using an accumulator.

Example: Calculate total sum

let numbers = [10, 20, 30];

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

console.log(sum);

How it works

Step	Accumulator	Current Value	Result
1	0	10	10
2	10	20	30
3	30	30	60

Final Result:

60

---

Assignment Practice

Try this yourself in the console.

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

// double numbers
let doubled = numbers.map(num => num * 2);

// numbers greater than 10
let filtered = numbers.filter(num => num > 10);

// total sum
let sum = numbers.reduce((acc, num) => acc + num, 0);

console.log(doubled);
console.log(filtered);
console.log(sum);

---