Don’t use for loop for JavaScript Arrays
Tags: javascript, react, angular, beginners
Published: 2020-04-24 22:34:11

Lets first Talk about the Array in the Programming world
I assume that if you belong from the programming world then you must playing with this stuff called Array ,array can hold different elements or objects. We can also use an array as a list, a stack, or a queue in JavaScript. While the other languages like c and c++ JavaScript can contain items of same data type or a mixture of data types.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m7qx6qdt8qrct43w7ixj.jpg)
As JavaScript coders, we always work with arrays and lists. If I told you to do the coding without using the Array, you stop writing the code within 2 minutes. 

We use them to collect objects, split strings, search, sort, etc. Obviously we use our old friend for-loop to perform such actions, but these loops can get complex and hard to maintain pretty fast. You can write the super awesome logic with the help of for loop. But think about your co-workers or the person who is going to handle your code after. So in this tutorial, I am going to explain some awesome JavaScript array techniques that you can implement in your project.

What we have been doing so far?
<pre>
Var arr = [1,2,3,4,5]
Let sum =0;
For (let i=0; i < arr.length ; i++){
……. Our logic
}
</pre>

As a beginner, we always follow this method, whatever logic implementations we want to do for array we put that logic inside the for a loop . absolutely we love For loop our best friend. but its time to get rid of this syntax
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y2w5osj112dbsmn4fbv1.gif)
Sometimes we need to modify the given array but we also don’t want to lose the original array values. so in these types of situations, the map function can help us.

first, let's look at the old method
<pre>
const persons = [
{ name: ‘kushal’, city: ‘Jalandhar’, distance: 145},
{ name: ‘rahul’, city: ‘amritsar’, distance: 200},
{ name: ‘hemunt’, city: ‘ludhiana’, distance: 100}
]
</pre>
here we have the persons array which contains the person object and we want to convert the distance which was in the kilometers into the miles

Old method
<pre>
const convertedDistances = []
for (let i = 0; i < persons.length; i++) {
convertedDistances.push({
…persons[i],
distance: persons[i].distance * 0.621371
})
}
</pre>
here we iterate through the array and convert the kilometers into miles by the formula and push it to the new array of convertedDistances. let's do the same thing with the map function

New method
<pre>
const convertedDistances = persons.map((person)=>
{
…person,
distance: person.distance * 0.621371
}
)
</pre>

Why should You Use Map
It lets you avoid making changes to the main array
You can modify the items you want
It gives you a more readable code.

Note: For loop is fastest from the map but in the current situation we have a lot of processing power for the client browser so it doesn't affect the performance that much. 


I hope you like this Blog. This is my first ever blog post on any platform and I know that I have done a lot of mistakes, I always like to listen to feedback, if you have any for me then please write that one on the comment. and if you like to read more like this one then give a follow