loops.md

Loops

A loop is a programming construct to perform a repetitive action. Often (but not always) the repetitive action involves accessing or manipulating the individual elements of an array.

In programming, a loop is meant to be used in case there's a repetitive task that needs to be done.

We will use the array of month names given below to illustrate the various types of loop constructs available in JavaScript. In the examples we will print out the names of the individual months using a console.log statement.

const months = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December',
];

while

The while loop is probably the simplest one of the bunch. If you prefer to have Uday talk you through it have a look at the following video:

{% hyf-youtube src="https://www.youtube.com/watch?v=poVFNtbdreg" %}

The general syntax of a while loop is:

while (cond) {
  // statement block to be repeated
}

The loop 'body' (i.e., the statement block including the curly braces) is executed while the condition cond holds true. In order for this while loop to execute at least once and to finish in finite time two preconditions must be fulfilled:

1. The condition cond should initially hold true.
2. Some code inside the code block must eventually cause the condition to become false.

Applied to our months array the while loop would look like this:

const months = [
  ...
];

let index = 0;
const len = months.length; // 12

while (index < len) {
  console.log(months[index]);
  index += 1;
}

In this example the two preconditions mentioned earlier are met:

1. The condition index < len initially holds true because index is initialized to 0 and we know that len is fixed at the value of 12 (hence the use of const rather than let).
2. Because the value of index is incremented by one each time the loop body is executed there will be a point in time when the loop condition becomes false. This will happen when the value index has become 12 and index < len no longer holds true.

If precondition 2 is not met then your loop will execute forever. This is what is commonly referred to as an infinite loop. Your code will appear to 'hang' when this happens, and you will need to somehow terminate the program and fix the problem (e.g., press Ctrl-C when running in Node).

More info on MDN: while

do...while

This is a variation of the while loop discussed above.

{% hyf-youtube src="https://www.youtube.com/watch?v=RmJc1ZROpeU" %}

Its general syntax is:

do {
  // statement block to be repeated
} while (cond);

The do...while loop is executed at least once, because the loop condition is evaluated at the end of the loop rather than at the beginning as is the case with the regular while loop.

Applied to our 'months' example the code would look like this:

const months = [
  ...
];

let index = 0;
const len = months.length;

do  {
  console.log(months[index]);
  index += 1;
} while (index < len)

We recommend that you do not use the do...while loop, exactly for the reason that the loop body is executed at least once without taking the loop condition into account. It is always possible to rewrite a do...while loop into a regular while loop that strictly meets the two preconditions mentioned earlier.

More info on MDN: do...while

for

The for loop is the most used loop construct that you will come across and that you are likely to use most in your own code. It exists in a number of variations in JavaScript that we will cover one by one below. If you prefer to watch a video you can have a look at the following:

{% hyf-youtube src="https://www.youtube.com/watch?v=XL9AHFxHEjc" %}

The syntax of the most generic form is as follows:

for ([initialization]; [condition]; [final - expression]) {
  // statement block to be repeated
}

Let's first look at an example:

const months = [
  ...
];

const len = months.length;

for (let index = 0; index < len; index++) {
  console.log(months[index]);
}

The for statement combines three parts of the loop construct in a single statement. Those three parts are separated by semicolons and, enclosed within parentheses, directly follow the for keyword.

1. The first part is the for loop initialization of a loop 'index' variable, here called index. (Often you will see one letter variable names, such as i for the loop index.). This part is executed only once.
2. The second part is the loop condition, and is evaluated for every loop iteration. The loop body is executed while this condition holds true. Note that this condition is tested at the beginning of the loop (like while above) and not at the end (like do...while).
3. The last part is where the loop index variable is updated, in this case incremented by one (index++ is short for index += 1, which in itself is short for index = index + 1). This update is effectively done at the end of the loop (in the example, after the console.log has been executed).

This form of the for loop is roughly equivalent¹ to the following:

// for (let index = 0; index < len; index++) {
//          ↑A            ↑B          ↑C

let index = 0; // ← A
while (index < len) {
  // ← B
  console.log(months[index]);
  index++; // ← C
}

¹ In this while loop version, the index variable is accessible both inside and outside of the loop body (i.e., the code block inside the curly braces). In the case of an equivalent for loop, the scope of the index variable depends on whether it is declared with let or var. See this article from Web Bos for details.

More info on MDN: for

for...of

The for...of loop construct is relatively new and very well suited for use with arrays. It was introduced with the ES6 variant of JavaScript. Its general syntax is:

for (variable of iterable) {
  // statement block to be repeated
}

Here, iterable can be a couple of things, but most of the time it is just an array variable. Let's again look at an example.

const months = [
  ...
];

for (const month of months) {
  console.log(month);
}

With this for loop variant, the array is considered a collection of elements (you can iterate through a collection: it is 'iterable'). Each time the loop body is executed the loop variable receives the next value of the array (in the example, starting with 'January' and ending with 'December').

This now allows us to write very elegant and short code. No need to mess around with a loop index variable, array lengths etc. If you need to use a for loop involving arrays, this will often be your first choice.

More on MDN: for...of

for..in

This loop variant is for use with JavaScript objects only. It existed before the for...of loop variant became available.

We will discuss the for...in variant in more detail the part of the curriculum where we deal with Objects. Here, we will suffice to say that the for...in loop construct can easily be rewritten as a for...of loop, as follows:

const obj = {
  a: 10,
  b: 'test',
};

// for...in
for (const key in obj) {
  console.log(obj[key]);
}

// equivalent for...of
for (const key of Object.keys(obj)) {
  console.log(obj[key]);
}

More info on MDN: for...in

Array.forEach()

The .forEach() array method can be used to iterate over all the elements of an array in functional away. This is explained in detail in the fundamental on array methods: Array.forEach(). Many programmers prefer this functional way over traditional loops when working with arrays.

Extra Reading

If you just can't get enough, here are some extra links that mentors/students have found useful concerning this topic:

• JavaScript Loops