If you've started learning JavaScript, you've probably worked with arrays already. Arrays are one of the most commonly used data structures because they let us store multiple values in a single variable.

However, simply storing data isn't enough. Most of the time, you'll need to add items, remove items, transform data, filter results, or calculate values. JavaScript provides several built-in array methods that make these tasks much easier.

In this article, we'll explore some of the most useful array methods every beginner should know: push(), pop(), shift(), unshift(), map(), filter(), reduce(), and forEach().

Every example is simple enough to try directly in your browser console or Node.js.

What is an Array?

An array is a collection of values stored in a single variable.

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

Each item has an index starting from 0.

Index:   0        1        2
        ------------------------
Array: | Apple | Banana | Mango |
        ------------------------

1. push()

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

Before

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

["Apple", "Banana"]

Code

fruits.push("Mango");

After

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

Practical Example

Adding a new task to a todo list.

const todos = ["Learn JavaScript"];

todos.push("Build a project");

console.log(todos);

2. pop()

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

Before

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

Code

fruits.pop();

After

["Apple", "Banana"]

pop() also returns the removed value.

const removed = fruits.pop();

console.log(removed);

Output

Mango

3. shift()

shift() removes the first element from an array.

Before

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

Code

fruits.shift();

After

["Banana", "Mango"]

Useful when processing items from the beginning of a queue.

4. unshift()

unshift() adds elements to the beginning of an array.

Before

["Banana", "Mango"]

Code

fruits.unshift("Apple");

After

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

This is commonly used when inserting new notifications or messages at the top of a list.

Summary of Basic Array Methods

MethodActionPositionpush()
AddEndpop()
AddBeginningshift()
RemoveBeginning

5. forEach()

The forEach() method loops through every element in an array.

Unlike map(), it does not create a new array.

const numbers = [1, 2, 3];

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

Output

1
2
3

Use forEach() when you simply want to perform an action for each element, such as printing values or updating the UI.

6. map()

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

Imagine you have student marks and want to add bonus marks to each student.

const marks = [60, 70, 80];

Using map()

const updatedMarks = marks.map((mark) => {
    return mark + 5;
});

console.log(updatedMarks);

Output

[65, 75, 85]

Notice something important.

The original array is not changed.

console.log(marks);

Output

[60, 70, 80]

How map() Works

Original Array

[1] [2] [3] [4]
  │   │   │   │
  ▼   ▼   ▼   ▼
Multiply by 2
  │   │   │   │
  ▼   ▼   ▼   ▼
[2] [4] [6] [8]

New Array

Traditional for Loop vs map()

Using a for loop

const numbers = [1, 2, 3, 4];
const doubled = [];

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

console.log(doubled);

Using map()

const doubled = numbers.map((number) => {
    return number * 2;
});

The second version is shorter, easier to read, and clearly communicates that we're creating a transformed array.

7. filter()

Sometimes we don't want every element.

Instead, we only want elements that satisfy a condition.

That's exactly what filter() does.

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

Code

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

Output

[15, 20]

Again, the original array remains unchanged.

How filter() Works

Original Array

[5] [10] [15] [20]
 │    │    │    │
 ▼    ▼    ▼    ▼

 >10? >10? >10? >10?

 ✗     ✗     ✓     ✓

New Array

[15] [20]

Traditional for Loop vs filter()

Using a for loop

const result = [];

for (let i = 0; i < numbers.length; i++) {

    if (numbers[i] > 10) {
        result.push(numbers[i]);
    }

}

Using filter()

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

The filter() version is cleaner and much easier to understand.

8. reduce()

Among all array methods, reduce() often feels the most confusing to beginners.

But its basic idea is actually very simple.

It takes multiple values and reduces them into a single value.

That value could be:

a total
an average
a product
an object
or many other things

Let's start with the most common example.

const numbers = [10, 20, 30];

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

console.log(total);

Output

Here:

sum stores the running total.
number is the current element.
0 is the starting value.

How reduce() Accumulates Values

Start

Sum = 0

↓

0 + 10 = 10

↓

10 + 20 = 30

↓

30 + 30 = 60

↓

Final Answer = 60

Think of reduce() as carrying a bag. Each number is added into the bag until only one final value remains.

Assignment Practice

Let's combine everything we've learned.

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

Double every number

const doubled = numbers.map((number) => {
    return number * 2;
});

console.log(doubled);

Output

[10, 20, 30, 40]

Get numbers greater than 10

const greaterThanTen = numbers.filter((number) => {
    return number > 10;
});

console.log(greaterThanTen);

Output

[15, 20]

Calculate the total sum

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

console.log(total);

Output

Practice in Your Browser Console

The best way to learn array methods is by experimenting.

Open your browser's Developer Tools (F12) or use Node.js, create a few arrays, and try changing the examples in this article. Add new values, remove elements, change the conditions in filter(), or modify the calculations in map() and reduce().

The more you experiment, the more natural these methods will become.

Conclusion

Array methods are an essential part of JavaScript and something you'll use in almost every project. Methods like push(), pop(), shift(), and unshift() help manage data inside arrays, while forEach(), map(), filter(), and reduce() make it easy to process and transform data without writing long loops.

As a beginner, don't worry about memorizing everything at once. Focus on understanding what each method does, practice with small examples, and gradually use them in your own projects. With enough repetition, these methods will become second nature and significantly improve the readability and efficiency of your code.

Array Methods Every JavaScript Developer Should Know