# JavaScript Array Methods You Need to Know

Arrays become truly powerful once you learn the built-in methods JavaScript gives you to work with them. Instead of writing manual loops for everything, you can use purpose-built methods that are shorter, clearer, and expressive.

In this article we will cover the most commonly used array methods — from simple add and remove operations to powerful transformation tools like `map()`, `filter()`, and `reduce()`.

* * *

## Modifying Arrays: push(), pop(), shift(), unshift()

These four methods add or remove elements from an array. They are the bread and butter of array manipulation.

### `push()` — Add to the end

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

fruits.push("Mango");

console.log(fruits); // ["Apple", "Banana", "Mango"]
```

### `pop()` — Remove from the end

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

fruits.pop();

console.log(fruits); // ["Apple", "Banana"]
```

`pop()` removes the last element and also returns it, so you can capture it if needed:

```javascript
let removed = fruits.pop();
console.log(removed); // "Banana"
```

### `unshift()` — Add to the beginning

```javascript
let fruits = ["Banana", "Mango"];

fruits.unshift("Apple");

console.log(fruits); // ["Apple", "Banana", "Mango"]
```

### `shift()` — Remove from the beginning

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

fruits.shift();

console.log(fruits); // ["Banana", "Mango"]
```

### Quick reference

| Method | Where | Action |
| --- | --- | --- |
| push() | End | Adds element(s) |
| pop() | End | Removes element |
| unshift() | Beginning | Adds element(s) |
| shift() | Beginning | Removes element |

* * *

## `forEach()` — Loop Through Every Element

`forEach()` runs a function once for every element in an array. It is a clean alternative to a traditional `for` loop when you just want to do something with each item.

**Traditional for loop:**

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

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}
```

**Same thing with forEach():**

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

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

Same output, less code. `forEach()` does not return a new array — it just iterates.

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

names.forEach(name => {
  console.log("Hello, " + name + "!");
});
// "Hello, Alice!"
// "Hello, Bob!"
// "Hello, Charlie!"
```

* * *

## `map()` — Transform Every Element

`map()` creates a **new array** by applying a function to every element of the original. The original array is not changed.

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

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

console.log(numbers); // [1, 2, 3, 4, 5]  — unchanged
console.log(doubled); // [2, 4, 6, 8, 10] — new array
```

Think of it as an assembly line — every item goes in, gets transformed, and comes out the other side:

```plaintext
Input:  [1,   2,   3,   4,   5  ]
         |    |    |    |    |
        x2   x2   x2   x2   x2
         |    |    |    |    |
Output: [2,   4,   6,   8,   10 ]
```

Another example — convert an array of names to uppercase:

```javascript
let names = ["alice", "bob", "charlie"];

let upper = names.map(name => name.toUpperCase());

console.log(upper); // ["ALICE", "BOB", "CHARLIE"]
```

**For loop vs map():**

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

// map() — same result, much cleaner
let doubled = numbers.map(num => num * 2);
```

* * *

## `filter()` — Keep Only What Passes a Test

`filter()` creates a **new array** containing only the elements that pass a condition. Elements that fail the test are excluded.

```javascript
let numbers = [3, 8, 15, 4, 22, 7, 11];

let bigNumbers = numbers.filter(num => num > 10);

console.log(bigNumbers); // [15, 22, 11]
```

Each element is tested — keep it or drop it:

```plaintext
Input:  [3,    8,    15,   4,    22,   7,    11  ]
         |     |     |     |     |     |     |
       fail   fail  pass  fail  pass  fail  pass
                    |           |           |
Output:           [ 15,         22,        11  ]
```

Another example — filter only even numbers:

```javascript
let numbers = [1, 2, 3, 4, 5, 6, 7, 8];

let evens = numbers.filter(num => num % 2 === 0);

console.log(evens); // [2, 4, 6, 8]
```

**For loop vs filter():**

```javascript
// For loop
let evens = [];
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0) evens.push(numbers[i]);
}

// filter() — same result, much cleaner
let evens = numbers.filter(num => num % 2 === 0);
```

* * *

## `reduce()` — Combine Everything Into One Value

`reduce()` processes every element in an array and accumulates them into a single result. It is commonly used for summing numbers, but it can do much more.

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

let total = numbers.reduce((accumulator, current) => accumulator + current, 0);

console.log(total); // 15
```

There are two key pieces to understand:

*   **accumulator** — the running total, updated on every step
    
*   **current** — the element being processed right now
    
*   **0** — the starting value of the accumulator
    

Here is how it runs step by step:

Here is how it runs step by step:

```plaintext
Start: accumulator = 0

Step 1: 0 + 1 = 1   (accumulator is now 1)
Step 2: 1 + 2 = 3   (accumulator is now 3)
Step 3: 3 + 3 = 6   (accumulator is now 6)
Step 4: 6 + 4 = 10  (accumulator is now 10)
Step 5: 10 + 5 = 15 (accumulator is now 15)

Result: 15
```

Think of the accumulator as a running total on a calculator. Each number gets added to whatever the total already is.

* * *

## forEach vs map vs filter vs reduce

| Method | Returns | Changes original? | Best for |
| --- | --- | --- | --- |
| forEach() | Nothing | No | Looping, side effects |
| map() | New array | No | Transforming every element |
| filter() | New array | No | Selecting elements by condition |
| reduce() | Single value | No | Summing, combining, aggregating |

* * *

## Putting It All Together

```javascript
let prices = [120, 45, 300, 80, 210, 30];

// Add a new price
prices.push(175);
console.log(prices); // [120, 45, 300, 80, 210, 30, 175]

// Apply a 10% discount to all prices
let discounted = prices.map(price => price * 0.9);
console.log(discounted); // [108, 40.5, 270, 72, 189, 27, 157.5]

// Keep only prices above 100
let expensive = prices.filter(price => price > 100);
console.log(expensive); // [120, 300, 210, 175]

// Calculate total of all prices
let total = prices.reduce((sum, price) => sum + price, 0);
console.log(total); // 960
```

* * *

## Practice Assignment

Work through these steps using a single array of numbers:

**1\. Create an array of numbers:**

```javascript
let numbers = [4, 9, 15, 3, 22, 8, 17, 6];
```

**2\. Use map() to double each number:**

```javascript
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [8, 18, 30, 6, 44, 16, 34, 12]
```

**3\. Use filter() to get numbers greater than 10:**

```javascript
let greaterThanTen = numbers.filter(num => num > 10);
console.log(greaterThanTen); // [15, 22, 17]
```

**4\. Use reduce() to calculate the total sum:**

```javascript
let sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 84
```

Try running each step in your browser console. Change the numbers and observe how each method responds.

* * *

## Quick Recap

*   `push()` and `pop()` add and remove from the end of an array
    
*   `unshift()` and `shift()` add and remove from the beginning
    
*   `forEach()` loops through every element without returning anything
    
*   `map()` transforms every element and returns a new array
    
*   `filter()` keeps only elements that pass a condition and returns a new array
    
*   `reduce()` combines all elements into a single value using an accumulator
    
*   None of these methods modify the original array — except `push()`, `pop()`, `shift()`, and `unshift()`
    

These methods are the foundation of working with data in JavaScript. Once they feel comfortable, you will start reaching for them instead of `for` loops almost every time.

Happy coding! 🚀

* * *

> If you enjoyed this article, check out my other blogs on this profile. 🔗 Connect with me: [LinkedIn](https://linkedin.com/in/rajharsh03) | [GitHub](https://github.com/RajHarsh03) | [X (Twitter)](https://x.com/rajharsh03)