JavaScript Array Methods Every Beginner Should Know

Try 6 essential array methods in your browser console

Arrays are everywhere in JavaScript. And once you know the right methods to work with them, your code becomes cleaner, shorter, and way more expressive.

In this article, we’ll cover 6 essential array methods with real examples, before/after states, and a hands-on assignment at the end.

Let’s go! 🎯

Why Array Methods?

Before we start, here’s a quick taste of why these methods matter.

Traditional approach - looping manually:

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

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

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

With map() - same result, much cleaner:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);

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

Now let’s learn each method one by one.

1. push() and pop() : Adding & Removing from the End

push() - Add to the end

const fruits = ["apple", "banana"];
console.log("Before:", fruits); // ["apple", "banana"]

fruits.push("cherry");
console.log("After:", fruits); // ["apple", "banana", "cherry"]

pop() - Remove from the end

const fruits = ["apple", "banana", "cherry"];
console.log("Before:", fruits); // ["apple", "banana", "cherry"]

const removed = fruits.pop();
console.log("Removed:", removed); // "cherry"
console.log("After:", fruits);   // ["apple", "banana"]

2. shift() and unshift() : Adding & Removing from the Front

unshift() - Add to the beginning

const queue = ["Bob", "Charlie"];
console.log("Before:", queue); // ["Bob", "Charlie"]

queue.unshift("Alice");
console.log("After:", queue); // ["Alice", "Bob", "Charlie"]

shift() - Remove from the beginning

const queue = ["Alice", "Bob", "Charlie"];
console.log("Before:", queue); // ["Alice", "Bob", "Charlie"]

const first = queue.shift();
console.log("Served:", first); // "Alice"
console.log("After:", queue);  // ["Bob", "Charlie"]

💡 Memory trick:
push/pop work at the end.
shift/unshift work at the front.

3. map() : Transform Every Item

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

const prices = [10, 20, 30];
console.log("Before:", prices); // [10, 20, 30]

const discounted = prices.map(price => price * 0.9);
console.log("After:", discounted); // [9, 18, 27]
console.log("Original unchanged:", prices); // [10, 20, 30]

How it works:

Compared to a traditional for loop:

// Traditional — more code, more room for bugs
const discounted = [];
for (let i = 0; i < prices.length; i++) {
  discounted.push(prices[i] * 0.9);
}

// map() — clean and readable
const discounted = prices.map(price => price * 0.9);

Use map() when: You want to transform each item and get a new array back.

4. filter() : Keep Only What You Need

filter() creates a new array with only the elements that pass a test (return true).

const scores = [45, 72, 88, 34, 95, 60];
console.log("Before:", scores); // [45, 72, 88, 34, 95, 60]

const passing = scores.filter(score => score >= 60);
console.log("After:", passing); // [72, 88, 95, 60]

How it works:

Compared to a traditional for loop:

// Traditional
const passing = [];
for (let i = 0; i < scores.length; i++) {
  if (scores[i] >= 60) {
    passing.push(scores[i]);
  }
}

// filter() — one expressive line
const passing = scores.filter(score => score >= 60);

Use filter() when: You want a subset of an array based on a condition.

5. reduce() : Boil It Down to One Value

reduce() takes an array and reduces it to a single value (like a sum, a product, or even a string).

Get Rajesh Kumar’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

It might look complex at first — but let’s keep it simple.

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

const total = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0); // 0 is the starting value

console.log(total); // 15

Think of accumulator as a running total that gets updated with each item:

Use reduce() when: You need to combine all array values into one result (sum, count, max, etc.).

6. forEach() : Do Something with Each Item

forEach() runs a function on every element. Unlike map(), it does not return a new array — it's used for side effects like logging or updating something outside the array.

const students = ["Alice", "Bob", "Charlie"];
students.forEach(student => {
  console.log(`Welcome, ${student}!`);
});

// Output:
// Welcome, Alice!
// Welcome, Bob!
// Welcome, Charlie!

forEach vs map : what's the difference?

// Use forEach to log
students.forEach(s => console.log(s));

// Use map to transform
const upper = students.map(s => s.toUpperCase());

Quick Reference Cheat Sheet

Wrapping Up

You’ve just learned 6 of the most used array methods in JavaScript! Here’s the key takeaway:

• push/pop and shift/unshift are for adding/removing items
• map() transforms → use it when you want a new, modified array
• filter() selects → use it when you want a subset
• reduce() accumulates → use it when you want one result
• forEach() loops → use it when you just want to do something with each item

Open your console and experiment , that’s the fastest way to make these stick! 💪

Found this helpful? Follow for more beginner-friendly JavaScript content. Drop a question in the comments if anything was unclear! 🙌