Skip to main content

Command Palette

Search for a command to run...

Array Methods You Must Know

Published
3 min read
Array Methods You Must Know

1. push() — The "Add at Last" Method

Think of push() as a quick way to add something to the very end of your list. It doesn’t matter if it’s a number or a string like "yes"—it just goes to the last index.

  • Example: You have a small shopping list, and you remember one more thing.

  • State Before: [1, 2, 3]

let arr = [1, 2, 3];
arr.push(4); // Adding a number
arr.push("yes"); // Adding a string
  • State After: [1, 2, 3, 4, "yes"]

2. pop() — The "Remove Last" Method

This is the opposite of push. It just grabs the very last item and kicks it out of the array.

  • State Before: ["apple", "banana", "cherry"]
let fruits = ["apple", "banana", "cherry"];
fruits.pop();
  • state After: ["apple", "banana"]

3. shift() and unshift() — Working at the Front

While push and pop work at the back, these two work at the start of the array.

  • unshift(): Pushes a new item to the front (index 0).

  • shift(): Removes the very first item.

let queue = ["item1", "item2"];

queue.unshift("VIP"); // Now: ["VIP", "item1", "item2"]
queue.shift(); // Now: ["item1", "item2"]

4. forEach() — The Loop Alternative

Instead of writing a complex for loop to look at every item, forEach just "visits" every element and lets you do something with it.

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

names.forEach((name) => {
  console.log("hello " + name);
});

5. map() — The "Transformer"

This is where the magic happens. map() takes your array, changes every item based on your rule, and gives you a brand new array.

The Old Way (For Loop):

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

The New Way (map):

let nums = [1, 2, 3];
let doubled = nums.map(n => n * 2);
  • State Before: [1, 2, 3]

  • State After: [2, 4, 6]

6. filter() — The "Security Guard"

filter() looks at your items and only keeps the ones that follow your rule. It’s like a bouncer at a club.

The Old Way (For Loop):

let scores = [5, 12, 8, 20];
let highScores = [];
for(let i=0; i < scores.length; i++) {
    if(scores[i] > 10) highScores.push(scores[i]);
}

The New Way (filter):

let scores = [5, 12, 8, 20];
let highScores = scores.filter(s => s > 10);
  • State Before: [5, 12, 8, 20]

  • State After: [12, 20]

7. reduce() — The "Accumulator" (Simple Explanation)

Imagine you have a piggy bank. reduce() goes through your array, takes each number, and adds it into the piggy bank until you have one final total.

  • The Accumulator: Your piggy bank.

  • The Current: The coin you are currently holding.

let wallet = [10, 20, 30];

let total = wallet.reduce((piggyBank, coin) => {
    return piggyBank + coin;
}, 0); // 0 is the starting amount in the piggy bank