# Array Methods You Must Know - A Beginner's Guide

Hey there! 👋 If you are just starting with JavaScript, you might have heard the term "Array Methods" and felt a bit confused. Don't worry! Today, I am going to explain the most important array methods in a super simple way. By the end of this blog, you will be able to use these methods like a pro!

* * *

## What is an Array?

Before we jump into array methods, let's quickly remember what an array is. An array is like a list where you can store many values together.

```javascript
let fruits = ["Apple", "Banana", "Orange"];
```

Here, `fruits` is an array with three items. Now, let's learn how to work with these arrays using different methods!

* * *

## 1\. push() and pop() - Adding and Removing from the End

### What does push() do?

The `push()` method adds a new item to the END of an array. It's like adding something to the bottom of your to-do list.

**Example:**

```javascript
let colors = ["Red", "Blue"];

console.log("Before push:", colors);
// Output: ["Red", "Blue"]

colors.push("Green");

console.log("After push:", colors);
// Output: ["Red", "Blue", "Green"]
```

### What does pop() do?

The `pop()` method removes the LAST item from an array. It's like erasing the last item from your to-do list.

**Example:**

```javascript
let colors = ["Red", "Blue", "Green"];

console.log("Before pop:", colors);
// Output: ["Red", "Blue", "Green"]

let removedColor = colors.pop();

console.log("After pop:", colors);
// Output: ["Red", "Blue"]

console.log("The removed color was:", removedColor);
// Output: The removed color was: Green
```

**Try it yourself in the console!** Open your browser, press F12, go to the console tab, and run these examples. You will see the magic happen!

* * *

## 2\. shift() and unshift() - Adding and Removing from the Start

### What does shift() do?

The `shift()` method removes the FIRST item from an array. It's like removing the first person from a queue.

**Example:**

```javascript
let students = ["Alice", "Bob", "Charlie"];

console.log("Before shift:", students);
// Output: ["Alice", "Bob", "Charlie"]

let firstStudent = students.shift();

console.log("After shift:", students);
// Output: ["Bob", "Charlie"]

console.log("The student who left was:", firstStudent);
// Output: The student who left was: Alice
```

### What does unshift() do?

The `unshift()` method adds a new item to the START of an array. It's like adding someone to the front of a queue.

**Example:**

```javascript
let students = ["Bob", "Charlie"];

console.log("Before unshift:", students);
// Output: ["Bob", "Charlie"]

students.unshift("Alice");

console.log("After unshift:", students);
// Output: ["Alice", "Bob", "Charlie"]
```

**Quick Comparison Table:**

| Method | What it does | Example |
| --- | --- | --- |
| push() | Adds to the END | array.push(item) |
| pop() | Removes from the END | array.pop() |
| shift() | Removes from the START | array.shift() |
| unshift() | Adds to the START | array.unshift(item) |

* * *

## 3\. map() - Transform Every Item in an Array

### What does map() do?

The `map()` method creates a NEW array by doing something to each item in the old array. It's like a machine that takes each apple and turns it into apple juice!

**Simple Example:**

Imagine you have a list of numbers and you want to double each number.

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

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

console.log("Original array:", numbers);
// Output: [1, 2, 3, 4]

console.log("Doubled array:", doubledNumbers);
// Output: [2, 4, 6, 8]
```

**Using Arrow Function (Shorter way):**

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

let doubledNumbers = numbers.map(num => num * 2);

console.log(doubledNumbers);
// Output: [2, 4, 6, 8]
```

### The Old Way vs The New Way

Let me show you how people used to do this with a `for` loop before `map()` existed:

**Traditional For Loop:**

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

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

console.log(doubledNumbers);
// Output: [2, 4, 6, 8]
```

**Using map() - Much Cleaner!:**

```javascript
let numbers = [1, 2, 3, 4];
let doubledNumbers = numbers.map(num => num * 2);

console.log(doubledNumbers);
// Output: [2, 4, 6, 8]
```

See how much shorter and cleaner `map()` is? That's why developers love it!

![](https://cdn.hashnode.com/uploads/covers/6950f0fdfe9a13bd8ea78167/947b15d5-a0eb-4c7f-93cb-ba25cc848faf.jpg align="center")

**Real-World Example:**

```javascript
let prices = [100, 200, 300];

// Add 10% tax to each price
let pricesWithTax = prices.map(price => price * 1.10);

console.log(pricesWithTax);
// Output: [110, 220, 330]
```

* * *

## 4\. filter() - Keep Only Items You Want

### What does filter() do?

The `filter()` method creates a NEW array with only the items that pass a test. It's like sifting flour - you keep only what you need and throw away the rest!

**Simple Example:**

Imagine you have a list of numbers and you only want numbers greater than 5.

```javascript
let numbers = [2, 5, 8, 3, 10, 1];

let bigNumbers = numbers.filter(function(num) {
  return num > 5;
});

console.log("Original array:", numbers);
// Output: [2, 5, 8, 3, 10, 1]

console.log("Filtered array:", bigNumbers);
// Output: [8, 10]
```

**Using Arrow Function (Shorter way):**

```javascript
let numbers = [2, 5, 8, 3, 10, 1];
let bigNumbers = numbers.filter(num => num > 5);

