17: Arrays and Loops

Understanding the Document Object Model (DOM), and accessing elements in a web page that have or do not have a unique ID.

Learning Goals

In this Lesson, you will learn how to:

  • Create a for loop with a counter variable, a starting value, a loop condition and an increment (++) or decrement operator (--)
  • Create a while loop with a counter variable that runs only when a tested condition is satisfied
  • Create a do…iwhile loop that runs once, and runs again only when a tested condition is satisfied
  • Interrupt any loop type with a break command that, when the counter variable reaches a specified value, tells JavaScript to exit the loop
  • Interrupt any loop type with a continue command that, when the counter variable reaches a specified value, tells JavaScript to return to the top of the loop as if all the statements have been performed.

In this Lesson, you will meet the following terms:

  • JavaScript loop
  • Iteration
  • Loop counter variable

In your javascript/exercises folder, create a new sub-folder named 17.

Save the exercise file below to this new javascript/exercises/16 sub-folder.

Arrays and Loops

About loops and arrays

JavaScript for and similar loops are commonly used for traversing (moving through) the elements of an array, either to read the array elements values or to modify them in some way.

Suppose your code contains an array named teamsF1Teams with six elements.

arrF1Teams = [
   "Red Bull",
   "Ferrari",
   "Mercedes",
   "McLaren",
   "Alpine",
   "Alpha Romeo"
]
You could write the values of the array‘s six elements to the JavaScript console with six separate console.log() statements as shown below.

console.log(`Array element 0: arrF1Teams[0]`);
console.log(`Array element 1: arrF1Teams[1]`);
console.log(`Array element 2: arrF1Teams[2]`);
console.log(`Array element 3: arrF1Teams[3]`);
console.log(`Array element 4: arrF1Teams[4]`);
console.log(`Array element 5: arrF1Teams[5]`);

That's a lot of typing.

There is an easier way: use a for loop.

Exercise: 17:1: Reading array element values for loop

for (i = 0; i <= 5; i++) {
   console.log(`Array element [i]: arrF1Teams[i]`);
}

As you can see, there are six elements in the array. However, the initial value of the counter variable i is set to 0 and the upper value is set to 5.

This is because the array's index numbering runs from [0] to [5] and not from [1] to [6].

To use a for loop to access all the values from an array, follow this simple rule:

The number of loop iterations must be the same as the number of elements in the array.

That way a console.log() statement is performed for each individual array element.

But the number of array elements may change during the script, so how can you set the upper value for the counter variable?

The solution is to use the array length property as the upper limit of a for loop as follows.

for (i = 0; i < fruits.length; i++) {
     console.log("Looping with for: "+fruits[i]);
}

Notice that the comparison operator for the upper value of the counter variable is 'less than' (<) and not 'less than or equal to' (<=).

Why?

Because the array length is always one greater than the index number of the highest array element.

For example, When an array has six elements, its index numbers run from [0] to [5], and its length property contains the value of 6.

Looping through an array with forEach

A second option is to use the forEach loop. See the example below.

arrCars.forEach(element => console.log(element));

 

 Back to Top