5 Array Methods You Should Know 🚀
Tags: javascript, webdev, beginners, html
Published: 2021-04-27 14:04:51

Array methods are used in almost every JavaScript project nowadays, which also means that everybody should know the important ones. So I will give you 5 array methods that you should know.

So let's get started!!

## .forEach
This is a common one and a vital one. The `.forEach` method executes a given function on every element from an array. So I would try to explain it through some code:

```javascript
const nums = [1, 2, 3, 4, 5, 6, 7, 8];

nums.forEach(arrFunc);

function arrFunc(item, index, arr) {
  console.log(item);
}

// Output:
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
```

So as you can see I created an array `nums` and then called the `.forEach()` method and then declared a callback function called `arrFunc()`, so this is where it all happens, you see the `.forEach()` needs 3 parameters, first one is `item` which are the elements which in our case are 1, 2, 3, 4, 5, 6, 7 and 8, then the second parameter is `index` which is the index of the item in the array and second is the `arr` which is the array itself, although you don't use this parameter often. So in the callback function, you can just type the things you want with every single element on the array. It is like a for loop on the base but not much like it.

Keep in mind that you can use the `.forEach()` method with arrow functions, which is always the recommended way:

```javascript
const nums = [1, 2, 3, 4, 5, 6, 7, 8];

nums.forEach((item, index, arr) => {
  console.log(item);
});
```

## .concat
The `.concat` method allows you to merge 2 or more arrays together without modifying the arrays but instead creating a new one.
It is a bit easy and useful and it is as simple as it sounds in code too. So let's say we have two arrays:

```javascript
const x = [10, 20, 30];
const y = [40, 50, 60];
```

So if you want to merge them you can do that easily with this method, like this:

```javascript
const z = x.concat(y)

// Now If you console.log the z array
console.log(z)
// You will receive [10, 20, 30, 40, 50, 60]
```

If you want to concat more than 1 arrays, you can just add it as the second parameter and if more you can add more parameters, like this:
```javascript
const z = x.concat(y, q, v)
```

You can also use `.concat` method like the `.push` method like this:
```javascript
const x = [10, 20, 30];

const z = x.concat(40);

console.log(z);
// Output: [10, 20, 30, 40]
```

## .includes
The `.includes` method allows you to find if an element is included inside an array. Let's try understand it with code:

```javascript
const names = ["Garvit", "Lorenzo", "Adam"];

const outputRes = names.includes("Adam");

console.log(outputRes);

// Output: true
```

So here as you can see we have declared an array called `names` and we have the names, Garvit, Lorenzo and Adam stored in them now in the next line we declared a variable called `outputRes` in which we typed if the array `names` includes "Adam" then the output will be true, prooving that the array includes that and if we wrote something like, "John" the output will be false prooving that "John" is not in that array.

## .splice
The `.splice` method allows you to remove or replace an existing element of an array, simple right? Let's try to learn more about this in code:
```javascript
const numbers = [1, 2, 3, 4, 5, 6];

numbers.splice(2, 3);

console.log(numbers);

// Output: [1, 2, 6]
```
So as you can see I have created an array called `numbers` and entered some numbers in it and then I typed `numbers.splice(2, 3)`, so here the first parameter is the starting index from where we want to start removing elements which in our case was 2 (3) and then the second parameter that we passed was that how many elements we want to remove which in our case was 3 (3, 4, 5).

Now take a look at this:
```javascript
const numbers = [1, 2, 3, 4, 5, 6];

const modifiedArr = numbers.splice(2, 3);

console.log(modifiedArr);

// Output: [3, 4, 5]
```

Not much of a difference, right? but still, the output has changed, that is because we have stored the splice array in a variable, so It is like putting all the deleted element in the `modifiedArr`.

If you want to replace the existing elements, you can just add the elements as another parameter:

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

numbers.splice(2, 3, 7, 8);

console.log(numbers);

// Output: [1, 2, 7, 8, 6]
```

## .reverse
The `.reverse` method allows you to reverse an array, this is an easy one, lets see how that works in code:

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

numbers.reverse();

console.log(numbers);

// Output: [6, 5, 4, 3, 2, 1]
```

#### References:
[Florin Pop's Array Methods Playlist](https://www.youtube.com/watch?v=SXb5LN_opbA&list=PLgBH1CvjOA62PBFIDq55-S6Beivje30A2)
[MDN Web Docs](https://developer.mozilla.org/en-US/)

## ⚡️ Giveaway ⚡️
We are giving away any course you need on Udemy. Any price any course.
Steps to enter the giveaway
--> React to this post
--> Subscribe to our [Newsletter](https://worldindev.ck.page/) <-- Very important
--> Follow me on [Twitter](https://twitter.com/garvitmotwani) <-- x2 Chances of winning

The winner will be announced on May 1, Via Twitter

---

Thank you very much for reading this article.

**PLEASE LIKE, SHARE, AND COMMENT**

Follow me on [Dev](https://dev.to/garvitmotwani) and [Twitter](https://twitter.com/GarvitMotwani)

---

You Should also check {% link https://dev.to/worldindev/400-javascript-interview-questions-with-answers-2fcj %} by my friend @devlorenzo 

Subscribe to our [newsletter](https://chipper-motivator-3112.ck.page/05710ea3d3) to receive our weekly recap directly on your email!

Join us on [Discord](https://discord.gg/aWS2YKk6) to participate in hackathons with us / participate in our giveaways!

Happy Coding.