JavaScript Array Methods You Actually Need to Know

If you have been writing JavaScript for a little while, you already know what an array is. You have used for loops to go through them, maybe pushed a few items in, and called it a day. That works. But JavaScript gives you a set of built-in array methods that make this kind of work cleaner, more readable, and frankly more enjoyable to write.

This guide covers the six methods you will reach for most often: push(), pop(), shift(), unshift(), map(), filter(), reduce(), and forEach(). Each one is explained with a practical example so you can see exactly what is happening to your data before and after.

Open your browser console as you read this. Type the examples out yourself. That single habit will do more for your understanding than any amount of reading.

---

1. push() and pop()

These two are the simplest place to start. They both work on the end of an array.

push() adds one or more items to the end. pop() removes the last item and returns it to you.

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

// push() adds to the end
fruits.push("grape");

console.log(fruits);
// ["apple", "banana", "mango", "grape"]

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

// pop() removes from the end and returns the removed item
let removed = fruits.pop();

console.log(removed); // "grape"
console.log(fruits);  // ["apple", "banana", "mango"]

Think of it like a stack of plates. You add to the top, you remove from the top. That is exactly what push and pop do on the tail end of your array.

---

2. shift() and unshift()

If push and pop work on the end of an array, shift and unshift work on the beginning.

unshift() adds items to the front. shift() removes the first item and returns it.

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

// unshift() adds to the beginning
queue.unshift("Zara");

console.log(queue);
// ["Zara", "Alice", "Bob", "Charlie"]

let queue = ["Zara", "Alice", "Bob", "Charlie"];

// shift() removes from the beginning and returns it
let first = queue.shift();

console.log(first);  // "Zara"
console.log(queue);  // ["Alice", "Bob", "Charlie"]

A good way to remember the difference: shift moves everything to the left, like the whole array shifts over. unshift puts something back at the start, reversing that shift.

---

3. forEach()

Before getting into map() and filter(), it helps to understand forEach() first because it is the closest to the for loop you already know.

forEach() goes through every item in the array and runs a function on each one. It does not return a new array. It just loops.

Here is the traditional for loop approach:

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

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}
// 1
// 2
// 3
// 4
// 5

And here is the same thing with forEach():

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

numbers.forEach(function(number) {
  console.log(number);
});
// 1
// 2
// 3
// 4
// 5

The result is identical. The difference is readability. With forEach, you do not manage an index variable. You just say "for each number, do this."

A practical example where forEach actually shines:

let students = ["Ayesha", "Rahul", "Sofia"];

students.forEach(function(student) {
  console.log("Welcome, " + student + "!");
});

// Welcome, Ayesha!
// Welcome, Rahul!
// Welcome, Sofia!

Use forEach when you want to do something with each item but you do not need to create a new array from the results.

---

4. map()

map() is one of the most useful methods in JavaScript. It goes through every item in your array, transforms it according to your instructions, and returns a brand new array with the transformed values. The original array is never changed.

How map() works:

Original Array:  [1,  2,  3,  4,  5]
                  |   |   |   |   |
  Your function: x*2 x*2 x*2 x*2 x*2
                  |   |   |   |   |
New Array:       [2,  4,  6,  8,  10]

Here is what this looks like in code. First, the old for loop way:

let prices = [100, 200, 300, 400];
let discounted = [];

for (let i = 0; i < prices.length; i++) {
  discounted.push(prices[i] * 0.9);
}

console.log(discounted); // [90, 180, 270, 360]

Now with map():

let prices = [100, 200, 300, 400];

let discounted = prices.map(function(price) {
  return price * 0.9;
});

console.log(prices);     // [100, 200, 300, 400]  (unchanged)
console.log(discounted); // [90, 180, 270, 360]

Same result, but notice two things. First, you did not need to create an empty array and push into it manually. Second, the original prices array was not touched at all.

Another practical example with strings:

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

let capitalized = names.map(function(name) {
  return name.charAt(0).toUpperCase() + name.slice(1);
});

console.log(capitalized); // ["Alice", "Bob", "Charlie"]

Every time you find yourself creating an empty array, looping through another array, and pushing transformed values in, that is your signal to use map() instead.

---

5. filter()

filter() does exactly what the name says. It goes through your array and keeps only the items that pass a condition you define. Like map(), it returns a new array without touching the original.

How filter() works:

Original Array:  [3,  15,  8,  22,  5,  18]
                  |    |   |    |   |    |
Your condition: >10? >10? >10? >10? >10? >10?
                  |    |   |    |   |    |
  Pass/Fail:     No  Yes  No  Yes  No  Yes
                       |        |        |
New Array:            [15,     22,      18]

Here is the for loop version first:

let scores = [45, 82, 60, 91, 73, 38];
let passed = [];

