# Loops

I knew that loops were a thing. Fruit loops, the movie Looper, and Loop Industries. I knew that they helped and that they made life good. However, I wasn’t clear on all the types of loops as a developer. So, per my love of deep dives on topics, loops!

There are several types of loops and they each do something different-

• for
• for .. of
• for.. in
• while
• do… while
• forEach
• Map

If we wanted to console.log(‘Loop’) 5 times without using a loop, we would need to write. As you could guess, this is very inefficient and where loops come into play.

`console.log('loop')console.log('loop')console.log('loop')console.log('loop')console.log('loop')`

# For

To initialize this type of loop, see the code below. In this type of loop, you would initialize it with i = 0 as our starting counter. Then give the conditional as to how long this loop will go. Finally, we add to our counter with i++.

`for(let i =0; i < 5; i++){console.log('Loop')}`

This then runs 5 times! Yay!

If we wanted to see this in action we can add + i to our console.log

`for(let i = 0; i < 5; i++){console.log('Loop' + i)}`

This loops over each console.log 5 times. This runs 5 times as that is the number we set it to go to.

We can also decrement in the same way!

`for(let i = 5; i > 0; i--){console.log('Loop' + i)}`

And we now see that this will count backwards.

A common use for loops is sorting through an array. We must add the names with [i] if we want to extract each individual name from the array.

`const names = ['john','bob','mary','joe']for(let i= 0; i <names.length; i++){console.log(names[i]);}`

If we don’t add [i] we select the array of names 4 times

# For…of

For of loops, this is the basic syntax of this loop. Do note that in terms of speed, for.. of is slower than a for loop.

`for (variable of iterable) {  //code to run}`

An example of this is the following. The next loop is deconstructing the array “names”. This takes a name (which can be anything, aka banana) and loops through the array we are calling.

`const names = ['john','bob','mary','joe']for (name of names){console.log(name)}`

A way to simplify this further would be to write this entire statement on one line and this will do the exact same thing.

`for(name of names) console.log(name)`

# For.. in

While we could use a for… of loop for objects, this time we will use a for in loop. For this “key” is a banana and can be considered anything while “user” is the object we are referencing. Note in our console.log we are using user[key]

`const user = {'firstName': 'John', 'lastName': 'Doe'}for(key in user)console.log(user[key])`

# While loop

First, we declare our counter outside the loop, then set up the rest of the loop, be sure to increment within this loop or it will run forever and lock up your browser.

`let i = 0while (i < 10){console.log(i)i++}`

We can see that it runs 10 times

We can also add a break within this loop if we wanted to escape early if a condition is met. So this will log until five.

`let i = 0while (i < 10){console.log(i)i++if (i === 5) break;}`

# Do… While

While very similar to a while statement, the main difference is that in the first run of do, it will always run the first time before it checks the conditional. So if i were equal to 0 it would still print 1 as it has not run the conditional logic.

`let i = 0do {i++console.log(i)}while (i < 10)`

# forEach()

This is a high order array sorting method. This does the same as the other loops discussed but it is simplified and less prone to bugs.

`const animals = ['cat', 'dog', 'horse', 'sheep', 'bird']animals.forEach(animal = >{console.log(animal)})`

Closing

If you have any questions or corrections feel free to ask. Hopefully you now better understand loops!

I work as a UX Designer. I adore games (video and board), learning, travel, and personal wellness.

## More from Aszalea R Calderon

I work as a UX Designer. I adore games (video and board), learning, travel, and personal wellness.