Array Methods You Must Know

Arrays are one of the most important data structures in JavaScript.

JavaScript provides built-in methods that make working with arrays easier, cleaner, and more readable.

This guide covers the array methods every beginner must know.

What is an Array?

An array stores multiple values in a single variable.

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

push()

Purpose

Adds an item to the end of an array.

Example

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

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

fruits.push("mango");

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

Output

Before: [ 'apple', 'banana' ]
After: [ 'apple', 'banana', 'mango' ]

Visual Representation

Before:
[ apple, banana ]

After push("mango"):
[ apple, banana, mango ]

pop()

Purpose

Removes the last item from an array.

Example

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

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

const removedItem = fruits.pop();

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

Output

Before: [ 'apple', 'banana', 'mango' ]
Removed: mango
After: [ 'apple', 'banana' ]

shift()

Purpose

Removes the first item from an array.

Example

const users = ["Ali", "Ahmed", "Sara"];

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

const removedUser = users.shift();

console.log("Removed:", removedUser);
console.log("After:", users);

Output

Before: [ 'Ali', 'Ahmed', 'Sara' ]
Removed: Ali
After: [ 'Ahmed', 'Sara' ]

unshift()

Purpose

Adds items to the beginning of an array.

Example

const users = ["Ahmed", "Sara"];

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

users.unshift("Ali");

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

Output

Before: [ 'Ahmed', 'Sara' ]
After: [ 'Ali', 'Ahmed', 'Sara' ]

forEach()

Purpose

Runs a function for every item in an array.

Used when:

• You want to loop through data

• You only want side effects like printing/logging

• You do not need a new array

Example

const numbers = [1, 2, 3];

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

Output

1
2
3

Traditional for Loop vs forEach()

Traditional for Loop

const numbers = [10, 20, 30];

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

forEach Version

const numbers = [10, 20, 30];

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

Comparison

map()

Purpose

Creates a new array by transforming each item.

Example Scenario

You have prices in dollars and want prices doubled.

Example

const prices = [100, 200, 300];

console.log("Original:", prices);

const doubledPrices = prices.map((price) => {
  return price * 2;
});

console.log("New:", doubledPrices);

Output

Original: [ 100, 200, 300 ]
New: [ 200, 400, 600 ]

Important Point

map() does not modify the original array.

Before and After State

Original Array:
[ 100, 200, 300 ]

After map():
[ 200, 400, 600 ]

How map() Works

Traditional for Loop vs map()

Traditional Loop

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

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

console.log(doubled);

map() Version

const numbers = [1, 2, 3];

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

console.log(doubled);

filter()

Purpose

Creates a new array containing only items that pass a condition.

Example

Get numbers greater than 10.

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

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

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

console.log("Filtered:", filteredNumbers);

Output

Original: [ 5, 12, 8, 20, 3, 15 ]
Filtered: [ 12, 20, 15 ]

Before and After State

Original:
[ 5, 12, 8, 20, 3, 15 ]

After filter():
[ 12, 20, 15 ]

How filter() Works

Traditional for Loop vs filter()

Traditional Loop

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

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

console.log(results);

filter() Version

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

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

console.log(results);

reduce()

Purpose

Reduces all array items into a single value.

Common uses:

• Sum of numbers

• Total price

• Counting items

Beginner-Friendly Explanation

Think of reduce() as:

Take one value
+
Combine it with next value
+
Keep repeating
+
Return final result

Example

Calculate total sum.

const numbers = [10, 20, 30];

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

console.log(total);

Output

60

Understanding reduce()

How reduce() Accumulates Values

Important Difference Between Methods

Practice in Browser Console

Try every example in:

• Chrome DevTools Console

• Firefox Console

• Node.js terminal

Experiment by changing:

• Numbers

• Conditions

• Strings

• Array sizes

Learning happens fastest when you modify examples yourself.

Assignment

Step 1: Create an Array

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

Step 2: Double Each Number Using map()

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

console.log(doubled);

Step 3: Get Numbers Greater Than 10 Using filter()

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

console.log(greaterThanTen);

Step 4: Calculate Total Sum Using reduce()

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

console.log(total);

These methods are heavily used in:

• React

• Node.js

• APIs

• Data processing

• Frontend applications

• Backend services

Mastering them early will make your JavaScript code:

• Cleaner

• Shorter

• Easier to maintain

• More professional