console.log(bigNumbers);
// Output: [8, 10]
```

### The Old Way vs The New Way

**Traditional For Loop:**

```javascript
let numbers = [2, 5, 8, 3, 10, 1];
let bigNumbers = [];

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] > 5) {
    bigNumbers.push(numbers[i]);
  }
}

console.log(bigNumbers);
// Output: [8, 10]
```

**Using filter() - Much Cleaner!:**

```javascript
let numbers = [2, 5, 8, 3, 10, 1];
let bigNumbers = numbers.filter(num => num > 5);

console.log(bigNumbers);
// Output: [8, 10]
```

Again, `filter()` is so much cleaner!

![](https://cdn.hashnode.com/uploads/covers/6950f0fdfe9a13bd8ea78167/7f2ffe7c-dd1b-4823-a01c-0e17b4edb24c.jpg align="center")

**Real-World Example:**

```javascript
let students = [
  { name: "Ali", score: 45 },
  { name: "Sara", score: 82 },
  { name: "Khan", score: 35 },
  { name: "Zara", score: 90 }
];

// Get only students who passed (score >= 50)
let passed = students.filter(student => student.score >= 50);

console.log(passed);
// Output: 
// [
//   { name: "Sara", score: 82 },
//   { name: "Zara", score: 90 }
// ]
```

* * *

## 5\. forEach() - Do Something With Each Item

### What does forEach() do?

The `forEach()` method lets you do something with each item in an array. It doesn't create a new array like `map()` - it just performs an action on each item.

**Simple Example:**

```javascript
let fruits = ["Apple", "Banana", "Orange"];

fruits.forEach(function(fruit) {
  console.log("I like " + fruit);
});

// Output:
// I like Apple
// I like Banana
// I like Orange
```

**Using Arrow Function (Shorter way):**

```javascript
let fruits = ["Apple", "Banana", "Orange"];

fruits.forEach(fruit => console.log("I like " + fruit));

// Output:
// I like Apple
// I like Banana
// I like Orange
```

### The Old Way vs The New Way

**Traditional For Loop:**

```javascript
let fruits = ["Apple", "Banana", "Orange"];

for (let i = 0; i < fruits.length; i++) {
  console.log("I like " + fruits[i]);
}
```

**Using forEach() - Cleaner!:**

```javascript
let fruits = ["Apple", "Banana", "Orange"];

fruits.forEach(fruit => console.log("I like " + fruit));
```

**Key Difference:**

*   `map()` creates a new array with changed items
    
*   `forEach()` just does something with each item (no new array)
    

```javascript
// Using map() - creates new array
let numbers = [1, 2, 3];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6] - NEW ARRAY created

// Using forEach() - no new array
let numbers = [1, 2, 3];
numbers.forEach(num => console.log(num * 2));
// 2, 4, 6 are printed but NO NEW ARRAY is created
```

* * *

## 6\. reduce() - Combine All Items Into One Value

### What does reduce() do?

The `reduce()` method takes all items in an array and combines them into a single value. It's like adding all your coins to get the total money!

**Simple Example - Adding Numbers:**

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

let total = numbers.reduce(function(sum, num) {
  return sum + num;
});

console.log(total);
// Output: 10
```

**Using Arrow Function:**

```javascript
let numbers = [1, 2, 3, 4];
let total = numbers.reduce((sum, num) => sum + num);

console.log(total);
// Output: 10
```

How reduce() Works Step by Step

![](https://cdn.hashnode.com/uploads/covers/6950f0fdfe9a13bd8ea78167/b9f53c43-e265-4920-8918-4343911461bc.jpg align="center")

**Real-World Example - Calculating Total Price:**

```javascript
let prices = [100, 200, 150, 75];

let totalPrice = prices.reduce((total, price) => total + price);

console.log("Total Price: " + totalPrice);
// Output: Total Price: 525
```

**Another Example - Finding the Biggest Number:**

```javascript
let scores = [45, 89, 23, 95, 67];

let highestScore = scores.reduce((max, score) => {
  if (score > max) {
    return score;
  } else {
    return max;
  }
});

console.log("Highest Score: " + highestScore);
// Output: Highest Score: 95
```

* * *

## Quick Summary

Here's a quick table to remember all these methods:

| Method | What it does | Creates new array? | Example |
| --- | --- | --- | --- |
| push() | Adds item to END | No (modifies original) | array.push(5) |
| pop() | Removes from END | No (modifies original) | array.pop() |
| shift() | Removes from START | No (modifies original) | array.shift() |
| unshift() | Adds to START | No (modifies original) | array.unshift(5) |
| map() | Changes each item | YES | [array.map](http://array.map)(x => x \* 2) |
| filter() | Keeps certain items | YES | array.filter(x => x > 5) |
| forEach() | Does something with each | No | array.forEach(x => console.log(x)) |
| reduce() | Combines into one value | NO | array.reduce((a,b) => a + b) |

* * *

Keep practicing, and soon these methods will become second nature to you. Happy coding!