# Array Methods You Must Know (JavaScript)

Arrays are one of the most important parts of JavaScript.

They help us store multiple values in a single variable.

Example:

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

But just storing data is not enough.

We need ways to:

*   Add items
    
*   Remove items
    
*   Transform items
    
*   Filter items
    
*   Calculate totals
    

That’s where **array methods** come in.

## push() – Add to the End

Adds a new element at the end of the array.

### Example

```plaintext
let fruits = ["apple", "banana"];

fruits.push("mango");

console.log(fruits);
```

### Before:

```plaintext
["apple", "banana"]
```

### After:

```plaintext
["apple", "banana", "mango"]
```

Think of it like adding a new book at the end of a shelf.

## pop() – Remove from the End

Removes the last element.

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

fruits.pop();

console.log(fruits);
```

### Before:

```plaintext
["apple", "banana", "mango"]
```

### After:

```plaintext
["apple", "banana"]
```

It removes the last item.

## shift() – Remove from the Start

Removes the first element.

```plaintext
let numbers = [10, 20, 30];

numbers.shift();

console.log(numbers);
```

### Before:

```plaintext
[10, 20, 30]
```

### After:

```plaintext
[20, 30]
```

## unshift() – Add to the Start

Adds an element at the beginning.

```plaintext
let numbers = [20, 30];

numbers.unshift(10);

console.log(numbers);
```

### Before:

```plaintext
[20, 30]
```

### After:

```plaintext
[10, 20, 30]
```

## forEach() – Loop Through Array

Used to perform an action for each element.

```plaintext
let numbers = [1, 2, 3];

numbers.forEach(function(num) {
  console.log(num);
});
```

Output:

```plaintext
1
2
3
```

It does something for each item, but does not return a new array.

## Traditional for Loop vs forEach()

### Traditional Loop

```plaintext
let numbers = [1, 2, 3];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}
```

### forEach()

```plaintext
numbers.forEach(num => console.log(num));
```

✅ Cleaner  
✅ Easier to read

## map() – Transform Every Element

Creates a new array by modifying each element.

### Example

```plaintext
let numbers = [1, 2, 3];

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

console.log(doubled);
```

### Before:

```plaintext
[1, 2, 3]
```

### After:

```plaintext
[2, 4, 6]
```

Important:

*   `map()` returns a new array
    
*   Original array stays the same
    

## for Loop vs map()

### Using for loop:

```plaintext
let numbers = [1, 2, 3];
let doubled = [];

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

### Using map():

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

Much simpler and cleaner.

## filter() – Select Specific Items

Creates a new array with items that match a condition.

```plaintext
let numbers = [5, 10, 15, 20];

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

console.log(greaterThan10);
```

### Before:

```plaintext
[5, 10, 15, 20]
```

### After:

```plaintext
[15, 20]
```

It filters out unwanted values.

## reduce() – Combine into One Value (Beginner Level)

`reduce()` is used to turn an array into a single value.

Common use:

*   Calculate sum
    
*   Count items
    
*   Find total
    

### Example: Sum of numbers

```plaintext
let numbers = [1, 2, 3, 4];

let total = numbers.reduce(function(accumulator, current) {
  return accumulator + current;
}, 0);

console.log(total);
```

Output:

```plaintext
10
```

### How It Works (Simple)

*   Start with 0
    
*   Add 1 → 1
    
*   Add 2 → 3
    
*   Add 3 → 6
    
*   Add 4 → 10
    

Final result = 10

reduce() combines everything into one value.

* * *

## Quick Summary Table

<table style="min-width: 50px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>Method</p></th><th colspan="1" rowspan="1"><p>What It Does</p></th></tr><tr><td colspan="1" rowspan="1"><p>push()</p></td><td colspan="1" rowspan="1"><p>Add at end</p></td></tr><tr><td colspan="1" rowspan="1"><p>pop()</p></td><td colspan="1" rowspan="1"><p>Remove from end</p></td></tr><tr><td colspan="1" rowspan="1"><p>shift()</p></td><td colspan="1" rowspan="1"><p>Remove from start</p></td></tr><tr><td colspan="1" rowspan="1"><p>unshift()</p></td><td colspan="1" rowspan="1"><p>Add at start</p></td></tr><tr><td colspan="1" rowspan="1"><p>forEach()</p></td><td colspan="1" rowspan="1"><p>Loop through array</p></td></tr><tr><td colspan="1" rowspan="1"><p>map()</p></td><td colspan="1" rowspan="1"><p>Transform items</p></td></tr><tr><td colspan="1" rowspan="1"><p>filter()</p></td><td colspan="1" rowspan="1"><p>Select items</p></td></tr><tr><td colspan="1" rowspan="1"><p>reduce()</p></td><td colspan="1" rowspan="1"><p>Combine into one value</p></td></tr></tbody></table>

* * *