# JavaScript Array Methods Every Beginner Should Know

When learning JavaScript, arrays show up everywhere.  
And instead of writing long loops every time, JavaScript gives us **built-in array methods** that make things easier.

Let’s go through some of the most common ones.

* * *

## push() and pop()

These work on the **end of an array**.

### push()

Adds an item to the end.

Before:

```plaintext
let nums = [1, 2, 3]
```

```plaintext
nums.push(4)
```

After:

```plaintext
[1, 2, 3, 4]
```

* * *

### pop()

Removes the last item.

Before:

```plaintext
[1, 2, 3, 4]
```

```plaintext
nums.pop()
```

After:

```plaintext
[1, 2, 3]
```

Simple stack-like behavior.

* * *

## shift() and unshift()

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

### shift()

Removes the first element.

Before:

```plaintext
let nums = [1, 2, 3]
```

```plaintext
nums.shift()
```

After:

```plaintext
[2, 3]
```

* * *

### unshift()

Adds element at the beginning.

```plaintext
nums.unshift(0)
```

After:

```plaintext
[0, 2, 3]
```

These are useful but slightly slower because array positions shift.

* * *

## forEach()

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

Example:

```plaintext
let nums = [1,2,3]

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

Output:

```plaintext
1
2
3
```

It’s mainly used when you **just want to do something with each item**, not create a new array.

* * *

## map()

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

Example:

```plaintext
let nums = [1,2,3]

let doubled = nums.map(n => n * 2)
```

Result:

```plaintext
[2,4,6]
```

Original array stays the same.

* * *

### Traditional loop vs map()

Traditional loop:

```plaintext
let result = []

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

With map():

```plaintext
let result = nums.map(n => n*2)
```

Much cleaner.

* * *

## filter()

`filter()` creates a new array containing **only items that match a condition**.

Example:

```javascript
let nums = [5,10,15,20]

let big = nums.filter(n => n > 10)
```

Result:

```javascript
[15,20]
```

So filter basically **removes elements that don’t pass the test**.

* * *

## reduce() (basic idea)

`reduce()` is used to **combine all values into a single result**.

Example: sum of numbers

```javascript
let nums = [1,2,3,4]

let total = nums.reduce((sum,n) => sum + n, 0)
```

Result:

```javascript
10
```

Here:

*   `sum` keeps accumulating
    
*   each number gets added
    

Reduce can do many things, but beginners mostly use it for totals.

* * *

## Small practice idea

Try this in your browser console.

```javascript
let nums = [5,8,12,20]
```

Double each number:

```plaintext
nums.map(n => n*2)
```

Get numbers greater than 10:

```plaintext
nums.filter(n => n>10)
```

Find total sum:

```plaintext
nums.reduce((sum,n)=>sum+n,0)
```

Just experimenting with these a few times makes them stick.

* * *

## Final thought

You *can* still use `for` loops, but methods like **map, filter, and reduce** make code shorter and easier to read.

Once you get comfortable with them, working with arrays becomes much smoother.