JavaScript Array Methods Every Beginner Should Know

In the previous article, we explored Arrays and Loops in JavaScript and learned how loops help us repeat tasks efficiently.

We also saw how loops can be used to iterate through arrays and process each element one by one.

For example, suppose we have an array of numbers:

const numbers = [2, 4, 6, 8];

If we want to print each number in the array, we can use a for loop like this:

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

This works perfectly fine. In fact, using loops to process arrays is a very common pattern in programming.

But as programs grow larger, developers often look for ways to write cleaner and more expressive code.

Imagine we want to perform operations like:

• Adding new elements to an array

• Removing elements from an array

• Transforming each value inside an array

• Filtering elements based on a condition

• Calculating a total value from all elements

Writing loops for each of these tasks can quickly make the code long and repetitive.

So the natural question becomes:

Is there a simpler way to perform common operations on arrays without writing loops every time?

And the answer is yes.

JavaScript provides several built-in array methods that make working with arrays much easier.

These methods allow us to add elements, remove elements, transform data, and process arrays efficiently.

---

In this article, we will explore some of the most commonly used array methods in JavaScript, including:

• push() and pop()

• shift() and unshift()

• forEach()

• map()

• filter()

• reduce()

By the end of this article, you will understand how these methods help us write cleaner and more readable code when working with arrays.

Let’s start with the first group of methods used to add and remove elements from arrays.

---

Adding and Removing Elements in Arrays

Before we proceed towards the methods, it is helpful to understand an important idea.

Some array methods modify the original array, while others return a new array without changing the original one.

Methods that modify the original array are called mutating methods.

In this section, we will look at four commonly used mutating methods that help us add and remove elements from arrays:

• push()

• pop()

• shift()

• unshift()

---

1️⃣ The push() Method

The push() method is used to add one or more elements to the end of an array.

For example:

const fruits = ["Apple", "Banana", "Mango"];
fruits.push("Orange");

console.log(fruits);

Output:

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

What Happened Here?

Before push()	After push()
["Apple", "Banana", "Mango"]	["Apple", "Banana", "Mango", "Orange"]

As you can see, the new element "Orange" is added at the end of the array.

Note: The push() method also returns the new length of the array, although in many cases we simply use it to add elements.

Take a look at this example:

const fruits = ["Apple", "Banana", "Mango"];
const newLength = fruits.push("Orange");

console.log(newLength);

Output:

4

Got yourself curious? Now go to the browser console and try it.

---

2️⃣ The pop() Method

While push() adds an element to the end of the array, the pop() method does the opposite.

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

For example:

const fruits = ["Apple", "Banana", "Mango"];
fruits.pop();

console.log(fruits);

Output:

["Apple", "Banana"]

What Happened Here?

Before pop()	After pop()
["Apple", "Banana", "Mango"]	["Apple", "Banana"]

As you can see, the element "Mango" has been removed from the end of the array.

Another useful thing to know is that pop() returns the removed element.

Take a look at this example:

const fruits = ["Apple", "Banana", "Mango"];
const removedFruit = fruits.pop();

console.log(removedFruit);

Output:

Mango

So the pop() method both:

• removes the last element

• returns the element that was removed

---

3️⃣ The shift() Method

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

In other words, it removes the first element.

For example:

const fruits = ["Apple", "Banana", "Mango"];
fruits.shift();

console.log(fruits);

Output:

["Banana", "Mango"]

What Happened Here?

Before shift()	After shift()
["Apple", "Banana", "Mango"]	["Banana", "Mango"]

Just like pop(), the shift() method also returns the removed element.

---

4️⃣ The unshift() Method

The unshift() method works in the opposite way of shift().

It adds one or more elements to the beginning of an array.

For example:

const fruits = ["Banana", "Mango"];
fruits.unshift("Apple");

console.log(fruits);

Output:

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

What Happened Here?

Before unshift()	After unshift()
["Banana", "Mango"]	["Apple", "Banana", "Mango"]

Like push(), the unshift() method also returns the new length of the array.

---

Processing Elements in an Array

In the previous section, we explored some mutating array methods that allow us to add or remove elements from an array.

However, very often we don’t just want to add or remove elements. Instead, we want to perform some operation on each element of the array.

So, JavaScript provides several methods that make these tasks much easier. Some of the most commonly used methods in this category include:

• forEach()

• map()

• filter()

• reduce()

Let’s start by understanding the forEach() method.

---

1️⃣ The forEach() Method

The forEach() method allows us to execute a function for every element in an array.

In simple terms, it runs a piece of code once for each item in the array.

Syntax

