JavaScript arrays are one of the most used data structures in web development. If you understand a few core array methods, your code becomes shorter, cleaner, and easier to read.

In this article we will learn the most important array methods every beginner should know:

• push() and pop()

• shift() and unshift()

• map()

• filter()

• reduce() (basic idea)

• forEach()

Every method will include:

• A simple explanation

• Before → after array state

• A practical example

You should try the examples in your browser console as you read.

Prerequisites

Before reading this article you should know:

• What a JavaScript array is

• Basic JavaScript syntax

• How to open the browser console (F12)

Example array:

const numbers = [2, 5, 8, 12];

Quick Overview of Methods

Method	What it does
push()	Adds item to the end
pop()	Removes last item
shift()	Removes first item
unshift()	Adds item to the beginning
map()	Creates a new array by transforming values
filter()	Creates a new array with selected values
reduce()	Combines array values into a single result
forEach()	Runs a function for each item

push() and pop()

These methods modify the end of an array.

push()

Adds a new element to the end.

Example

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

fruits.push("mango");

console.log(fruits);

Before

["apple", "banana"]

After

["apple", "banana", "mango"]

pop()

Removes the last element from the array.

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

fruits.pop();

console.log(fruits);

Before

["apple", "banana", "mango"]

After

["apple", "banana"]

shift() and unshift()

These methods modify the beginning of the array.

shift()

Removes the first element.

let numbers = [10, 20, 30];

numbers.shift();

console.log(numbers);

Before

[10, 20, 30]

After

[20, 30]

unshift()

Adds a value at the start.

let numbers = [20, 30];

numbers.unshift(10);

console.log(numbers);

Before

[20, 30]

After

[10, 20, 30]

map()

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

It does not modify the original array.

Example: Double each number

const numbers = [2, 5, 8];

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

console.log(doubled);

Output

[4, 10, 16]

Original array remains:

[2, 5, 8]

How map works

flowchart LR
A[2] --> B[2 * 2 = 4]
C[5] --> D[5 * 2 = 10]
E[8] --> F[8 * 2 = 16]

Each value is transformed into a new value.

filter()

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

Example: Numbers greater than 10

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

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

console.log(result);

Output

[12, 20]

Original array stays the same.

How filter works

flowchart LR
A[5] --> B{>10?}
C[12] --> D{>10?}
E[8] --> F{>10?}
G[20] --> H{>10?}

B -->|No| X[Removed]
D -->|Yes| Y[Keep]
F -->|No| Z[Removed]
H -->|Yes| W[Keep]

reduce() (Beginner Explanation)

reduce() combines array values into a single result.

Common uses:

• Sum of numbers

• Total price

• Counting items

Example: Calculate sum

const numbers = [2, 5, 8];

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

console.log(total);

Output

15

Explanation:

• Start with 0

• Add each number

• Return final result

How reduce accumulates values

flowchart LR
A[Start: 0] --> B[0 + 2 = 2]
B --> C[2 + 5 = 7]
C --> D[7 + 8 = 15]

Final result = 15

forEach()

forEach() runs a function for every element in the array.

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

Example

const numbers = [1, 2, 3];

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

Output

1
2
3

Traditional for Loop vs map() / filter()

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);
}

Using map()

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

map() is shorter and easier to read.

Mini Practice Assignment

Try this in your console.

Step 1

Create an array:

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

Step 2 — Double numbers

Use map().

Expected result:

[10, 20, 30, 40]

Step 3 — Numbers greater than 10

Use filter().

Expected result:

[15, 20]

Step 4 — Calculate total

Use reduce().

Expected result:

50

Quick Cheat Sheet

Method	Returns New Array?	Modifies Original?
push	❌	✅
pop	❌	✅
shift	❌	✅
unshift	❌	✅
map	✅	❌
filter	✅	❌
reduce	❌	❌
forEach	❌	❌

Conclusion

Understanding array methods is a core JavaScript skill.

With just a few methods like map, filter, and reduce, you can write cleaner and more powerful code.

Instead of writing long loops, you can transform and process data with simple readable functions.

If you're learning JavaScript, practice these methods in the console and try building small examples yourself.

The more you use them, the more natural they will feel.