for (let i = 0; i < scores.length; i++) {
  if (scores[i] >= 70) {
    passed.push(scores[i]);
  }
}

console.log(passed); // [82, 91, 73]

Now with filter():

let scores = [45, 82, 60, 91, 73, 38];

let passed = scores.filter(function(score) {
  return score >= 70;
});

console.log(scores); // [45, 82, 60, 91, 73, 38]  (unchanged)
console.log(passed); // [82, 91, 73]

The function you pass to filter needs to return true or false. If it returns true, that item makes it into the new array. If it returns false, it gets left out.

A real-world style example:

let products = [
  { name: "Laptop", inStock: true },
  { name: "Mouse", inStock: false },
  { name: "Keyboard", inStock: true },
  { name: "Monitor", inStock: false },
];

let available = products.filter(function(product) {
  return product.inStock === true;
});

console.log(available);
// [
//   { name: "Laptop", inStock: true },
//   { name: "Keyboard", inStock: true }
// ]

---

6. reduce()

reduce() is the one that trips beginners up the most, so this explanation will stay simple and focused.

The idea is this: reduce() goes through your array and builds up a single value from all the items. That single value could be a number, a string, or even an object. The most common use case is adding up a list of numbers.

It takes two things inside the callback function: an accumulator (the running total you are building) and the current item being processed.

A simple visual:

Array: [10, 20, 30, 40]

Start:  accumulator = 0
Step 1: accumulator = 0  + 10 = 10
Step 2: accumulator = 10 + 20 = 30
Step 3: accumulator = 30 + 30 = 60
Step 4: accumulator = 60 + 40 = 100

Result: 100

Here is that in code:

let numbers = [10, 20, 30, 40];

let total = numbers.reduce(function(accumulator, currentNumber) {
  return accumulator + currentNumber;
}, 0);

console.log(total); // 100

The 0 at the end is the starting value of the accumulator. It is good practice to always include it.

For a practical example, calculating a cart total:

let cartItems = [
  { name: "Book", price: 299 },
  { name: "Pen", price: 49 },
  { name: "Notebook", price: 150 },
];

let cartTotal = cartItems.reduce(function(total, item) {
  return total + item.price;
}, 0);

console.log(cartTotal); // 498

Once you are comfortable with reduce, you will start seeing how much manual summing and accumulation code it can replace. For now, focus on the number summing use case and let that concept settle before exploring further.

---

Quick Comparison: for loop vs Array Methods

Here is a side-by-side to make the difference concrete. Say you have an array of temperatures in Celsius and want to convert them to Fahrenheit, then keep only the warm ones (above 25 C).

With a for loop:

let celsius = [10, 22, 30, 5, 28, 15];
let warmFahrenheit = [];

for (let i = 0; i < celsius.length; i++) {
  let f = (celsius[i] * 9/5) + 32;
  if (f > 77) { // 77F = 25C
    warmFahrenheit.push(f);
  }
}

console.log(warmFahrenheit); // [86, 82.4]

With map() and filter():

let celsius = [10, 22, 30, 5, 28, 15];

let fahrenheit = celsius.map(function(temp) {
  return (temp * 9/5) + 32;
});

let warm = fahrenheit.filter(function(temp) {
  return temp > 77;
});

console.log(warm); // [86, 82.4]

The second version is easier to read step by step. You can see what is happening at each stage without mentally parsing the loop logic.

---

Practice Assignment

Put everything together with this small exercise. Work through it in your browser console.

Setup:

let numbers = [3, 7, 12, 5, 18, 9, 21, 6];

Step 1: Use map() to double each number

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

console.log(doubled);
// [6, 14, 24, 10, 36, 18, 42, 12]

Step 2: Use filter() to keep only numbers greater than 10

let greaterThanTen = doubled.filter(function(num) {
  return num > 10;
});

console.log(greaterThanTen);
// [14, 24, 36, 18, 42, 12]

Step 3: Use reduce() to get the total sum

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

console.log(total);
// 146

Try changing the original numbers array and see how the results shift through each step. That kind of hands-on experimentation is what makes these methods stick.

---

Summary

Method	What it does	Returns
push()	Adds to the end of an array	New length of the array
pop()	Removes from the end	The removed item
unshift()	Adds to the beginning	New length of the array
shift()	Removes from the beginning	The removed item
forEach()	Runs a function on each item	Nothing (undefined)
map()	Transforms each item	New array of same length
filter()	Keeps items that pass a condition	New array, possibly shorter
reduce()	Accumulates items into one value	A single value

These eight methods cover the vast majority of what you will do with arrays in day-to-day JavaScript. Start with push, pop, map, and filter since those come up constantly. Once those feel natural, reduce will make a lot more sense in context.

The best thing you can do right now is close this tab, open a blank console, and type out the examples from memory. You will be surprised how quickly it clicks.