Search⌘ K
AI Features
Home
Courses
Learn HTML, CSS, and JavaScript from Scratch

Program Flow: Loops

Explore the fundamentals of JavaScript loops including while and for loops, along with nested loops. Understand how to control program flow by repeating code blocks and write functions using loops to solve practical problems such as summing ranges of numbers and identifying prime numbers.

We'll cover the following...

Loops are another fundamental building block that allow us to run a procedure repeatedly. In this lesson, we will take a look at while and for loops.

while loops

To run a segment of code while a certain condition remains true, use a while loop.

Node.js
var num = 0;
while(num <= 10) {
  if(num !== 10) {
   console.log("The number is", num, "- less than 10");
  } else {
   console.log("The number is", num, "- the loop is now over");
  }
  num++;
}

In the while statement, if the given condition is true, the code block will execute. Once the program has been executed, it will go back to the beginning of the while statement and check if the condition is still true. If it is, the code will once again execute. This will continue happening (the execution of the code block loops) up until the while statement’s condition becomes false.

A word of caution: Loops can run indefinitely if not given away to terminate the loop. It is for this reason that we increment num at the end of the code block, so the while loop’s condition does eventually become false.

for loops

for loops are another procedure for running a code block repeatedly. They are constructed using the following syntax:

for( initialization statement; loop condition; ending statement) {
/* code block to execute*/
}
  • The initialization statement is executed before the loop starts.
  • The middle condition determines whether or not the loop will run again.
  • The last statement is executed each time after the loop has been executed.

Let’s take a look at how this works in practice. The following example logs the numbers 0 through 100 to the console:

Node.js
for(var i = 0; i <= 100; i++){
  console.log(i);
}

The first statement,

var i = 0;

sets a variable named i to a value of 0 before the first execution of the loop happens. Then the loop proceeds. Once the program gets to the end of the code block, it proceeds to execute the last statement,

i++

which increments i to a value of 1. The program then checks the loop condition,

i <= 100;

Since i is less than 100, the loop proceeds again. This continues until i reaches a value of 101, where the loop condition becomes false and the loop terminates.

for loops are flexible and you can reach a false condition in many different ways, for example, printing the values of 0 to 100 in reverse:

Node.js
for(var i = 100; i >= 0; i--){
  console.log(i);
}

Exercise

Use the concepts we’ve discussed so far to write a function (called rangeSum) that returns the sum of all the numbers from 0 to number. For example,

rangeSum(5);

would sum the numbers 0, 1, 2, 3, 4, and 5 for a final value of 15. The function should be able to handle both positive and negative values.

Node.js
var rangeSum = function(number) {
  var sum = 0;
  /* write your code here */
  return sum;
}

Nested for loops #

Loops themselves can contain other loops. Consider the following program:

Node.js
for(var i = 0; i < 5; i++) {
 console.log("Outer Loop Iteration:", i);
 for(var j = 0; j < 5; j++) {
   console.log("\tInner Loop Iteration:", j);
 }
}

In this example, the inner loop will run five times for every iteration of the outer loop.

Nested for loops will become more useful as we continue our discussion of JavaScript. If this concept isn’t making sense right now, it will be revisited in the next lesson.

Exercise

Using the concepts of nested loops, write a function isPrime that determines whether a given number is a prime number or not. A prime number is a natural number greater than 1 that has no positive divisors other than 1 and itself.

Javascript (babel-node)
var isPrime = function(number) {
/* write your code here */
}