Loops are used to execute the same statement of code a set number of times, which can be hardcoded or based on variable.

Loops are very common within programming, as they solve the problem of having to write more code to do the same thing multiple times. There are two different types of loops: for and while loops, which both perform looping tasks but in different ways, suitable for different problems.

for

The for loop will run for a set number of times then stop.
[js]
var I = 0;

for(I = 0; I < 5; i++) {
Alert("My number"+ I);
}
[/js]
If you had to write out a sentence five times, you could do it by writing out each statement. The code can become repetitive and will get hard to manage as you add more lines. Imagine it was 20 sentences, or even 100 sentences – just think of all the code you would have to write.
[js]
document.write(‘The next number after 1 <br>’);
document.write(‘The next number after 2 <br>’);
document.write(‘The next number after 3 <br>’);
document.write(‘The next number after 4 <br>’);
document.write(‘The next number after 5 <br>’);
[/js]

You can write the same code as above in a loop, which will be much easier to scale and manage as you need to add more items to the loop.
[js]
var numCount = 0;
for (numCount = 0; numCount < 20; numCount++) {
document.write(‘The next number is’ + numCount + ‘<br>’);
}
[/js]
In the proceeding example, I have achieved the same result as writing it out by hand, but only using 3 lines instead of 5.

I’m going to break down each step, so that you will understand how to write your own for loops.

  1. First I need to setup a variable “numCount” and assign it a value of 0.
    [js]
    var numCount = 0;
    [/js]
  2. Next I add the word “for” followed by a parenthesis. I again set the variable numCount = 0, telling the script that I want to stop the loop once it reaches 19. And each time the loop runs, add 1 to the variable numCount. The loop will not work unless the numCount gets incremented each time.
    [js]
    for(numCount = 0; numCount < 20; numCount++)
    [/js]
  3. I will then add opening and closing brackets, with my action inside that I want to loop through. In this case, I want text to show up on the page that says “The next number will be 1” and add a line break after it.
    [js]
    {
    document.write(‘The next number is’ + numCount +
    }
    [/js]
  4. I can increase the number of the times the loop runs by changing the numCount to be 20, 40 or 100, or 1000. It’s a much cleaner way to setup repetitive code, than to write it out manually.
    [js]
    var numCount = 0;
    for (numCount = 0; numCount < 40; numCount++) {
    document.write(‘The next number is’ + numCount + ‘<br>’);
    }
    [/js]

While

The while loop will run until a condition is met, or as long as the condition is true. While loops are similar to for loops in how you can run something multiple times using one statement, but while loops are better for running a statement until an event occurs.
[js]
var i = 6;
while (i <= 6) {
document.write("This is the" + i + "statement<br/>");
i++;
}
[/js]
In the above example, the variable is set to a value of 6, but that does not mean the loop will run 6 times. The condition says that while the value of i is less than or equal to 6, write the specified statement to the HTML document. In this case the while loop while only run once.

In order to fix the proceeding example so that the loop will run and the statement will be printed 6 times, we will change the variable so that its set to 0 and within the while condition we will set how many times we want the condition to loop. It’s the reverse of how a for loop is setup and can sometimes be confusing.
[js]
var i = 0;
while (i <= 6) {
document.write("This is the" + i + "statement<br/>");
i++;
}
[/js]

Categories: BasicsJavaScript/Ajax

1 thought on “JavaScript Basics Part 7: Loops”

magento developer · February 27, 2013 at 4:51 am

Groups are useful, if you want to run the same value over and over again, whenever with a different value. Often this is the scenario when working with arrays:
Instead of writing:
document.write(cars[0] + "");
document.write(cars[1] + "");
document.write(cars[2] + "");

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Basics

JavaScript Basics Part 6: Conditionals

Logic is a part of our everyday lives – it’s a very familiar concept, therefore one of the easiest to understand. We are faced with questions all the time, with the “If” question being the Read more…

Basics

JavaScript Basics Part 5: Arrays

An array is a variable which can store many values inside it. A variable can only store one value. Those values can be accessed at any time using the array’s index. The values stored within Read more…

Basics

JavaScript Basics Part 4: Variables

Variables offer a way to store values of strings, numbers, and boolean data types, as well as being able to reuse at any point within your script. Declaring or creating variables is a common practice Read more…