Intro to Loops Part 1

Introduction

As you dive more into Javascript you may notice there are instances where the same code needs to be run over and over again. This is where loops are very useful. With a loop we can just write a simple block of code and have it run repeatedly until a certain condition is met. There are multiple types of loops so lets look at a few examples.

for loop

This is the most common loop you will see in Javascript. The syntax for a for loop is as follows:

for ([initialExpression]; [condition]; [iteration]) {
  [loop body]
}

*initialExpression
Is used to start a counter variable.

*condition
An expression is tested each pass through the loop. If the expression tests as true the loop body is run if false the loop exits

*iteration
A statement that is executed at the end of each iteration. Usually this will involve increasing or decreasing the counter.

*loop body
The loop body is the set of statements that we want to run when the condition evaluates as true.

Example

for (let i=1; i < 5; i++){
console.log("hello");
console.log(`I have said hello ${i} times in this loop`);
}

/* Output
'hello'
'I have said hello 1 times in this loop'
'hello'
'I have said hello 2 times in this loop'
'hello'
'I have said hello 3 times in this loop'
'hello'
'I have said hello 4 times in this loop'
*/

Another example
You can also use a for loop to iterate over data structures such as arrays.

const myFoodArr = ["tacos","pizzas","hamburgers","fries"]

for(let i=0;i<myFoodArr.length; i++){
  console.log(`I love ${myFoodArr[i]} for dinner!`)
}

/* Output
'I love tacos for dinner!'
'I love pizzas for dinner!'
'I love hamburgers for dinner!'
'I love fries for dinner!'

*/

Infinite Loop

An infinite loop is a condition in which your code will continue to run forever because you wrote a condition in your for loop that can never be satisfied. Lets look at an example:

for (let i = 1; i !== 40; i += 2){
  console.log(i);
}

/* Output
1
3
5
7
9
11
13 
15
17
19
21
... Continues on to infinity 

*/

while loop

Similar to a for loop, the while loop will keep repeating an action while the condition is being met. The syntax for a while loop is:

while ([condition]) {
  [loop body]
}

Example

let num = 10;
while(num < 20){
  console.log(num++) // don't forget the iteration or you will get an infinite loop
}

/* Output
10
11
12
13
14
15
16
17
18
19
*/

Conclusion

If you have made it to this part of the blog that means you know how to code the two most commonly used loops: for and while loops. In Part 2 I will go over some newer loop types the for of and for in loop.