Array Methods You Must Know (JavaScript)

Introduction

Arrays are one of the most commonly used data structures in JavaScript. Almost every JavaScript program works with lists of data such as numbers, user information, products, or messages. Because of this, JavaScript provides several built-in methods that make working with arrays easier and more efficient.

In this article, we will learn some of the most important array methods every beginner should know. These include push(), pop(), shift(), unshift(), map(), filter(), reduce(), and forEach().

Each method will be explained with a simple example and a clear before-and-after view of the array. You can try these examples in the browser console to understand how they work.

---

Main Content

push()

The push() method adds one or more elements to the end of an array. It also returns the new length of the array.

Example:

let numbers = [1, 2, 3];

// Add a new element
numbers.push(4);

console.log(numbers);

Output:

[1, 2, 3, 4]

Before the operation, the array contained [1, 2, 3].

After using push(), the array becomes [1, 2, 3, 4].

This method is useful when you want to add new data to the end of a list.

---

pop()

The pop() method removes the last element from an array and returns that removed element.

Example:

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

let removed = numbers.pop();

console.log(numbers);
console.log(removed);

Output:

[1, 2, 3]
4

Before the operation, the array was [1, 2, 3, 4].

After using pop(), the last element 4 is removed.

---

unshift()

The unshift() method adds one or more elements to the beginning of an array.

Example:

let numbers = [2, 3, 4];

numbers.unshift(1);

console.log(numbers);

Output:

[1, 2, 3, 4]

Before the operation, the array was [2, 3, 4].

After using unshift(), the value 1 is added at the beginning.

---

shift()

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

Example:

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

let removed = numbers.shift();

console.log(numbers);
console.log(removed);

Output:

[2, 3, 4]
1

Before the operation, the array was [1, 2, 3, 4].

After using shift(), the first element 1 is removed.

---

forEach()

The forEach() method runs a function once for every element in the array. It is commonly used when you want to perform an action on each item.

Example:

let numbers = [1, 2, 3];

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

Output:

1
2
3

The method goes through each element in the array and prints it.

---

map()

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

Example:

let numbers = [1, 2, 3];

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

console.log(doubled);

Output:

[2, 4, 6]

Before the operation, the array was [1, 2, 3].

After using map(), a new array [2, 4, 6] is created.

Comparison with a for loop

Using a traditional loop:

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

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

console.log(doubled);

The map() method is shorter and easier to read.

---

filter()

The filter() method creates a new array that contains only the elements that match a given condition.

Example:

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

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

console.log(result);

Output:

[15, 20]

Before filtering, the array was [5, 10, 15, 20].

After applying filter(), only numbers greater than 10 remain.

---

reduce() (basic idea)

The reduce() method processes all elements of an array and combines them into a single value.

Example: calculating the sum of numbers.

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

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

console.log(total);

Output:

10

In this example:

• accumulator stores the running total.

• current represents the current element being processed.

The final result is the total sum of all numbers in the array.

---

Practice Assignment

Try the following exercise:

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.

Example:

let nums = [2, 5, 6, 11, 3, 8];

let doubled = nums.map(n => n * 2);
let greaterThanTen = doubled.filter(n => n > 10);
let total = greaterThanTen.reduce((acc, n) => acc + n, 0);

console.log(doubled);
console.log(greaterThanTen);
console.log(total);

---

Conclusion

JavaScript provides many built-in array methods that make working with lists of data much easier. Methods like push(), pop(), shift(), and unshift() help add or remove elements. Methods like map(), filter(), and reduce() help transform and process arrays efficiently.

For beginners, it is important to practice these methods in the browser console and understand how they change the array before and after each operation. Once you become comfortable with these methods, you will be able to write cleaner and more readable JavaScript code.

Learning these core array methods is an important step toward becoming confident in JavaScript programming.