5 must-know Javascript array methods
Tags: javascript, webdev, beginners, codenewbie
Published: 2020-06-30 17:52:38

Arrays are somethings that are used a lot in the programming world. In javascript, arrays have a lot of powerful methods that we can use to iterate, add, remove, or manipulate the data according to our needs. We will be seeing some of them in this post.

# 1. forEach()
This method is used when we want to iterate over the **same array**. The method executes a function for every item present in the array. It **does not return anything** by default. 

### Syntax:
```js
array.forEach(function(currentElement, index, arr) {
    // do something
}, thisValue)
```
### Parameters: 
- **currentElement:** The value of the current element in the loop.
- **index :** The index of the current element.
- **arr :** The array on which forEach() method is called.
- **thisValue :** Value of this keyword.

### Example:
```js
const snacks = [
{ id: 1, name: 'Burger', price: 60 },
{ id: 2, name: 'Pizza', price: 100},
{ id: 3, name: 'Sandwich', price: 40}
]

snacks.forEach(function(snack) {
    console.log(snack.name); // Output: Burger, Pizza, Sandwich 
});
```

# 2. map()
This method receives a function as a parameter and **returns a new array** as an output. The function is called once for every element present in the array.

### Syntax:
```js
array.map(function(currentElement, index, arr) {
    // do something and return a new array
}, thisValue)
```
### Parameters:
- Same as forEach method.

### Example:
In the following example, we can use the map method to create a new array having only the names of the snacks in it.

```js
const snacks = [
{ id: 1, name: 'Burger', price: 60},
{ id: 2, name: 'Pizza', price: 100},
{ id: 3, name: 'Sandwich', price: 50}
]

const snackNames = snacks.map(function(snack) {
    return snack.name;
});
// Output: snackNames = ['Burger', 'Pizza', 'Sandwich']
```

# 3. filter()
The filter method as the name suggests is used to **filter an array** based on a condition we provide to the method and in return, it creates a **new array** that satisfies our given condition. 

### Syntax:
```js
array.filter(function(currentElement, index, arr) {
    // return a new array with elements that satisy a condition
}, thisValue)
```
Parameters:
- Same as forEach method.

### Example:
In the following example, we can use the filter method to filter out snacks that have a price of more than 50.

```js
const snacks = [
{ id: 1, name: 'Burger', price: 60},
{ id: 2, name: 'Pizza', price: 100},
{ id: 3, name: 'Sandwich', price: 40}
]

const filteredSnacks = snacks.filter(function (snack) {
    return snack.price > 50;
});
/* Output: [
{ id: 1, name: 'Burger', price: '60'},
{ id: 2, name: 'Pizza', price: '100'},
] */

```

# 4. reduce()
This method executes a provided function for every value present in the array and this function is also called a **reducer** function as it reduces the array into a single value in the end.

### Syntax:
```js
array.reduce(function(total, currentElement, index, arr) {
    // reduce the array to a single value
}, initialValue) 
```

### Parameter:
- **total :** It is the total of all the return values we get on each function call and it's initially set equal to the initialValue.
- **currentElement :** The value of the current element in the loop.
- **index :** The index of the current element.
- **arr :** The array on which reduce() method is called.
- **initialValue :** It is the initial value used for the first parameter (here total) of the function.

### Example:
In our example, if we want to get the total of the price of all the snacks present in our array we can use the reduce() method.

```js
const snacks = [
{ id: 1, name: 'Burger', price: 60},
{ id: 2, name: 'Pizza', price: 100},
{ id: 3, name: 'Sandwich', price: 40}
]

const totalPrice = snacks.reduce((snack, currentTotal) => {
    return snack.price + currentTotal;
}, 0); // 0 is used to initialize our total to 0

console.log(totalPrice); // Output:  200



```
# 5. includes()
This method is used to determine if an element is present in an array or not. If the element is present it returns `true` otherwise it returns `false` .

Syntax:
```js
array.includes(element, startIndex);
```
### Parameters:
- **element :** The element to search for.
- **startIndex :** Index of the array from where you want to start.

### Example:
```js
const numbersArray = [10, 20, 30, 40, 50];

console.log(numbersArray.includes(10)); // Output: True
console.log(numbersArray.includes(100)); // Output: False
```