Skip to main content

Loops

Write a While loop#

Programming principle: DRY#

Don't Repeat Yourself

What if we needed to write a program that counts from 1 up to 1000? We could set about doing this:

console.log('The number is: ' + 1);console.log('The number is: ' + 2);console.log('The number is: ' + 3);console.log('The number is: ' + 4);console.log('The number is: ' + 5);// etc.

Are we really going to write 1000 lines of code? Programmers delight when they can work smarter rather than harder. They care about the efficiency of getting their functionality done. They do not want to write 1000 lines of the same thing with minor tweaks. Instead, programmers try to find shortcuts, and luckily, we can use loops to perform repetitive tasks.

graph TD start(let num = 1) choose{num <= 1000?} body("console.log('Num is ' + num)") inc(num++) done("console.log('Done')") start --> choose choose -->|false| done choose -->|true| body body --> inc inc --> choose

Here is an example of a while loop. We can use 6-ish lines of code to print 1000 lines of text. This is an application of DRY.

/** @type {number} */let num = 1;
while (num <= 1000) { console.log('The number is: ' + num); num++;}console.log("Done")

Making your code DRY er, takes practice. Often you'll start by copy-paste and tweak it. Then when you're starting to see the patterns, you can then upgrade your code to something more DRY and that's a fine way to do things!

https://twitter.com/addyosmani/status/314785735171518464

Loop Concept#

What is a loop? A loop is a process that repeats. Along the way, the loop might accumulate or change some values. For example, an analog clock works in a loop, and each loop of the minute hand increases the count of the hour-hand by 1. The hour-hand counts from 1 to 12, and after 12 loops, it starts counting again from 1.

Clock loop

Loop Syntax - while loop#

While loop examples:

/** @type {number} */let num = 1;
while (num <= 1000) { console.log('The number is: ' + num); num++;}
/** @type {boolean}} */let runProgram = true;
while (runProgram) { console.log('program is running'); runProgram = false;}

pseudo-code

initial condition
while (BOOLEAN EXPRESSION) { // run code in block change condition}

Let's look at the different parts of the first example:

Initial condition#

let num = 1;

Before our while loop we used: let num = 1;

All we did was declare a variable and give it a value, in this case a number.

tip

This is to set a starting condition for our loop. All we want is for our loop to count, but it needs a place to start counting from.

We could change this to whatever we want:

let num = 90;
while (num <= 1000) { console.log('The current number is: ' + zum); num++;}

Boolean Expression#

Here's the next part of the first example:

while(num <= 1000)

In our while loop we used num <= 1000. This is a BOOLEAN EXPRESSION. Under the hood, it evaluates either to true or false.

info

The loop will run while the expression is true. As soon as the expression is false, the loop will end.

while (BOOLEAN_EXPRESSION) { // code to repeat}
warning

If the expression never became false, the loop would never end. This would be an infinite loop. You want to avoid infinite loops because they will crash your program.

Let's test out a boolean expression:

console.log(1 > 2);

This is asking is 1 greater than 2?.

=> false

Code Block#

The curly braces denote a block of code.

Each loop is taking the code between the curly braces { ... } and running that code multiple times so that we don't have to write it out.

Changing the value#

Let's look at our loop again:

let num = 1;
while (num <= 1000) { console.log(num); num++;}

Now we are able to:

  • Declare a variable (we can change the value of num)
  • Tell our loop to run while a condition is true (we can change the value of the condition)
  • Console log the value of num each time the loop runs.

All that's left is to automate a change to the value of num each time the loop runs.

We want to change the value of num so that the loop will eventually end#

The loop will end when num <= 1000 is false. Let's increase the value of num by 1 each time the loop runs.

Postfix operator#

The postfix operator will increment the value of a variable by 1, and save the variable with the new value.

If we save a number to a variable:

let num = 100;

How can we save the value of that variable plus 1? We can do it this way:

num = num + 1;

So, the variable equals itself plus one.

tip

The postfix operator offers a shorthand:

num++;

There is also a way to decrement a value:

num--;

is the same as

num = num - 1;

Compound assignment operator +=#

tip

We can also do exactly the same thing with the compound assignment operator.

num += 1;

and decrement:

num -= 1;

the advantage of the compound assignment operator is that we can increment by any value

num += 3; //increments by 3num -= 3; //decrement by 3

Activity#

  • Write a while loop that counts from 1 to 100.

Extra Activity#

  • Write another while loop, but write it from from memory. Make the loop count from 0 to 5000 and print the square of each number.
  • FIGURE IT OUT: How can you get a while loop to count backwards? Use the postfix operator i-- to make a loop count backwards from 1000 to 1.

Write a For loop#

A for loop does the same thing as a while loop, but all the 'baggage' is conveniently compacted into the syntax, leaving less room for infinite loops. We don't have to declare any variables outside of the loop like we had to do with while loops.

tip

For loops are what we will use almost all of the time.

Loop Syntax - for loop#

Examples:

for loop that counts from 1 to 1000:

for (let i = 1; i <= 1000; i++) {  console.log('The number is: ' + i);}

There are three parts to the 'control panel' of the loop, delimited by the semicolon:

for (initial condition; while condition; repeating expression) {
}
  1. some initial code supplied to the loop -- usually a numerical starting value of the loop
  2. the condition under which the loop runs -- it will run while the expression is true
  3. a repeating expression that runs at the end of each loop -- usually an instruction to increase the numerical starting value

Code along#

Write a for loop that will count from 0 to 99

for (let i = 0; i <= 99; i++) {  console.log(i);}

Activity (5 min)#

  • Write a for loop that counts from 999 to 9999.

Bonus:

  • Write a for loop that prints 'This is the song that never ends' to the console 100 times.
  • Write a for loop that counts backwards from 1000 to 1, using the postfix operator i--.