#10 JS Basics: The different loops and examples

Photo by Travis Yewell on Unsplash

Javascript language has different ways to get items from an array, some of them are faster and others more elegant, in this article, we will analyse them and compare with different examples and applications.

1. THE CLASSIC: FOR

This method is the classic for loops items inside arrays, also the fastest, its syntax is very famous, and probably you already know:

In possible using FOR structure with more than one variable and increment, some developers don’t know all things that are possible with FOR, most people only know this:

for(let index = 0; index < 10; index++){
   ...some code here
}

However is possible to create as well as to increment more than one variable when you create the FOR loop, like this example:

for(
  let index = 0, myVar = ''; // you could define more than one initial variable, separing with comma
  index < 10; 
  index++,myVar=index*2 // you could increment more than one variable, separing them with comma
){
  console.log(index, myVar);
}
/* will output:
  0, ""
  1, 2
  2, 4
  3, 6
  4, 8
  5, 10
  6, 12
  7, 14
  8, 16
  9, 18
 10, 20
*/

2. FOR … IN

This method remembers the classic for, but you don’t need to increment your x, take a look in the example below:

I don’t like because other alternatives could reduce the code amount comparing with this.

3. FOR … OF

This method gets the elements in an array without needs increment, and your code is smaller when you use this:

4. forEach

This loop is the best for when you don’t need to create a new array and get the values in the current array because it reduces your code to this:

Cool right? Now with only one single line, you have everything that you need!

5. MAP

We use the map when we need to create a mutated copy from the original array.

Let’s suppose that you have a collection with name, age, and gender and you want to create a new array only with gender, map will be useful in this case or you when you want to create a new array with some new field, or when you need to normalize your database, take a look at these examples:

If you don’t know how destructuring works, take a look at this article:

#8 Functional Approach: Destructuring

Now, let’s create a new array with all the current fields and one more called isAdult, take a look:

Or you could remove sensitive data like passwords, there a lot of applications to map method!

6. REDUCE

Reduce is an excellent method that is possible to do all the things that you do with for, for..in, for..of, forEach or map! Also, you could create an entirely different array or even output a string from an array, take a look in this example:

I wrote a previous article about reduce with more example and an in-depth explanation.

#2 Functional approach: Reduce

Ok, now you know the basic loop methods; I only use in my code forEach, map and reduce, because these three methods are enough to all I need and its syntax is minimal and elegant!

If you to want to know more about Javascript I recommend these books:

• You Don’t Know JS Serie by Kyle Simpson (My favourite)
• Eloquent JS by Marijn Haverbeke
• Head First Javascript by Michael Morrison
• Secrets of the JavaScript Ninja by Bear Bibeault and John Resig

Thanks for reading! Feel free to hit the recommend button below if you found this piece helpful, also, please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.

Ricardo Luz (@_rxluz) | Twitter

If this post was helpful, please click the clap 👏 button below to show your support! ⬇⬇