Code: Loops & loops

Let’s first define what looping statements are in JS — according to VisionsDeveloper loops are “….used to execute the same block of code a specified number of times or while a specified condition is true”(1). There are two main reasons we use loops — the first, so we keep our code DRY (don’t repeat yourself) — using loops helps prevent writing similar lines of code over and over again and keeps our code shorter and more concise — the second, is for efficiency — in the same respect, because our code is shorter our programs can run quicker and thus more efficiently. There are four kinds of loops I will be showcasing today:

1. For Loop:

• Above I have an example of a for loop. Let’s try to break it down a bit to better understand it.
• Within my script tag I have a variable array of fruits with 5 different elements in the array, and I want to loop through every element in the array to display it on my web page.
• In the first line of code of the for loop: for (i=0; i < cars.length; i++) — here we are defining our parameters. We are saying that we want to start our loop at the first element and to go through every single element in the array, and to stop at the last one.
• In the second line of our code of the for loop when we open and close the block: { text += fruits [i] + “<br>”; } — we are defining our condition. We are saying, please display our text/strings of every element incremented by 1. Try to run this code and play around with the conditions! The code above should display as so…pretty cool, huh:

2. While Loop:

• The while loop is pretty cool because in a sense it’s telling us directly what it does.
• In the first two lines of code of the while loop: var i = 2; //while (i<5) — here we are again defining our parameters. We are saying that we want to start our loop in which variable i is equal to 2 and while variable i is less than 5 (in which case we should expect it to display i at 2, 3 and 4)
• In the third and fourth lines of our code of the while loop when we open and close the block: { text += “<br>There are “ + i + “ little monkies jumping on the bed”; i++; } — we are again defining our condition. We are saying, please display our text/strings of every number incremented by 1 (between 2 and 5). If you run this code you should see the following:

3. While/Do Loop

• The do/while loop is quite similar to the while loop, however, as you can see above the syntax is slightly different .
• In the first line of code our do/while loop: var i = 2 — we are defining our first parameter by saying that we want our loop to start where variable i is equal to 2.
• Then, within our do code we open and close the block: { text += “<br>The number is “ + i ; i++; } — here we are defining our condition and defining how it is meant to be executed.
• In the last line of our code we close the while loop and set our last parameter. This is where the while comes in while(i<5). If you run this code it should display as follows:

4. For/In loop

• With the for/in loop it is important to remember that it is mean to loop through the properties of an object. We will see this in the example below and break it down.

• In the first line of code of our for/in loop we are defining the properties of our object. In this case we have it written as : var person = {first name: “Andrea”, lastname: “Cardona”}
• In the last line few lines of code within the for/in loop we open and close our block to set our parameters and our condition: for ( x in person ) { text += person[x] + “”; } — here we execute all of our code by looping through just the properties of the object. In this case x represents the properties. Our code should look like the image below.

I know this was a quick read on the ways in which you can loop through arrays and objects in JavaScript. But, it is important to remember the different situations in which you might use the individual methods of looping:

• for — loops through your defined block of code a specified number of times as set by the given parameters.
• while— loops through your defined block of code only under which the condition is true
• do/while — will only loop through a block of code once, and then repeat the loop only under which the condition is true
• for/in — will only loop through the properties of an object.

Have fun with the loops and the examples above. Hope you all enjoyed!

References:

• Website TitleJava Tutorial — Introduction, History of Java, Feature of Java, Core Java, Java Introduction, Java, Tutorials, Learning, Beginners, Basics