Loops

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.

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.

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:

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.

declare our counter variable

set the condition

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:

Recent Posts

Posted in capacity as Module Leader Group Software Development, Department of Computing Sheffield Hallam University A Morgue One hundred students, 10 clients, 5 labs of University PCs, overzealous Facilities department and the Sheffield weather. What could possibly go wrong? Last week was ‘Scrum Week’. Nineteen groups of students working flat out 9-5, Monday to Friday…

Before reading the following ensure you are happy with the flexbox concepts of main axis and cross axis discussed in my previous post. Justification on the main axis The CSS property justify-content is used to control spacing between and around items along the main axis (assuming extra space is available). It is applied to the…

The concept of ‘flexible box’ or flexbox is name of the CSS3 flex layout model. Flexbox is based around flex containers and flex items. A flex container is a parent element to flex items. Flex items are the immediate children of the flex container and can be laid out in any direction. Take the following simple…