# Array Methods You Must Know in JavaScript

In the previous blog, we understood what arrays are and how they work.

You saw how to:

*   store multiple values
    
*   access them using index
    
*   add and remove elements
    

But that was just the beginning.

Real-world applications are not about just storing data. They are about **working with data**.

You will rarely just read an array. Most of the time, you will:

*   transform it
    
*   filter it
    
*   extract values from it
    
*   compute something from it
    

And this is exactly where array methods come in.

* * *

## Why Array Methods Matter

Let’s start with a simple example.

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

Now imagine you want:

*   all numbers doubled
    
*   only even numbers
    
*   sum of all numbers
    

You could do this with loops.

But JavaScript gives you built-in methods that make this much cleaner and easier to read.

* * *

## 1\. forEach: Iterating Over Arrays

`forEach` is used to loop over an array.

```javascript
const arr = [1, 2, 3];

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

It runs a function for every element.

### Important Point

`forEach` does not return anything.

```javascript
const result = arr.forEach(num => num * 2);
console.log(result); // undefined
```

Use it when you just want to perform an action, not create a new array.

## 2\. map: Transforming Arrays

`map` creates a new array by transforming each element.

```javascript
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]
```

### Mental Model

*   `forEach` → do something
    
*   `map` → create something
    

## 3\. filter: Selecting Elements

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

```javascript
const numbers = [1, 2, 3, 4];
const even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2, 4]
```

### Real Use Case

```javascript
const users = [
  { name: "Shikhar", age: 25 },
  { name: "Rahul", age: 17 }
];
const adults = users.filter(user => user.age >= 18);
```

## 4\. reduce: Reducing to a Single Value

This is the most powerful and most confusing method.

```javascript
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => {
  return acc + curr;
}, 0);
console.log(sum); // 10
```

### Breaking It Down

*   `acc` → accumulator
    
*   `curr` → current value
    
*   `0` → initial value
    

Step by step:

*   0 + 1 = 1
    
*   1 + 2 = 3
    
*   3 + 3 = 6
    
*   6 + 4 = 10
    

### Real Use Case

```javascript
const cart = [
  { price: 100 },
  { price: 200 }
];

const total = cart.reduce((sum, item) => sum + item.price, 0);
```

## 5\. find: Get First Match

```javascript
const users = [
  { name: "Shikhar" },
  { name: "Rahul" }
];

const user = users.find(u => u.name === "Rahul");
console.log(user);
```

Returns the first match.

## 6\. some: Check If Any Match

```javascript
const numbers = [1, 2, 3];
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true
```

## 7\. every: Check If All Match

```javascript
const numbers = [2, 4, 6];
const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // true
```

## 8\. includes: Check Value Exists

```javascript
const arr = [1, 2, 3];
console.log(arr.includes(2)); // true
```

## 9\. slice vs splice (Important)

### slice (non-destructive)

```javascript
const arr = [1, 2, 3, 4];
const newArr = arr.slice(1, 3);
console.log(newArr); // [2, 3]
```

Does not modify original array.

### splice (destructive)

```javascript
const arr = [1, 2, 3, 4];
arr.splice(1, 2);
console.log(arr); // [1, 4]
```

Modifies original array.

* * *

## Chaining Methods

This is where things get powerful.

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

const result = numbers
  .filter(n => n % 2 === 0)
  .map(n => n * 2);

console.log(result); // [4, 8]
```

This is how real-world code looks.

* * *

## Common Mistakes

### 1\. Using forEach instead of map

```javascript
// Wrong
arr.forEach(num => num * 2);
```

### 2\. Forgetting return in map

```javascript
arr.map(num => {
  num * 2; // returns undefined
});
```

### 3\. Overusing reduce

Not everything needs reduce.

## Real-World Example

```javascript
const orders = [
  { amount: 100, status: "completed" },
  { amount: 200, status: "pending" },
  { amount: 150, status: "completed" }
];

const totalCompleted = orders
  .filter(order => order.status === "completed")
  .reduce((sum, order) => sum + order.amount, 0);

console.log(totalCompleted);
```

* * *

## Why This Topic is So Important

Most interview questions:

*   involve arrays
    
*   require transformations
    
*   use these methods
    

If you understand:

*   map
    
*   filter
    
*   reduce
    

You are already ahead of most people.

* * *

## Final Thought

Array methods are not just utilities. They change how you think about problems. Instead of writing long loops, you start writing expressive, readable, and declarative code. And that is what modern JavaScript is all about.