# Level Up Your JS: Array Methods You Actually Need to Know

Hey everyone! I’m currently diving deep into the Web Dev Cohort 2026, and today I’m tackling one of the most powerful parts of JavaScript: **Array Methods**.

If you’ve been using `for` loops for everything, prepare to have your mind blown. These methods make your code cleaner, shorter, and way more readable. Let’s dive in!

* * *

## 1\. The Basics: Adding & Removing Elements

Before we get into the "fancy" stuff, let’s look at how we move items in and out of an array.

### `push()` and `pop()` (The Tail End)

*   `push()`: Adds an item to the **end**.
    
*   `pop()`: Removes the **last** item.
    

JavaScript

```plaintext
let snacks = ['🍕', '🍔'];
snacks.push('🍎'); // State: ['🍕', '🍔', '🍎']
snacks.pop();      // State: ['🍕', '🍔']
```

### `shift()` and `unshift()` (The Front End)

*   `unshift()`: Adds an item to the **beginning**.
    
*   `shift()`: Removes the **first** item.
    

JavaScript

```plaintext
let queue = ['Alice', 'Bob'];
queue.unshift('Charlie'); // State: ['Charlie', 'Alice', 'Bob']
queue.shift();            // State: ['Alice', 'Bob']
```

* * *

## 2\. The Big Three: Map, Filter, and Reduce

This is where the magic happens.

### `map()` - The Transformer

Use `map()` when you want to do something to **every** item in an array and get a **new** array back.

**Traditional** `for` **loop vs** `map()`**:**

JavaScript

```plaintext
// Traditional Way
let numbers = [1, 2, 3];
let doubled = [];
for(let i=0; i < numbers.length; i++) {
    doubled.push(numbers[i] * 2);
}

// The Map Way (Clean!)
const doubledMap = numbers.map(num => num * 2); 
// Result: [2, 4, 6]
```

### `filter()` - The Gatekeeper

`filter()` checks every item against a condition. If the item passes, it stays; otherwise, it’s out!

JavaScript

```plaintext
let ages = [12, 18, 25, 10];
let adults = ages.filter(age => age >= 18);
// Result: [18, 25]
```

### `reduce()` - The Accumulator

`reduce()` takes a whole array and "squashes" it into a **single value** (like a total sum). Think of it like a snowball rolling down a hill, picking up snow as it goes.

JavaScript

```plaintext
let prices = [10, 20, 30];
let total = prices.reduce((accumulator, current) => {
    return accumulator + current;
}, 0); 
// Result: 60
```

* * *

## 3\. `forEach()` - The Helper

`forEach()` is like a `for` loop but easier to read. It just performs an action for every item. **Note:** Unlike `map`, it doesn't return a new array.

JavaScript

```plaintext
let birds = ['🦜', '🦅'];
birds.forEach(bird => console.log("Look, a " + bird));
```

* * *

## 🛠️ Assignment Challenge

Try this in your browser console right now!

JavaScript

```plaintext
// 1. Create an array
const myNums = [5, 10, 15, 20];

// 2. Map to double them
const doubled = myNums.map(n => n * 2); // [10, 20, 30, 40]

// 3. Filter numbers > 10
const bigNums = doubled.filter(n => n > 10); // [20, 30, 40]

// 4. Reduce to get the sum
const finalSum = bigNums.reduce((acc, curr) => acc + curr, 0); // 90

console.log(finalSum);
```