As well making decisions (conditional logic) repeating themselves is something that programme languages like to do. Loops allow the developer to perform some task or other a set number of times, or until some condition is met.

While Loops

A while loop will loop until a condition is met. That condition is set in the parenthesis (brackets) that follow the while keyword.

while(condition to meet){
// code to run
}

An example would be:

var counter = 1;
while(counter < 10){
	console.info(counter);
	counter++;
}

JSFIDDLE Demo

The key to a successful loop is that it must end otherwise we end up with an infinite loop. Infinite loops are a BAD THING and can cause your browser to crash and burn.

To avoid an infinite loop, in the while loop example above a variable counter is created and assigned a value of 1. The while loop’s condition is whether counter is less than 10. If it is then the code in the curly braces is run. This code outputs the value of the counter to the console (we’ll do more exciting stuff later) and crucially it increments the value of counter.

Guest plus one

This is done with the counter++ shorthand that in longhand would be writen as counter = counter + 1. This is great as programmers are always wanted to increase values by one. Also if you want to decrease a value by one then the decremental shorthand is counter−−, which in longhand would be counter = counter – 1.

Tip: You can also use shorthands like counter+=10 which would increment the counter variable by 10, and counter -= 10 that would decrement counter by 10.

Do … While

Another looping construct is the do while.

do{
// code to run
}(condition to meet)

Our previous example would look like this with a do while:

var counter = 1;
do{
console.info(counter);
counter++;
}while(counter < 10)

JSFIDDLE Demo

The output of this is exactly the same as the while loop in that the console outputs values 1 to 9. Notice again how we use a variable called counter to ensure that the loop can end. The key different here is that the condition in parenthesis appears after the code in the curly braces. This means that the condition is checked after the code in the curlies is run not before as is the case with the while. As a result of this a do while will always run its code in curlies once. If the condition is met straight away, that is still too late to stop that code in the curlies running. Proof – change the code above to:

var counter = 20;
do{
	console.info(counter);
	counter++;
}while(counter < 10)

Notice we have changed the initial value of counter to 20. The console will output 20 because although 20 is clearly greater than 10 (our condition) this is not checked until the code in the curlies has run. If you tried changing the value of counter to 20 in the while example then you will no console output.

for loops

If you become a programming nerd you may develop favourties. My favourite loop type is the good old for loop. What I like about this little number is the fact that you cannot fail to put in the all important counter variable to ensure the loop will not go on indefinitely. The construct is as follows:

for(initial value; condition to meet; next time do this){
// code to run
}

So to recreate the count from 1 to 9 of the previous examples we would do:

for(var counter=1; counter< 10; counter++){
	console.info(counter);
}

Here we do three things in the parenthesis of the for.

  1. declare our counter variable
  2. set the condition
  3. indicate what happens to the counter variable next type the loop runs.

This syntax forces us developers to immediately confront the thorny question of how the loop will end.

Eye, eye …. i, i++

One final thought, notice how the counter variable is declared inside the parenthesis of the for loop. As you do more Javascripting you’ll be doing lots of looping so creating a variable like counter is, quite frankly, a bit too much like hard work. Lazy developers like nice short variable names so why not use just i, that is i for increment, i for index, i for igloo, i for incredible, whatever you choose. The result is nice succinct code:

for(var i=1; i< 10; i++){
	console.info(i);
}

JSFIDDLE Demo

… and if you get bored of i why not give j a spin.

Leave a Comment