# JavaScript Array Methods

`push`**,** `pop`**,** `shift`**,** `unshift`**,** `map`**,** `filter`**,** `reduce`**,** `forEach`

This article is for complete beginners. You can follow along by opening your browser console (Right-click → Inspect → Console tab) and typing the examples.

## **1\.** `push()` **and** `pop()` **– Working with the END of an array**

### `push()` **– Add to the end**

**Idea**: Put a new item at the end of the list.

```javascript
let fruits = ["apple", "banana"];
console.log(fruits); // ["apple", "banana"]

fruits.push("mango");

console.log(fruits); // ["apple", "banana", "mango"]
```

*   **Before**: `["apple", "banana"]`
    
*   **After** `push("mango")`: `["apple", "banana", "mango"]`
    

### `pop()` **– Remove from the end**

**Idea**: Take the last item out of the list.

```javascript
let fruits = ["apple", "banana", "mango"];
console.log(fruits); // ["apple", "banana", "mango"]

let lastFruit = fruits.pop();

console.log(lastFruit); // "mango"
console.log(fruits);    // ["apple", "banana"]
```

*   **Before**: `["apple", "banana", "mango"]`
    
*   **After** `pop()`: `["apple", "banana"]`
    

## **2\.** `shift()` **and** `unshift()` **– Working with the START of an array**

### `unshift()` **– Add to the start**

```javascript
let numbers = [2, 3, 4];
console.log(numbers); // [2, 3, 4]

numbers.unshift(1);

console.log(numbers); // [1, 2, 3, 4]
```

### `shift()` **– Remove from the start**

```javascript
let numbers = [1, 2, 3, 4];
console.log(numbers); // [1, 2, 3, 4]

let firstNumber = numbers.shift();

console.log(firstNumber); // 1
console.log(numbers);     // [2, 3, 4]
```

*   **Before**: `[1, 2, 3, 4]`
    
*   **After** `shift()`: `[2, 3, 4]`
    

## **3\.** `for` **loop vs** `map()` **/** `filter()` **/** `forEach()`

### **Traditional** `for` **loop example**

Goal: Create a new array with each number doubled.

```javascript
let nums = [1, 2, 3];
let doubled = [];

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

console.log(doubled); // [2, 4, 6]
```

This works, but we manually manage `i`, `length`, and `push`.

## **4\.** `map()` **– Transform each item**

**Idea**: Take an array, apply a function to every item, and get a **new** array.

```javascript
let nums = [1, 2, 3];
console.log("before:", nums); // [1, 2, 3]

let doubled = nums.map(function (num) {
  return num * 2;
});

console.log("after (new array):", doubled); // [2, 4, 6]
console.log("original:", nums);             // [1, 2, 3]
```

*   **Before**: `[1, 2, 3]`
    
*   **After** `map(num => num * 2)`: `[2, 4, 6]`
    
*   **Original array stays the same**
    

### **Simple map “flowchart” (mental model)**

1.  Take first value → run function → put result in new array
    
2.  Move to next value → repeat
    
3.  Stop when no more values → return new array
    

## **5\.** `filter()` **– Keep only what you want**

**Idea**: Test each item; if the test is true, keep it. The result is a **new** array.

```javascript
let nums = [5, 10, 15, 20];
console.log("before:", nums); // [5, 10, 15, 20]

let greaterThan10 = nums.filter(function (num) {
  return num > 10;
});

console.log("after (filtered):", greaterThan10); // [15, 20]
console.log("original:", nums);                  // [5, 10, 15, 20]
```

*   **Before**: `[5, 10, 15, 20]`
    
*   **After** `filter(num > 10)`: `[15, 20]`
    
*   **Original stays the same**
    

### **Simple filter “flowchart” (mental model)**

For every item:

1.  Run the test (condition)
    
2.  If the condition is **true,** → item goes into the new array
    
3.  If the condition is **false** → ignore that item
    
4.  Return the new array at the end
    

## **6\.** `reduce()` **– Combine all values into one**

**Idea**: Go through the array and keep an “accumulator” (a running total or result). At the end, you get **one value**.

Example: sum of all numbers.

```javascript
let nums = [1, 2, 3, 4];

let sum = nums.reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 10
```

*   `accumulator`: starts at `0` (the second argument to `reduce`)
    
*   Step-by-step:
    
    *   Start: `accumulator = 0`
        
    *   Step 1: `0 + 1 = 1`
        
    *   Step 2: `1 + 2 = 3`
        
    *   Step 3: `3 + 3 = 6`
        
    *   Step 4: `6 + 4 = 10` → final result
        

### **Simply reduce “visual.”**

Think of `reduce` like this line:

`0 → (add 1) → 1 → (add 2) → 3 → (add 3) → 6 → (add 4) → 10`

You pass through all values and keep updating a single result.

## **7\.** `forEach()` **– Do something for each item (no new array)**

**Idea**: Loop over each item and run a function. Does **not** return a new array.

```javascript
let fruits = ["apple", "banana", "mango"];

fruits.forEach(function (fruit, index) {
  console.log(index, fruit);
});

// 0 "apple"
// 1 "banana"
// 2 "mango"
```

Use `forEach` when you **just want to do something** (like `console.log`) for each item, not create a new array.

## **8\. Common beginner mistakes (and how to avoid them)**

*   **Confusing** `map` **and** `forEach`:
    
    *   `map` Returns a **new array**.
        
    *   `forEach` returns **undefined** (it’s just for side effects).
        
*   **Expecting** `filter` **to change the original array**:
    
    *   It doesn’t. It returns a new array. Always store the result.
        
*   **Forgetting the initial value in** `reduce`:
    
    *   As a beginner, always pass an initial value like `0` for sums.
        

## **9\. Your practice assignment**

Try these directly in the browser console.

1.  **Create an array of numbers**
    

```javascript
let numbers = [3, 7, 12, 5, 20];
```

2.  **Use** `map()` **to double each number**
    

```javascript
let doubled = numbers.map(function (num) {
  return num * 2;
});

console.log(doubled);
```

3.  **Use** `filter()` **to get numbers greater than 10**
    

```javascript
let greaterThan10 = numbers.filter(function (num) {
  return num > 10;
});

console.log(greaterThan10);
```

4.  **Use** `reduce()` **to calculate the total sum**
    

```javascript
let total = numbers.reduce(function (acc, num) {
  return acc + num;
}, 0);

console.log(total);
```

*   **Type all code yourself** (don’t just copy-paste) to build muscle memory.
    
*   **Change the numbers** and see what happens to the results.
    
*   Once you’re comfortable, try replacing the `function (num) { ... }` with arrow functions like `num => num * 2`.
    

You can now explain these array methods to someone else—that’s a great sign you understand them.

*Happy learning!*