# Array Methods You Must Know

## Introduction

When learning JavaScript, arrays are everywhere. Whether you're storing user data, products, or anime characters, arrays help organize information efficiently.

JavaScript provides powerful **array methods** that make working with arrays easier and cleaner compared to traditional loops.

In this article, we’ll explore the most important array methods using **simple examples and anime-themed scenarios**.

Methods covered:

*   `push()` and `pop()`
    
*   `shift()` and `unshift()`
    
*   `map()`
    
*   `filter()`
    
*   `reduce()` (basic explanation)
    
*   `forEach()`
    

All examples are beginner-friendly and can be tried directly in the **browser console**.

* * *

# 1\. push() and pop() – Managing Your Anime Team

Imagine you are building a ninja squad in **Naruto**.

## push() – Add element to the end

```plaintext
let team = ["Naruto", "Sasuke", "Sakura"];

console.log("Before:", team);

team.push("Kakashi");

console.log("After:", team);
```

### Before

```plaintext
["Naruto", "Sasuke", "Sakura"]
```

### After

```plaintext
["Naruto", "Sasuke", "Sakura", "Kakashi"]
```

`push()` adds a new element **at the end of the array**.

* * *

## pop() – Remove last element

```plaintext
let team = ["Naruto", "Sasuke", "Sakura", "Kakashi"];

console.log("Before:", team);

team.pop();

console.log("After:", team);
```

### Before

```plaintext
["Naruto", "Sasuke", "Sakura", "Kakashi"]
```

### After

```plaintext
["Naruto", "Sasuke", "Sakura"]
```

`pop()` removes the **last element** from the array.

* * *

# 2\. shift() and unshift() – Managing the Front of the Line

These methods work on the **start of the array**.

## unshift() – Add element at the beginning

```plaintext
let pirates = ["Zoro", "Nami", "Sanji"];

console.log("Before:", pirates);

pirates.unshift("Luffy");

console.log("After:", pirates);
```

### Before

```plaintext
["Zoro", "Nami", "Sanji"]
```

### After

```plaintext
["Luffy", "Zoro", "Nami", "Sanji"]
```

* * *

## shift() – Remove the first element

```plaintext
let pirates = ["Luffy", "Zoro", "Nami", "Sanji"];

console.log("Before:", pirates);

pirates.shift();

console.log("After:", pirates);
```

### Before

```plaintext
["Luffy", "Zoro", "Nami", "Sanji"]
```

### After

```plaintext
["Zoro", "Nami", "Sanji"]
```

* * *

# 3\. map() – Transforming Every Element

`map()` creates a **new array by modifying each element**.

Imagine increasing the **power levels of anime characters**.

```plaintext
let powerLevels = [100, 200, 300];

let boostedPower = powerLevels.map(function(power) {
  return power * 2;
});

console.log("Original:", powerLevels);
console.log("Boosted:", boostedPower);
```

### Output

```plaintext
Original: [100, 200, 300]
Boosted: [200, 400, 600]
```

* * *

## Traditional for loop vs map()

### Using a for loop

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

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

console.log(result);
```

### Using map()

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

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

console.log(result);
```

`map()` is **shorter and cleaner**.

* * *

# 4\. filter() – Selecting Specific Elements

`filter()` creates a **new array with elements that match a condition**.

Example: select **high power fighters only**.

```plaintext
let powerLevels = [50, 120, 300, 80];

let strongFighters = powerLevels.filter(function(power) {
  return power > 100;
});

console.log("Original:", powerLevels);
console.log("Strong fighters:", strongFighters);
```

### Output

```plaintext
Original: [50,120,300,80]
Strong fighters: [120,300]
```

* * *

## Traditional for loop vs filter()

### Using a loop

```plaintext
let numbers = [10, 25, 40, 5];
let result = [];

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

console.log(result);
```

### Using filter()

```plaintext
let numbers = [10, 25, 40, 5];

let result = numbers.filter(function(num) {
  return num > 20;
});

console.log(result);
```

Again, `filter()` makes the code **simpler and easier to read**.

* * *

# 5\. reduce() – Combining Values (Beginner Explanation)

`reduce()` takes an array and **reduces it to a single value**.

Example: calculating the **total power level of a team**.

```plaintext
let powers = [100, 200, 300];

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

console.log(totalPower);
```

### Output

```plaintext
600
```

Explanation:

```plaintext
0 + 100 = 100
100 + 200 = 300
300 + 300 = 600
```

So the final result becomes **600**.

* * *

# 6\. forEach() – Running Code for Each Element

`forEach()` runs a function **for every element in the array**.

Example: showing all anime characters.

```plaintext
let characters = ["Goku", "Naruto", "Luffy"];

characters.forEach(function(character) {
  console.log(character);
});
```

### Output

```plaintext
Goku
Naruto
Luffy
```

`forEach()` is commonly used for:

*   printing values
    
*   updating UI
    
*   logging data
    

* * *

# Assignment for Readers 🚀

Open your **browser console** and try the following:

### Task 1

Create an array of **anime characters** and add one using `push()`.

### Task 2

Remove the first character using `shift()`.

### Task 3

Create an array of numbers and:

*   double them using `map()`
    
*   filter numbers greater than 50 using `filter()`
    

### Task 4

Use `reduce()` to calculate the **total of all numbers**.