JavaScript Array methods
Tags: javascript, webdev, programming, vscode
Published: 2021-06-13 18:00:43

We have a lot of array methods in JavaScript but in this blog you are gonna see only the most useful methods and after reading this, I am pretty sure that you are going to master these methods and use them to optimize your code😇 

> Before getting started, I am going to use arrow function and  in case you don't know arrow functions don't worry, I have used normal functions (ES5 syntax) also!

<br>

### So Let's get started :

This blog includes →

   1. For Each
   2. Filter
   3. Map
   4. Sort
   5. Reduce

<br>

## 1.) For Each → 

This is a simple for loop.

![for loop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3oswsym8zj89r3z6fwr.png)

Now let's try this same thing using for Each loop.

![for each](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k5etw0guflijhadolkxz.png)

For each helps you to reduce the lines of code and makes the code much more readable.
You can also give index in for each loop:

![for each index](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r790flcoe90rop3mthtu.png)


The first parameter is the variable in which all the values are stored one by one, and the second parameter is the index of the 
current iteration.

## 2.) Filter →

As the name suggests, .filter() is a method which helps us to 
filter some values according to a given condition.

The .filter() method creates a new array with the values which is falling under the given condition from the existing array.


![filter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ucmkueteclrixd3cx2gx.png)


## 3.) Map →
.map() method creates a new array and performs a particular function for each element in the array.
This does not change the original array as it creates a new array.

![Map](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kxh8dg3o1fqj5x5sx8c.png)


## 4.) Sort →

As the name suggests .sort() method helps us to sort the array according to our condition.
If the condition is true then we return 1 or else we return -1, to get a better idea about it, we can use an example:
 
*If we want to sort the companies according to their start years.*

![sort](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/za8az0vll7xfbndke7z3.png)


.sort() also makes a new array and the original array is un-touched.
Here in this function we have 2 parameters 'a' and 'b' which will be assigned to 2 values from the array and then they will be compared and then filled in the new array.

## 5.) Reduce →

.reduce() method reduces the whole array to a single value.
reduce method executes a given function for each value in the array from left to right (starting from index 0 to array's length - 1), for example we have to find the sum of all the ages, so without for loop we can do this using reduce function.

![reduce](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m4fbxv78mbqc6uhex3bo.png)

We have to give 0 to set the initial value from which the values will start although it is optional so you may skip it.

## BONUS 🎈

<br>
<br>


## 6.) indexOf →

*This is a bonus array method for y'all!*

This method checks if the entered value is in the array or not.
If the searched value is found, it will return the position/index else it will return -1.

_Note: idexOf() is cases sensitive._

![bonus](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/27ys7wtfz7lrtw32ofrr.png)

------------------------------------------------------------------

__Next Blog's topic -> Features introduced in ES6.__

------------------------------------------------------------------

Do visit the community made by me and my friend @sumeet16 for more amazing and informative stuff, and if you wanna recommend something or give feedback, feel free to comment😇!

CodeBox's handles:
https://linktr.ee/CodeBox