JavaScript Array Methods You Need to Know

Arrays become truly powerful once you learn the built-in methods JavaScript gives you to work with them. Instead of writing manual loops for everything, you can use purpose-built methods that are shorter, clearer, and expressive.

In this article we will cover the most commonly used array methods — from simple add and remove operations to powerful transformation tools like map(), filter(), and reduce().

Modifying Arrays: push(), pop(), shift(), unshift()

These four methods add or remove elements from an array. They are the bread and butter of array manipulation.

push() — Add to the end

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

fruits.push("Mango");

console.log(fruits); // ["Apple", "Banana", "Mango"]

pop() — Remove from the end

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

fruits.pop();

console.log(fruits); // ["Apple", "Banana"]

pop() removes the last element and also returns it, so you can capture it if needed:

let removed = fruits.pop();
console.log(removed); // "Banana"

unshift() — Add to the beginning

let fruits = ["Banana", "Mango"];

fruits.unshift("Apple");

console.log(fruits); // ["Apple", "Banana", "Mango"]

shift() — Remove from the beginning

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

fruits.shift();

console.log(fruits); // ["Banana", "Mango"]

Quick reference

forEach() — Loop Through Every Element

forEach() runs a function once for every element in an array. It is a clean alternative to a traditional for loop when you just want to do something with each item.

Traditional for loop:

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

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

Same thing with forEach():

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

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

Same output, less code. forEach() does not return a new array — it just iterates.

let names = ["Alice", "Bob", "Charlie"];

names.forEach(name => {
  console.log("Hello, " + name + "!");
});
// "Hello, Alice!"
// "Hello, Bob!"
// "Hello, Charlie!"

map() — Transform Every Element

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

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

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

console.log(numbers); // [1, 2, 3, 4, 5]  — unchanged
console.log(doubled); // [2, 4, 6, 8, 10] — new array

Think of it as an assembly line — every item goes in, gets transformed, and comes out the other side:

Input:  [1,   2,   3,   4,   5  ]
         |    |    |    |    |
        x2   x2   x2   x2   x2
         |    |    |    |    |
Output: [2,   4,   6,   8,   10 ]

Another example — convert an array of names to uppercase:

let names = ["alice", "bob", "charlie"];

let upper = names.map(name => name.toUpperCase());

console.log(upper); // ["ALICE", "BOB", "CHARLIE"]

For loop vs map():

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

// map() — same result, much cleaner
let doubled = numbers.map(num => num * 2);

filter() — Keep Only What Passes a Test

filter() creates a new array containing only the elements that pass a condition. Elements that fail the test are excluded.

let numbers = [3, 8, 15, 4, 22, 7, 11];

let bigNumbers = numbers.filter(num => num > 10);

console.log(bigNumbers); // [15, 22, 11]

Each element is tested — keep it or drop it:

Input:  [3,    8,    15,   4,    22,   7,    11  ]
         |     |     |     |     |     |     |
       fail   fail  pass  fail  pass  fail  pass
                    |           |           |
Output:           [ 15,         22,        11  ]

Another example — filter only even numbers:

let numbers = [1, 2, 3, 4, 5, 6, 7, 8];

let evens = numbers.filter(num => num % 2 === 0);

console.log(evens); // [2, 4, 6, 8]

For loop vs filter():

// For loop
let evens = [];
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0) evens.push(numbers[i]);
}

// filter() — same result, much cleaner
let evens = numbers.filter(num => num % 2 === 0);

reduce() — Combine Everything Into One Value

reduce() processes every element in an array and accumulates them into a single result. It is commonly used for summing numbers, but it can do much more.

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

let total = numbers.reduce((accumulator, current) => accumulator + current, 0);

console.log(total); // 15

There are two key pieces to understand:

• accumulator — the running total, updated on every step

• current — the element being processed right now

• 0 — the starting value of the accumulator

Here is how it runs step by step:

Here is how it runs step by step:

Start: accumulator = 0

Step 1: 0 + 1 = 1   (accumulator is now 1)
Step 2: 1 + 2 = 3   (accumulator is now 3)
Step 3: 3 + 3 = 6   (accumulator is now 6)
Step 4: 6 + 4 = 10  (accumulator is now 10)
Step 5: 10 + 5 = 15 (accumulator is now 15)

Result: 15

Think of the accumulator as a running total on a calculator. Each number gets added to whatever the total already is.

forEach vs map vs filter vs reduce

Putting It All Together

let prices = [120, 45, 300, 80, 210, 30];

// Add a new price
prices.push(175);
console.log(prices); // [120, 45, 300, 80, 210, 30, 175]

// Apply a 10% discount to all prices
let discounted = prices.map(price => price * 0.9);
console.log(discounted); // [108, 40.5, 270, 72, 189, 27, 157.5]

// Keep only prices above 100
let expensive = prices.filter(price => price > 100);
console.log(expensive); // [120, 300, 210, 175]

// Calculate total of all prices
let total = prices.reduce((sum, price) => sum + price, 0);
console.log(total); // 960

Practice Assignment

Work through these steps using a single array of numbers:

1. Create an array of numbers:

let numbers = [4, 9, 15, 3, 22, 8, 17, 6];

2. Use map() to double each number:

let doubled = numbers.map(num => num * 2);
console.log(doubled); // [8, 18, 30, 6, 44, 16, 34, 12]

3. Use filter() to get numbers greater than 10:

let greaterThanTen = numbers.filter(num => num > 10);
console.log(greaterThanTen); // [15, 22, 17]

4. Use reduce() to calculate the total sum:

let sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 84

Try running each step in your browser console. Change the numbers and observe how each method responds.

Quick Recap

• push() and pop() add and remove from the end of an array

• unshift() and shift() add and remove from the beginning

• forEach() loops through every element without returning anything

• map() transforms every element and returns a new array

• filter() keeps only elements that pass a condition and returns a new array

• reduce() combines all elements into a single value using an accumulator

• None of these methods modify the original array — except push(), pop(), shift(), and unshift()

These methods are the foundation of working with data in JavaScript. Once they feel comfortable, you will start reaching for them instead of for loops almost every time.

Happy coding! 🚀

If you enjoyed this article, check out my other blogs on this profile. 🔗 Connect with me: LinkedIn | GitHub | X (Twitter)