# Array Methods You Must Know (JavaScript Beginner Guide)

JavaScript arrays are one of the most used data structures in web development. If you understand a few core array methods, your code becomes **shorter, cleaner, and easier to read**.

In this article we will learn the most important array methods every beginner should know:

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

Every method will include:

*   A simple explanation
    
*   Before → after array state
    
*   A practical example
    

You should **try the examples in your browser console** as you read.

# Prerequisites

Before reading this article you should know:

*   What a JavaScript array is
    
*   Basic JavaScript syntax
    
*   How to open the browser console (F12)
    

Example array:

```javascript
const numbers = [2, 5, 8, 12];
```

# Quick Overview of Methods

| Method | What it does |
| --- | --- |
| push() | Adds item to the end |
| pop() | Removes last item |
| shift() | Removes first item |
| unshift() | Adds item to the beginning |
| map() | Creates a new array by transforming values |
| filter() | Creates a new array with selected values |
| reduce() | Combines array values into a single result |
| forEach() | Runs a function for each item |

# push() and pop()

These methods modify the **end of an array**.

### push()

Adds a new element to the end.

### Example

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

fruits.push("mango");

console.log(fruits);
```

Before

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

After

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

### pop()

Removes the last element from the array.

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

fruits.pop();

console.log(fruits);
```

Before

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

After

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

# shift() and unshift()

These methods modify the **beginning of the array**.

### shift()

Removes the first element.

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

numbers.shift();

console.log(numbers);
```

Before

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

After

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

### unshift()

Adds a value at the start.

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

numbers.unshift(10);

console.log(numbers);
```

Before

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

After

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

# map()

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

It does **not modify the original array**.

### Example: Double each number

```javascript
const numbers = [2, 5, 8];

const doubled = numbers.map(num => num * 2);

console.log(doubled);
```

Output

```plaintext
[4, 10, 16]
```

Original array remains:

```plaintext
[2, 5, 8]
```

### How map works

```mermaid
flowchart LR
A[2] --> B[2 * 2 = 4]
C[5] --> D[5 * 2 = 10]
E[8] --> F[8 * 2 = 16]
```

Each value is transformed into a new value.

# filter()

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

### Example: Numbers greater than 10

```javascript
const numbers = [5, 12, 8, 20];

const result = numbers.filter(num => num > 10);

console.log(result);
```

Output

```plaintext
[12, 20]
```

Original array stays the same.

### How filter works

```mermaid
flowchart LR
A[5] --> B{>10?}
C[12] --> D{>10?}
E[8] --> F{>10?}
G[20] --> H{>10?}

B -->|No| X[Removed]
D -->|Yes| Y[Keep]
F -->|No| Z[Removed]
H -->|Yes| W[Keep]
```

# reduce() (Beginner Explanation)

`reduce()` combines array values into **a single result**.

Common uses:

*   Sum of numbers
    
*   Total price
    
*   Counting items
    

### Example: Calculate sum

```javascript
const numbers = [2, 5, 8];

const total = numbers.reduce((sum, num) => sum + num, 0);

console.log(total);
```

Output

```plaintext
15
```

Explanation:

*   Start with `0`
    
*   Add each number
    
*   Return final result
    

### How reduce accumulates values

```mermaid
flowchart LR
A[Start: 0] --> B[0 + 2 = 2]
B --> C[2 + 5 = 7]
C --> D[7 + 8 = 15]
```

Final result = **15**

# forEach()

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

Unlike `map()`, it **does not create a new array**.

### Example

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

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

Output

```plaintext
1
2
3
```

# Traditional for Loop vs map() / filter()

### Using a for loop

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

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

### Using map()

```javascript
const doubled = numbers.map(num => num * 2);
```

`map()` is shorter and easier to read.

# Mini Practice Assignment

Try this in your console.

### Step 1

Create an array:

```javascript
const numbers = [5, 10, 15, 20];
```

### Step 2 — Double numbers

Use `map()`.

Expected result:

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

### Step 3 — Numbers greater than 10

Use `filter()`.

Expected result:

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

### Step 4 — Calculate total

Use `reduce()`.

Expected result:

```plaintext
50
```

# Quick Cheat Sheet

| Method | Returns New Array? | Modifies Original? |
| --- | --- | --- |
| push | ❌ | ✅ |
| pop | ❌ | ✅ |
| shift | ❌ | ✅ |
| unshift | ❌ | ✅ |
| map | ✅ | ❌ |
| filter | ✅ | ❌ |
| reduce | ❌ | ❌ |
| forEach | ❌ | ❌ |

# Conclusion

Understanding array methods is a **core JavaScript skill**.

With just a few methods like `map`, `filter`, and `reduce`, you can write cleaner and more powerful code.

Instead of writing long loops, you can transform and process data with simple readable functions.

If you're learning JavaScript, practice these methods in the console and try building small examples yourself.

The more you use them, the more natural they will feel.