# Array Methods in JavaScript

# Array Methods

Arrays are everywhere in JavaScript.  
They store lists of data and help you work with them efficiently.

JavaScript provides many **built-in array methods**.  
These methods make your code cleaner, shorter, and easier to understand.

---

## What Are Array Methods?

Array methods are functions attached to the `Array` prototype.

They let you perform actions like:

* add items
    
* remove items
    
* loop through data
    
* transform values
    
* combine arrays
    

Example:

```javascript
const nums = [1, 2, 3];
nums.push(4);
```

---

# Methods That Add or Remove Elements

These methods **change the original array**.

---

## `push()` – Add to the End

```javascript
const arr = [1, 2];
arr.push(3);

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

---

## `pop()` – Remove from the End

```javascript
arr.pop(); // removes 3
```

---

## `unshift()` – Add to the Start

```javascript
arr.unshift(0);
```

---

## `shift()` – Remove from the Start

```javascript
arr.shift();
```

---

## `splice()` – Add or Remove at Any Position

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

fruits.splice(1, 1); // remove 1 item at index 1
```

Add elements:

```javascript
fruits.splice(1, 0, "orange");
```

---

# Methods That Do NOT Change the Original Array

These methods return a **new array**.

---

## `slice()` – Copy Part of an Array

```javascript
const nums = [10, 20, 30, 40];
const part = nums.slice(1, 3);

console.log(part); // [20, 30]
```

---

## `concat()` – Combine Arrays

```javascript
const a = [1, 2];
const b = [3, 4];

const result = a.concat(b);
```

---

## Spread Operator (`...`)

```javascript
const result = [...a, ...b];
```

---

# Searching and Checking Methods

---

## `indexOf()`

```javascript
fruits.indexOf("banana"); // 1
```

Returns `-1` if not found.

---

## `includes()`

```javascript
fruits.includes("apple"); // true
```

---

## `find()`

```javascript
const users = [{ id: 1 }, { id: 2 }];

const user = users.find(u => u.id === 2);
```

Returns the first matching element.

---

## `findIndex()`

```javascript
users.findIndex(u => u.id === 2); // 1
```

---

# Iteration Methods

These methods loop through arrays.

---

## `forEach()`

```javascript
nums.forEach(n => console.log(n));
```

Does not return anything.

---

## `map()` – Transform Data

```javascript
const doubled = [1, 2, 3].map(n => n * 2);
```

Returns a new array.

---

## `filter()` – Keep Some Elements

```javascript
const evens = [1, 2, 3, 4].filter(n => n % 2 === 0);
```

---

## `reduce()` – Combine Values

```javascript
const sum = [1, 2, 3].reduce((total, n) => total + n, 0);
```

---

## `some()` – Check If Any Match

```javascript
[1, 2, 3].some(n => n > 2); // true
```

---

## `every()` – Check If All Match

```javascript
[1, 2, 3].every(n => n > 0); // true
```

---

# Sorting and Reversing

---

## `sort()`

```javascript
const nums = [10, 2, 5];
nums.sort((a, b) => a - b);
```

⚠️ Sort modifies the array.

---

## `reverse()`

```javascript
nums.reverse();
```

---

# Converting Arrays

---

## `join()`

```javascript
["a", "b", "c"].join("-"); // "a-b-c"
```

---

## `toString()`

```javascript
[1, 2, 3].toString(); // "1,2,3"
```

---

## `flat()` – Flatten Nested Arrays

```javascript
[1, [2, [3]]].flat(2); // [1, 2, 3]
```

---

# Checking Array Type

---

## `Array.isArray()`

```javascript
Array.isArray([1, 2]); // true
```

---

# Mutable vs Immutable Methods

### Mutable (change original array)

* `push`
    
* `pop`
    
* `shift`
    
* `unshift`
    
* `splice`
    
* `sort`
    
* `reverse`
    

---

### Immutable (return new array)

* `map`
    
* `filter`
    
* `slice`
    
* `concat`
    
* `flat`
    

---

# Common Mistakes

### ❌ Expecting `map()` to modify array

```javascript
arr.map(x => x * 2);
// original array unchanged
```

---

### ❌ Using `forEach()` expecting return

```javascript
const result = arr.forEach(x => x * 2);
// result is undefined
```

---

### ❌ Forgetting sort comparison

```javascript
[10, 2].sort(); // [10, 2] ❌
```

---

# Best Practices

Prefer `map`, `filter`, `reduce` over loops  
Avoid mutating arrays unintentionally  
Use `const` for arrays  
Chain methods for readable code  
Always provide compare function to `sort()`

---

# Table

| Purpose | Method |
| --- | --- |
| Add/remove | `push`, `pop`, `shift`, `unshift`, `splice` |
| Copy/merge | `slice`, `concat`, spread |
| Search | `indexOf`, `includes`, `find` |
| Transform | `map`, `filter`, `reduce` |
| Check | `some`, `every` |
| Sort | `sort`, `reverse` |
| Convert | `join`, `flat` |