Array Methods You Must Know

If you're learning JavaScript, arrays are everywhere user lists, product lists, numbers, API responses… everything.

But knowing arrays isn’t enough.
You must know how to work with them efficiently.

In this article, we’ll learn the most important array methods every beginner must know:

• push() and pop()

• shift() and unshift()

• map()

• filter()

• reduce()

• forEach()

1. push() and pop()

These methods work on the end of the array.

push() – Add to End

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

console.log("Before:", fruits);

fruits.push("mango");

console.log("After:", fruits);

Output:

Before → ["apple", "banana"]

After → ["apple", "banana", "mango"]

push() modifies the original array.

---

pop() – Remove from End

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

console.log("Before:", fruits);

fruits.pop();

console.log("After:", fruits);

Before → ["apple", "banana", "mango"]

After → ["apple", "banana"]

---

2. shift() and unshift()

These methods work on the start of the array.

unshift() – Add to Beginning

let colors = ["blue", "green"];

console.log("Before:", colors);

colors.unshift("red");

console.log("After:", colors);

Before → ["blue", "green"]

After → ["red", "blue", "green"]

---

shift() – Remove from Beginning

let colors = ["red", "blue", "green"];

console.log("Before:", colors);

colors.shift();

console.log("After:", colors);

Before → ["red", "blue", "green"]

After → ["blue", "green"]

---

3. forEach()

Used to loop through 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 printing, logging, or side effects.

---

Traditional for Loop vs forEach()

Traditional Loop

let numbers = [1, 2, 3];

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

forEach()

numbers.forEach(num => console.log(num));

• Cleaner

• Less error-prone'

• No index management

4. map() – Transform Every Element

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

Example: Double Each Number

let numbers = [2, 4, 6];

console.log("Before:", numbers);

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

console.log("After:", doubled);

Before → [2, 4, 6]

After → [4, 8, 12]

Important:

• map() does NOT modify original array.

• It returns a new array.

---

Traditional Loop vs map()

Traditional Way

let result = [];

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

Using map()

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

---

5. filter() – Select Specific Elements

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

Example: Numbers Greater Than 10

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

console.log("Before:", numbers);

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

console.log("After:", filtered);

Before → [5, 12, 8, 20]

After → [12, 20]

---

6. reduce() – Combine Into Single Value (Beginner Version)

Think of reduce() as a way to combine all elements into one value.

Example: Calculate Total Sum

let numbers = [10, 20, 30];

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

console.log(total);

Output:

60

Conclusion:

When learning JavaScript, understanding how to efficiently work with arrays is crucial, as they are used in various contexts such as user lists, product lists, and API responses. This article highlights essential array methods that every beginner should know, including push(), pop(), shift(), unshift(), forEach(), map(), filter(), and reduce().

The push() and pop() methods are used to add and remove elements from the end of an array, respectively, while shift() and unshift() perform similar operations at the beginning of an array. The forEach() method is useful for iterating through an array to execute a function on each element, though it does not return a new array. The map() method transforms each element of an array and returns a new array with the transformed elements. Similarly, filter() creates a new array containing only elements that meet a specified condition.

Finally, the reduce() method is used to combine all elements of an array into a single value, such as calculating a total sum. Understanding and effectively using these methods allows for more efficient and readable code when manipulating arrays in JavaScript.