# Master the Magic: JavaScript Array Methods You Must Know

When you start learning JavaScript, arrays show up everywhere. Lists of numbers, names, products, scores, messages. All of these are stored in arrays.

JavaScript gives us built-in **array methods** that make working with arrays much easier. Instead of writing long loops, you can often solve problems in just one line.

In this guide, you’ll learn the most useful array methods every beginner should know.

* * *

## 1\. The "Ends" of the Array: `push()` and `pop()`

Think of these as the easiest way to manage your list. They only care about the **very last** item.

*   `push()`: Adds an item to the **end**.
    
*   `pop()`: Removes the **last** item and hands it back to you.
    

```plaintext
let bag = ["Books", "Laptop"];

bag.push("Snacks"); 
// State: ["Books", "Laptop", "Snacks"]

bag.pop(); 
// State: ["Books", "Laptop"]
```

* * *

## 2\. The "Front" of the Array: `unshift()` and `shift()`

These are the opposites of push and pop. They handle the **very first** item.

*   `unshift()`: Adds an item to the **beginning** (and pushes everything else back).
    
*   `shift()`: Removes the **first** item.
    

```javascript
let line = ["Alice", "Bob"];

line.unshift("Charlie"); 
// State: ["Charlie", "Alice", "Bob"]

line.shift(); 
// State: ["Alice", "Bob"]
```

* * *

## 3\. The Modern Way to Loop: `forEach()`

Instead of writing a long `for` loop with `i = 0`, you can use `forEach()`. It says: *"For each item in this list, do this specific task."*

```javascript
let names = ["Zoe", "Kayla", "Ben"];

names.forEach(function(name) {
  console.log("Hello, " + name);
});
```

* * *

## 4\. Transform Your Data: `map()`

`map()` is a superstar. It takes your array, performs a task on **every single item**, and gives you a **brand new array** with the results.

**Traditional Loop vs. Map:**

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

// The New Way (Map)
let doubledMap = numbers.map(num => num * 2); 
// Output: [2, 4, 6]
```

* * *

## 5\. The Security Guard: `filter()`

`filter()` looks at your array and only keeps the items that pass a "test." It’s perfect for searching through data.

```javascript
let grades = [45, 80, 55, 92, 70];

// Only keep grades that are 70 or higher
let passingGrades = grades.filter(score => score >= 70);
// Output: [80, 92, 70]
```

* * *

## 6\. The Snowball Effect: `reduce()`

`reduce()` can feel scary, but think of it like making a snowball. You start with a small amount (the **accumulator**) and keep adding to it until you have one big result (like a total sum).

```javascript
let bills = [10, 20, 30];

// 'sum' is the snowball, 'price' is the current item
let total = bills.reduce((sum, price) => sum + price, 0);
// Output: 60
```

* * *

## 🚀 Pro Tip: Chaining Methods

Once you get comfortable, you can chain these methods together like a factory assembly line!

```javascript
let numbers = [5, 10, 15];

let result = numbers
  .map(n => n * 2)      // [10, 20, 30]
  .filter(n => n > 15); // [20, 30]

console.log(result); // [20, 30]
```

* * *

## Try This Assignment

Open your browser console (Right-click > Inspect > Console) and try this challenge:

### Step 1: Create an array

```javascript
let numbers = [4, 7, 12, 18, 3];
```

### Step 2: Double each number using `map()`

```javascript
let doubled = numbers.map(num => num * 2);
```

Expected output

```javascript
[8, 14, 24, 36, 6]
```

* * *

### Step 3: Get numbers greater than 10 using `filter()`

```javascript
let greaterThanTen = numbers.filter(num => num > 10);
```

Expected output

```javascript
[12, 18]
```

* * *

### Step 4: Calculate total sum using `reduce()`

```javascript
let total = numbers.reduce((sum, num) => sum + num, 0);
```

Expected output

```javascript
44
```

* * *