# Top JavaScript Array Methods Every Beginner Should Know

When I first started learning JavaScript, I felt array methods were quite confusing, as there were many of them. But after practicing with some examples, I realised that array methods makes the code very cleaner and readable.

In this blog, we will learn the important Javascript array methods that are used most of the time.

## Why do We Need Array Method?

Without array methods, If we need to perform operations on a particular or all the elements of an array, we will have to use a for loop:

For example:

```javascript
let arr = [1, 2, 3, 4];
for (let i = 0; i < arr.length; i++) {
  arr[i] *= 2;
}

console.log(arr);  // Output : [2, 4, 6, 8]
```

This works, but array methods are very much shorter, cleaner, and more readable.

## 1\. push() and pop() :-

*   Both are used to manipulate the data at the end of an array. They **mutates the original array**
    
*   push() is used to add an element at the last of an array.
    
*   pop() is used to remove an element from the last of an array.
    

For Example:

```javascript
//Push.....

const fruits = ["apple", "banana"]; 
fruits.push("mango"); 
console.log(fruits);

// Output : ["apple", "banana", "mango"]

//Pop.....

fruits.pop();
console.log(fruits);

// Output : ["apple", "banana",]
```

## 2\. shift() and unshift() :-

*   Both are used to manipulate the data at the beginning of an array. they **mutate the original array**
    
*   shift() is used to add an element at the start of an array.
    
*   unshift() is used to remove an element from the start of an array (first element).
    

For Example:

```javascript
//shift().....

const fruits = ["apple", "banana"]; 
fruits.shift("mango"); 
console.log(fruits);

// Output : ["mango", "apple", "banana"]

//unshift.....

fruits.pop();
console.log(fruits);

// Output : ["apple", "banana"]
```

## 3\. map() :-

Map is used to mutate every element of an array, for example, doubling each element of the array, etc

Map **returns a brand new array** consisting of the elements which result from the calling of the callback function for each element in the original array

For Example:

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

const doubled = arr.map(function (num) {
  return num * 2;
});

console.log(doubled);

//Output: [2, 4, 6, 8]

```

## 4\. filter() :-

As the name suggests, it is used to filter the elements of on array based on a given condition. It **returns a brand new array** consisting of the elements that satisfied a given condition.

For Example:

```javascript

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

const greaterThanTen = numbers.filter(function (num) {
  return num > 10;
});

console.log(greaterThanTen);




Output

[15, 20]

Visual Flow

 [5, 10, 15, 20]
        ↓
keep numbers > 10
        ↓
    [15, 20]
```

## 5\. reduce() :-

*   `reduce()` is used to combine all array values into a single value.
    
*   It may feel confusing at first, so start with simple examples.
    

Example: Find Sum of Numbers

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

const total = numbers.reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(total);
```

Output

```plaintext
10
```

### How reduce() Works

```plaintext
0 + 1 = 1
1 + 2 = 3
3 + 3 = 6
6 + 4 = 10
```

Final Answer = `10`

## 6\. forEach :-

*   forEach() is used to loop over each element of an array and perform the required action.
    
*   Unlike map, it does not return anything.
    

Example

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

fruits.forEach(function (fruit) {
  console.log(fruit);
});

// Output

apple
banana
mango
```

Use `forEach()` when you only want to perform actions like printing values.

## Small Practice Assignment

Try this yourself in the browser console.

Step 1: Create an array

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

Step 2: Double each number using map()

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

console.log(doubled);
```

Step 3: Get numbers greater than 10 using filter()

```javascript
const greaterThanTen = numbers.filter((num) => num > 10);

console.log(greaterThanTen);
```

Step 4: Find total sum using reduce()

```javascript
const total = numbers.reduce((acc, curr) => acc + curr, 0);

console.log(total);
```

* * *

## Final Thoughts

Array methods are extremely useful in JavaScript in modern web development.

At first, reduce() and filter() might feel a little difficult, but after practicing a few examples, it will become much easier

The more you practice, the more natural these methods will feel.

Happy Coding