# 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.
    

```javascript
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.
    

```javascript
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:

```javascript
// 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't*want to change the array itself.

```javascript
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.

```javascript
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.

```javascript
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**.

```javascript
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
```