loading...

Intro to Loops Part 1

scdan0624 profile image SCDan0624 ・2 min read

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]
}

Enter fullscreen mode Exit fullscreen mode

*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'
*/
Enter fullscreen mode Exit fullscreen mode

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!'

*/
Enter fullscreen mode Exit fullscreen mode

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 

*/
Enter fullscreen mode Exit fullscreen mode

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]
}
Enter fullscreen mode Exit fullscreen mode

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
*/
Enter fullscreen mode Exit fullscreen mode

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.

Discussion

pic
Editor guide