#14 Array Methods You Must Know

Arrays are fundamental to JavaScript. Think of an array as a digital list—whether it's the products in a shopping cart, users on a social media feed, or a playlist of songs, you will spend a lot of time working with these lists.

Mastering array methods makes you a more efficient developer. These methods are like having a specialized toolkit for your data: rather than using a general-purpose screwdriver (a for loop) for everything, you have a specialized hammer (push()), a precise measure (filter()), and a perfect blender (reduce()).

Ready to try these out? Open your browser's Console (F12 or Right-click > Inspect > Console) and let’s get started. We will take this slow!

Part 1: Adding and Removing (The "Ends")

These methods are the easiest to understand. They simply add or remove items from the very beginning or the very end of your list.

push() and pop() (Manipulating the Tail)

• push(): Adds an item to the end.

• pop(): Removes the last item.

let snacks = ["Apple", "Banana"];
snacks.push("Cookie"); // will add the Cookie in the end
snacks.pop(); // will remove the Cookie from the end

shift() and unshift() (Manipulating the head)

• unshift(): Adds an item to the front.

• shift(): Removes the first item.

let snacks = ["Apple", "Banana"];
snacks.unshift("Carrot"); // will add Carrot in the beginning of the list
snacks.shift(); // will remove the Carrot from the beginning of the list

Part 2: The "Functional" Trio (Creating New Lists)

This is where things get exciting! These methods are "functional," meaning they do not change your original array. Instead, they create a brand-new array based on your instructions. Don't worry about memorizing the syntax; just focus on what they do.

map(): The Transformer

Use map() when you want to take a list and perform the exact same action on every single item. It outputs a new list of the same length, but with updated values.

Suppose you have list of prices of the Item in the store. You want to decrease the price by Rs.10. Then you do it like below using map().

let prices = [10, 20, 40, 55, 50];

// Map will add 10 to every price in the list
let newPrices = prices.map((price) => price + 10); 

// new Prices will have [20, 30, 50, 65, 60]
// and prices will remain unchanged [10, 20, 40, 55, 50]

filter(): The Bouncer

Use filter() when you want to create a new list that only contains items that meet a specific rule (a "condition"). It filters out everything that doesn't fit.

Suppose you need to find only the "premium" items that cost more than Rs.10.

let costs = [5, 15, 25, 8];
// We want a NEW array where the condition (price > 10) is true
let premium = costs.filter(price => price > 10);

// Original: [5, 15, 25, 8] (UNCHANGED!)
// New Array: [15, 25]

reduce(): The Accumulator (Beginner Explanation)

reduce() is the most intimidating method, so let's keep it very simple: it takes a whole list of items and "squishes" them down into one single result (like a total sum or average).

Think of it as a snowball rolling down a hill: you start with a tiny bit of snow (an "initial value"), and as the ball (the "accumulator") rolls through the list, it gets bigger and bigger with every item it picks up.

Suppose you need to calculate the final bill for a customer's cart.

let cart = [10, 5, 15];

// We reduce the 'cart' down to one 'sum'
// The '0' at the end is our starting point.
let total = cart.reduce((sum, price) => sum + price, 0);

// Result (Total Bill): 30

Part 3: Why This vs. for loops?

You might be thinking, "Can't I just use a traditional loop for all of this?".

Yes, you can. But as your programs grow, for loops can get repetitive and messy. The modern array methods are designed for Readability, Immutability (Safety: These methods rarely change the original data accidentally, which is a common source of bugs in large programs.)

Part 4: forEach() : The Messenger

Use forEach() when you want to "do something" with every item—like saving data to a database, updating a piece of the UI, or just printing a list to the console.

Suppose you are to announcing the winners of a contest.

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

// We just want to print a message for each person
winners.forEach((name, index) => {
  console.log(`Place #\({index + 1}: \){name}`);
});

/* Output in Console:
Place #1: Alice
Place #2: Bob
Place #3: Charlie
*/

Pro-Tip for Beginners

If you find yourself stuck choosing between map() and forEach(), ask yourself one question: "Do I need a new list at the end?"

Final Challenge

You’ve seen how they work, now it’s your turn! Copy this starter code into your console and follow the instructions. Take it one step at a time!.

// STEP 1: Create an array of numbers
let myNumbers = [4, 11, 8, 15, 2];

// STEP 2: Use map() to create a NEW array that doubles each number
// let doubledNumbers = ...

// STEP 3: Use filter() on the original array to create a NEW array
// that only keeps numbers greater than 10.
// let largeNumbers = ...

// STEP 4: Use reduce() on the original array to find the total sum.
// let totalSum = ...

// STEP 5: Use forEach() on the original array to print the numbers in the format (Number 1 is 4, Number 2 is 11, ...)

Congratulations! You've just covered the most common tools that professional JavaScript developers use daily. If reduce() still feels a little confusing, don't worry—focus on mastering map() and filter() first.