A basic forEach() method looks like this:

array.forEach(function(element) {
  // code to execute
});

Here:

• array is the array we want to work with

• element represents each value in the array

• the function runs once for every element

Example

Suppose we have an array of numbers.

const numbers = [2, 4, 6, 8];

We can use forEach() to print each number.

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

Output:

2
4
6
8

---

What Happened Here?

Let’s understand how the method executes.

Iteration	Value of num	Output
1	2	2
2	4	4
3	6	6
4	8	8

Here’s what happens step by step:

• JavaScript takes the first element of the array (2) and passes it to the function

• The function runs and prints the value

• The same process repeats for the remaining elements

So the function runs once for every element in the array.

---

Arrow Function Version

In modern JavaScript, developers often use arrow functions to make the code shorter.

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

This works exactly the same way but uses a more concise syntax.

---

Important Thing to Remember

Unlike some other array methods, the forEach() method does not return a new array.

Its main purpose is simply to execute a function for each element.

Example:

const numbers = [1, 2, 3];
const result = numbers.forEach(num => num * 2);

console.log(result);

Output:

undefined

This happens because forEach() is designed for running code, not for creating a new array.

---

Now that we understand how to run a function for each element in an array, the next question becomes:

What if we want to create a new array by transforming each element of the original array?

For that, JavaScript provides another powerful method called map().

Let’s explore it in the next section.

---

2️⃣ The map() Method

Before understanding what map() does, let's first see why such a method is useful.

For example, imagine we have an array of numbers and we want to double each number.

const numbers = [2, 4, 6, 8];

We want the result to be:

[4, 8, 12, 16]

One way to do this is by using a traditional for loop.

const numbers = [2, 4, 6, 8];
const doubled = [];

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

console.log(doubled);

Output:

[4, 8, 12, 16]

This works perfectly fine. But notice that we had to:

• create a new array

• loop through the original array

• manually push the new values

---

So, JavaScript provides a cleaner way to perform this kind of transformation using the map() method.

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

Syntax

array.map(function(element) {
  // return transformed value
});

Here:

• array is the original array

• element represents each value of the array

• the function returns the new value for the new array

Example

Let’s use map() to double each number in an array.

const numbers = [2, 4, 6, 8];

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

console.log(doubled);
console.log(numbers);

Output:

[4, 8, 12, 16]
[2, 4, 6, 8]

---

What Happened Here?

Original Array	New Array (After map())
[2, 4, 6, 8]	[4, 8, 12, 16]

Notice something important:

The original array remains unchanged, and map() returns a new array.

---

How map() Executes

Iteration	Value of num	Returned Value	New Array
1	2	4	[4]
2	4	8	[4, 8]
3	6	12	[4, 8, 12]
4	8	16	[4, 8, 12, 16]

Here’s what happens step by step:

• JavaScript takes the first element of the array

• The function runs and returns a new value

• That value is added to the new array

• The process repeats for every element

---

Arrow Function Version

In modern JavaScript, this is often written using an arrow function.

const doubled = numbers.map(num => num * 2);

---

Now we know how to transform every element of an array using the map() method.

But sometimes we may not want to transform all the elements. Instead, we might want to select only certain elements from the array based on a condition.

So the question becomes:

How can we filter specific elements from an array while ignoring the others?

Let’s explore this in the next section.

---

3️⃣ The filter() Method

Before understanding how the filter() method works, let’s first see why we need it.

Suppose we have the following array:

const numbers = [5, 10, 15, 20, 25];

Now imagine we want to get only the numbers greater than 10.

The expected result would be:

[15, 20, 25]

One way to solve this problem is by using a traditional for loop.

const numbers = [5, 10, 15, 20, 25];
const result = [];

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] > 10) {
    result.push(numbers[i]);
  }
}

console.log(result);

Output:

[15, 20, 25]

This works perfectly fine. But notice that we had to:

• create a new array

• loop through the original array

• manually check a condition

• manually push elements into the new array

---

So, JavaScript provides a cleaner and more expressive way to perform this task using the filter() method.

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

Syntax

A basic filter() method looks like this:

array.filter(function(element) {
  return condition;
});

Here:

• array is the original array

• element represents each value in the array

• the function returns true or false

If the condition returns true, the element is included in the new array. If it returns false, the element is skipped.

Example

Let’s use filter() to get the numbers greater than 10.

const numbers = [5, 10, 15, 20, 25];

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

console.log(result);

Output:

[15, 20, 25]

---

What Happened Here?

Original Array	Filtered Array
[5, 10, 15, 20, 25]	[15, 20, 25]

