Learn Computer Science With JavaScript: Part 3, Loops

Introduction

Suppose you have been given the task to write a program that displays the numbers 1–100. One way you could accomplish this is to write 100 console.log statements. But I’m sure you wouldn’t because you would have become fed up by the 9th or 10th line.

The only part that changes in each statement is the number, so there should be a way to write only one statement. And there is with loops. Loops let us perform a set of steps in a code block repeatedly.

While loops
Do-while loops
For loops
Arrays
For-in loops
For-of loops
Review
Resources

While Loops

While loops will execute a set of statements repeatedly while some condition is true. When the condition is false, the program will exit the loop. This kind of loop tests the condition before performing an iteration. An iteration is an execution of the loop’s body. The following example will not display anything because our condition is false.

let hungry = false;

while (hungry) {
    console.log("eat");
}

This is the general form of a while loop:

while (condition) {
    statement;
    statement;
    etc.
}

One thing to be careful of when using while loops is creating loops that never end. This happens because the condition never becomes false. If it happens to you, your program will crash. Example:

let hungry = true;

while (hungry) {
    console.log("eat");
}

Task

How many times will the body of this loop be executed:

let i = 0;

while (i < 10) {
    console.log("Hello, World");
    i += 1;
}

Do-While Loops

A do-while loop will execute the body of statements first, and then check the condition. This kind of loop is useful when you know you want to run the code at least once. The following example will display “eat” once, even though the condition is false.

let hungry = false;

do {
    console.log("eat");
} while (hungry);

This is the general form for a do while-loop:

do {
    statement;
    statement;
    etc.
} while (condition);

Task

Write a do-while loop that will display the numbers 1–10.

For Loops

A for-loop will repeat execution of a code block for a specific number of times. The following example displays the numbers 1–10:

for (let i = 1; i <= 10; i++) {
    console.log(i);
}

This is the general form of a for-loop:

for (initial; condition; step) {
    statement;
    statement;
    etc.
}

Initial is an expression that sets the value of our variable. Condition is an expression that must be true for the statements to execute. And step is an expression that increments the value of our variable.

One programming pattern is to use a for loop to update the value of a variable with itself and a new value. This example sums the numbers 1–10:

let x = 0;

for (let i = 1; i <= 10; i++) {
    x += i;
}

console.log(x)    //55

The += is an assignment operator that adds a value back to a variable. This is a list of all the assignment operators:

Operator	Example	Equivalent
+=	x += 2	x = x + 2
-=	x -= 2	x = x - 2
*=	x *= 2	x = x * 2
/=	x /= 2	x = x / 2
%=	x %= 2	x = x % 2

Task

Write a for loop that calculates the factorial of a number. The factor of a number n is the product of all the integers from 1 to n. For example, 4! (4 factorial) is 1 x 2 x 3 x 4 which equals 24.

Arrays

An array is an object that holds a list of items, called elements, which are accessed by their index. The index is the position of the element in the array. The first element is at the 0 index. The following are some common array operations.

Create an empty array:

let arr = [ ];

Initialize an array with values:

let arr = [1, 2, "Hello", "World"];

Get an element from an array:

let arr = [1, 2, "Hello", "World"];
arr[0]   //1
arr[2]  //"Hello"

Update an element in an array:

let arr = [1, 2, "Hello", "World"];
arr[2] = 3;    //[1, 2, 3, "World"]

Loop over an array:

let arr = [1, 2, "Hello", "World"];

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

A two-dimensional array is an array whose elements are arrays. Example:

let arr = [
    [1, 2],
    ["Hello", "World"]
];

console.log(arr[ 0 ][ 1 ]);    //2

This is how you would loop over the array and display each element:

for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr[i].length; j++) {
        console.log(arr[ i ][ j ]);
    }
}

Task

What element is displayed when i = 1 and j = 0 in the above for loop?

For-In Loop

This kind of loop lets us loop through the keys in an object. An object is a data structure that has keys mapped to values. Here are some common operations that can be performed on an object.

Create an empty object:

let obj = { };

Initialize an object with values:

let obj = {
    foo: "Hello",
    bar: "World"
};

Get a property from an object:

let obj = {
    foo: "Hello",
    bar: "World"
};

obj.foo;     //"Hello"
obj["foo"];  //"Hello"

Update a property in an object:

let obj = {
    foo: "Hello",
    bar: "World"
};

obj.foo    = "hi"	
obj["foo"] = "hi"

Loop over the keys of an object:

for (let key in obj) {
    console.log(key);
}

Task

What does the above for loop display given obj = {foo: "Hello", bar: "World"}?

For-Of Loop

This kind of loop lets us loop over the values of iterable objects. Examples of iterable objects are arrays and strings.

Loop over an array:

let arr = ["foo", "bar", "baz"];

for (let elem of arr) {
    console.log(elem);
}

// foo bar baz

Loop over a string:

let str = "Hello";

for (let char of str) {
    console.log(char);
}

//'H' 'e' 'l' 'l' 'o'

Task

Using any of the loops, write a program that will display this staircase pattern:

Review

Loops let us reduce duplication in our code. While loops let us repeat an action until a condition is false. A do-while loop will execute at least once. For loops let us repeat an action until will we reach the end of a count. The for-in loop is designed so we can access the keys in an object. The for-of loop is designed so we can get the value of an iterable object.

Next, in part 4, we will learn about functions.