Common Array Methods in JavaScript

Arrays become much more powerful when we use built-in array methods. These methods allow us to easily add, remove, or transform elements without writing complex loops.

In this article, we will learn some commonly used array methods:

• push()
• pop()
• shift()
• unshift()
• map()
• filter()
• reduce()
• forEach()

These methods help make code shorter, clearer, and easier to maintain.

---

push() and pop()

push()

The push() method adds an element to the end of an array.

Example

Before:

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

fruits.push("Orange");
console.log(fruits);

After:

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

---

pop()

The pop() method removes the last element from an array.

Example

Before:

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

fruits.pop();
console.log(fruits);

After:

["Apple", "Banana"]

---

shift() and unshift()

shift()

The shift() method removes the first element from an array.

Example

Before:

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

fruits.shift();
console.log(fruits);

After:

["Banana", "Mango"]

---

unshift()

The unshift() method adds an element to the beginning of an array.

Example

Before:

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

fruits.unshift("Apple");
console.log(fruits);

After:

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

---

forEach()

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

Example array:

let numbers = [1, 2, 3];

Example:

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

Output:

1
2
3

forEach() is often used when you simply want to perform an action for each element.

---

map()

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

Example array:

let numbers = [1, 2, 3];

Example:

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

console.log(doubled);

Output:

[2, 4, 6]

Original array remains unchanged:

console.log(numbers);

[1, 2, 3]

---

Traditional Loop vs map()

Using a for loop

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

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

Using map()

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

map() is usually shorter and easier to read.

---

filter()

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

Example:

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

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

console.log(result);

Output:

[15, 20]

Original array:

[5, 10, 15, 20]

filter() keeps elements that return true from the condition.

---

reduce() (Basic Explanation)

The reduce() method reduces an array to a single value.

It is often used for tasks like:

• Calculating totals
• Summing numbers
• Combining values

Example array:

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

Example:

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

console.log(sum);

Output:

10

Explanation:

• total keeps the running result
• num is the current element
• 0 is the starting value

The function runs for each element until the final result is produced.

---

Try These Examples Yourself

A good way to understand array methods is to run them in the browser console or Node.js.

Experiment by changing numbers, adding elements, or modifying conditions.

---

Assignment

Questions

1. Create an array of numbers.

2. Use map() to double each number.

3. Use filter() to get numbers greater than 10.

4. Use reduce() to calculate the total sum of the numbers.

---

Answers

1. Create an Array

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

---

2. Use map() to Double Each Number

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

console.log(doubled);

Output:

[10, 20, 30, 40]

---

3. Use filter() for Numbers Greater Than 10

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

console.log(greaterThanTen);

Output:

[15, 20]

---

4. Use reduce() to Calculate the Sum

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

console.log(sum);

Output:

50

---

Conclusion

Array methods such as push(), pop(), map(), filter(), reduce(), and forEach() make working with arrays much easier and more expressive.

Learning these methods allows developers to write cleaner code and handle data more efficiently. As you continue learning JavaScript, these methods will become essential tools for solving real-world problems.