Notice something important:

The original array remains unchanged, and filter() returns a new array.

---

How filter() Executes

Element	Condition num > 10	Included in Result
5	false	❌
10	false	❌
15	true	✅
20	true	✅
25	true	✅

So the final array becomes:

[15, 20, 25]

---

Arrow Function Version

Just like map(), the filter() method is often written using an arrow function in modern JavaScript.

const result = numbers.filter(num => num > 10);

---

Now that we understand how to transform elements using map() and select elements using filter(), the next question becomes:

What if we want to combine all elements of an array into a single value, such as calculating the sum of all numbers?

Let’s explore this in the next section.

---

4️⃣ The reduce() Method

So far, we have explored several useful array methods.

But sometimes we need to do something slightly different. Instead of creating a new array, we may want to combine all elements of an array into a single value.

For example, imagine we have an array of numbers:

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

Now suppose we want to calculate the total sum of all numbers.

The expected result would be:

50

One way to solve this problem is by using a traditional for loop.

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

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

console.log(sum);

Output:

50

This works perfectly fine. But notice what we had to do:

• create a variable (sum)

• loop through the array

• keep updating the total value

---

So, JavaScript provides a method that simplifies this process by reducing an array to a single value.

This method is called reduce().

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

This value could be:

• a sum

• a product

• a single object

• or any accumulated result such as a total or count

Syntax

A basic reduce() method looks like this:

array.reduce(function(accumulator, currentValue) {
  return updatedValue;
}, initialValue);

Here:

• accumulator → stores the accumulated result

• currentValue → the current element being processed

• initialValue → the starting value of the accumulator

Example

Let’s calculate the sum of numbers using reduce().

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

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

console.log(total);

Output:

50

---

What Happened Here?

Iteration	Accumulator (sum)	Current Value (num)	New Value
1	0	5	5
2	5	10	15
3	15	15	30
4	30	20	50

Step by step:

• The accumulator starts with the initial value 0

• The first number 5 is added → result becomes 5

• Then 10 is added → result becomes 15

• Then 15 is added → result becomes 30

• Finally 20 is added → result becomes 50

At the end, reduce() returns the final accumulated value.

---

Arrow Functions Version

In modern JavaScript, this is often written using an arrow function.

const total = numbers.reduce((sum, num) => sum + num, 0);

---

Quick Summary

---

Practice Time

Now that we have explored several useful array methods in JavaScript, let’s practice a few examples to strengthen our understanding.

Try running these examples in your browser console and observe how each method behaves.

1. Double Each Number Using map()

Create an array of numbers and use the map() method to double each value.

const numbers = [2, 4, 6, 8];
const doubled = numbers.map(num => num * 2);

console.log(doubled);

Expected Output:

[4, 8, 12, 16]

2. Filter Numbers Greater Than 10

Use the filter() method to get only the numbers greater than 10.

const numbers = [5, 10, 15, 20, 25];
const result = numbers.filter(num => num > 10);

console.log(result);

Expected Output:

[15, 20, 25]

3. Calculate Total Sum Using reduce()

Use the reduce() method to calculate the total sum of numbers in an array.

const numbers = [5, 10, 15, 20];
const total = numbers.reduce((sum, num) => sum + num, 0);

console.log(total);

Expected Output:

50

4. Print Each Element Using forEach()

Use forEach() to print each element of an array.

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

fruits.forEach(fruit => {
  console.log(fruit);
});

Output:

Apple
Banana
Mango

Try modifying these examples by changing the numbers or conditions. Experimenting like this is one of the best ways to understand how array methods work.

---

Wrapping Up

In this article, we explored several important array methods in JavaScript that help us write cleaner and more expressive code.

We learned how to:

• Add and remove elements using push(), pop(), shift(), and unshift()

• Run a function for each element using forEach()

• Transform elements using map()

• Filter elements based on a condition using filter()

• Combine all elements into a single value using reduce()

These methods allow us to perform many common operations on arrays without writing long loops, making our code more readable and easier to maintain.

---

What's Next?

So far in this series, we have explored several topics including arrays, loops, and now array methods.

But arrays are not the only way to organize data in JavaScript.

Often, we need to store structured information using key–value pairs, such as storing details about a user, a product, or a configuration.

For that, JavaScript provides another important data structure called objects.

In the next article, we will explore Objects in JavaScript, where we will learn:

• What objects are

• How to create objects

• How to access and modify object properties

• And how objects help us represent real-world data in a structured way in our programs.

---

⬅ Previous Article: Loops in JavaScript

➡ Next Article: Objects in JavaScript