JavaScript: While Loops

This is the anatomy of a while loop:

1var i = 0        // A
2while (i < 5) {  // B
3  console.log(i)
4
5  i = (i + 1)    // C
6}
7
8/*
9  A:
10    1. Declares the "counting" variable to be called i
11    2. It also sets the initial value of i to 0
12
13  B:
14    1. Every line of code between the {} symbols of the loop will execute
15    2. Then, instead of moving on to lines 7+, the code execution jumps back up to line 2 and
16       checks if that condition resolves to true
17    3. If the condition resolves to true, the code execution re-enters the loop and runs all
18       of the code inside again
19    4. This repeats until the condition resolves to false, and then the code execution finally
20       escapes the loop and moves on to lines 7+
21
22  C:
23    1. The first time line 2 executes, i = 0
24    2. When the code reaches line 5 for the first time, it increases the value of i by 1
25    3. This will eventually cause the condition in section B to resolve to false
26*/

Examples

Print Index (Ascending)

1var i = 0
2while (i < 5) {
3  console.log(i)
4
5  i = (i + 1)
6}
7
8/*
9  Prints:
10  0
11  1
12  2
13  3
14  4
15*/

Print Index (Descending)

1var i = 4
2while (i >= 0) {
3  console.log(i)
4
5  i = (i - 1)
6}
7
8/*
9  Prints:
10  4
11  3
12  2
13  1
14  0
15*/

Print Index (Ascending) w/ Variable

1var timesToLoop = 5
2
3var i = 0
4while (i < timesToLoop) {
5  console.log(i)
6
7  i = (i + 1)
8}
9
10/*
11  Prints:
12  0
13  1
14  2
15  3
16  4
17*/

Print Index (Descending) w/ Variable

1var timesToLoop = 5
2
3var i = (timesToLoop - 1)
4while (i >= 0) {
5  console.log(i)
6
7  i = (i - 1)
8}
9
10/*
11  Prints:
12  4
13  3
14  2
15  1
16  0
17*/

Print Array Elements

1var colors = ["red", "green", "blue"]
2
3var i = 0
4while (i < 3) {
5  console.log(colors[i])
6
7  i = (i + 1)
8}
9
10/*
11  Prints:
12  "red"
13  "green"
14  "blue"
15*/

Print Array Elements, Dynamic Iteration Count

1var colors = ["red", "green", "blue"]
2
3var i = 0
4while (i < colors.length) {
5  console.log(colors[i])
6
7  i = (i + 1)
8}
9
10/*
11  Prints:
12  "red"
13  "green"
14  "blue"
15*/

Print Array Elements w/ Variable

1var colors = ["red", "green", "blue"]
2
3var i = 0
4while (i < colors.length) {
5  var color = colors[i]
6  console.log(color)
7
8  i = (i + 1)
9}
10
11/*
12  Prints:
13  "red"
14  "green"
15  "blue"
16*/

Object Array: Print Elements

1var people = [
2  { "firstName": "John", "lastName": "Doe" },  // Index: 0
3  { "firstName": "Jane", "lastName": "Doe" },  // Index: 1
4  { "firstName": "Chad", "lastName": "Smith" } // Index: 2
5]
6
7var i = 0
8while (i < people.length) {
9  console.log(people[i])
10  console.log(people[i]["firstName"])
11
12  i = (i + 1)
13}
14
15/*
16  Prints:
17  { "firstName": "John", "lastName": "Doe" },
18  "John"
19  { "firstName": "Jane", "lastName": "Doe" },
20  "Jane"
21  { "firstName": "Chad", "lastName": "Smith" }
22  "Chad"
23*/

Object Array: Print Elements w/ Variable

1var people = [
2  { "firstName": "John", "lastName": "Doe" },  // Index: 0
3  { "firstName": "Jane", "lastName": "Doe" },  // Index: 1
4  { "firstName": "Chad", "lastName": "Smith" } // Index: 2
5]
6
7var i = 0
8while (i < people.length) {
9  var person = people[i]
10  console.log(person)
11  console.log(person["firstName"])
12
13  i = (i + 1)
14}
15
16/*
17  Prints:
18  { "firstName": "John", "lastName": "Doe" },
19  "John"
20  { "firstName": "Jane", "lastName": "Doe" },
21  "Jane"
22  { "firstName": "Chad", "lastName": "Smith" }
23  "Chad"
24*/

One reason is that we need a better way to do this:

1var colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"]
2
3console.log(colors[0]) // Prints: "red"
4console.log(colors[1]) // Prints: "orange"
5console.log(colors[2]) // Prints: "yellow"
6console.log(colors[3]) // Prints: "green"
7console.log(colors[4]) // Prints: "blue"
8console.log(colors[5]) // Prints: "indigo"
9console.log(colors[6]) // Prints: "violet"

And loops allow us to do this instead:

1var colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"]
2
3var i = 0
4while (i < colors.length) {
5  console.log(colors[i])
6
7  i = (i + 1)
8}
9
10/*
11  Prints:
12  "red"
13  "orange"
14  "yellow"
15  "green"
16  "blue"
17  "indigo"
18  "violet"
19
20  NOTE: (This is the exact same output as the previous code block)
21*/

Loops pair very complementary with arrays, which enable us to perform a process on every element in the array