Array Methods You Must Know

An array without methods is just a dumb digital box. It holds your stuff, but it doesn't do anything.

If you are building an app—say, a feed of anonymous local posts or a platform to track coding practice scores—you don't just want to store data. You want to add new posts, delete old ones, filter out the low scores, and calculate totals.

To do that without losing your mind, you need Array Methods. Here is your survival guide.

---

The Doormen: Adding and Removing

Think of an array as a line of people waiting to get into a club. You can add or remove people from the very front of the line, or the very back.

1. push() and pop() (The Back of the Line) These are your bread and butter. They only mess with the end of your array.

• push(): Adds a new item to the very end.

• pop(): Kicks out the very last item.

let localPosts = ["Post 1", "Post 2", "Post 3"];

// A new post comes in
localPosts.push("Post 4"); 
// After: ["Post 1", "Post 2", "Post 3", "Post 4"]

// We delete the newest post
localPosts.pop(); 
// After: ["Post 1", "Post 2", "Post 3"]

2. unshift() and shift() (The Front of the Line) These handle the beginning of the array. (Warning: These are slightly slower in massive datasets because every other item has to step back to make room).

• unshift(): Shoves a new item into the #1 spot (index 0).

• shift(): Removes the first item.

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

// A new high score! Pin them to the top.
leaderboard.unshift("Zack");
// After: ["Zack", "Alice", "Bob", "Charlie"]

// Zack cheated. Kick him out.
leaderboard.shift();
// After: ["Alice", "Bob", "Charlie"]

---

The Heavy Lifters: Iteration

Back in the day, if you wanted to do something to every item in an array, you had to write a clunky for loop. It looked like this:

// The Old, Clunky Way
let scores = [10, 20, 30];
for (let i = 0; i < scores.length; i++) {
  console.log(scores[i] * 2);
}

It works, but it’s noisy. You have to track i, check the length, and increment it. Modern JavaScript gives us three elegant tools instead.

1. forEach(): The Sightseer Use this when you just want to look at every item and do something with it, but you don'twant to change the array itself.

let users = ["Sam", "Alex", "Jordan"];

users.forEach(function(user) {
  console.log("Welcome back, " + user);
});
// The array remains exactly the same.

2. map(): The Transformer This is arguably the most used array method in modern web development. map() goes through your array, applies a rule to every single item, and spits out a brand new array of the exact same length.

let baseScores = [10, 15, 20];

// Let's add 5 bonus points to every score
let finalScores = baseScores.map(function(score) {
  return score + 5;
});

// Before (baseScores): [10, 15, 20]
// After (finalScores): [15, 20, 25]

3. filter(): The Bouncer Exactly what it sounds like. It tests every item in your array. If the item passes the test (returns true), it gets to join a new array. If it fails, it gets left behind.

let practiceTimes = [5, 45, 12, 60, 8];

// Only keep sessions longer than 30 minutes
let deepWorkSessions = practiceTimes.filter(function(time) {
  return time > 30;
});

// Before (practiceTimes): [5, 45, 12, 60, 8]
// After (deepWorkSessions): [45, 60]

---

The Boss Level: reduce()

People get terrified of reduce(), but the concept is simple. Imagine rolling a snowball down a hill. It starts small, picks up snow as it hits each new patch, and by the time it reaches the bottom, it's one massive boulder.

reduce() takes your entire array and "crushes" it down into a single value.

let expenses = [10, 20, 30];

// The 'total' is the snowball. The 'current' is the new snow.
let totalSpent = expenses.reduce(function(total, current) {
  return total + current;
}, 0); // <-- The 0 is the starting size of our snowball

// Result: 60