For...Of Loop

Level 3

Lesson

Exercise 1

Exercise 2

To loop through an array, use a for...of loop. Example of showing every item in an array:

let fruits = [`apple`, `orange`, `banana`]

for (let fruit of fruits) {
  console.log(fruit)
}

You can also use a for...of loop to loop through a string, which is basically an array of characters. Example of showing every character in a string:

let word = `dog`

for (let character of word) {
  console.log(character)
}

Exercise 1 of 6

Write a for...of loop to show every number in the array.

HTML

<button id="numbersButton">Show numbers</button>
<p id="numbersParagraph">Numbers:</p>

JavaScript

let numbersButton = document.getElementById(`numbersButton`)
let numbersParagraph = document.getElementById(`numbersParagraph`)

let numbers = [1, 1, 2, 3, 5]

numbersButton.addEventListener(`click`, showNumbers)

function showNumbers() {
  for (// your code will appear here) {
    numbersParagraph.innerHTML = `${numbersParagraph.innerHTML} ${number}`
  }
}

Your code

Test your code

Numbers:

Exercise 2 of 6

Write a for...of loop to show every word in the array.

HTML

<button id="wordsButton">Show words</button>
<p id="wordsParagraph">Words:</p>

JavaScript

let wordsButton = document.getElementById(`wordsButton`)
let wordsParagraph = document.getElementById(`wordsParagraph`)

let words = [`one`, `two`, `three`, `four`, `five`]

wordsButton.addEventListener(`click`, showWords)

function showWords() {
  for (// your code will appear here) {
    wordsParagraph.innerHTML = `${wordsParagraph.innerHTML} ${word}`
  }
}

Your code

Test your code

Words:

Exercise 3 of 6

Increase runningTotal to show the sum of the numbers in the array.

HTML

<button id="sumButton">Show sum</button>
<p id="sumParagraph">Sum:</p>

JavaScript

let sumButton = document.getElementById(`sumButton`)
let sumParagraph = document.getElementById(`sumParagraph`)

let numbers = [1, 2, 3, 4, 5]

sumButton.addEventListener(`click`, showSum)

function showSum() {
  let runningTotal = 0

  for (let number of numbers) {
    // your code will appear here
  }

  sumParagraph.innerHTML = `Sum: ${runningTotal}`
}

Your code

Test your code

Sum:

Exercise 4 of 6

Write a condition to show how many positive numbers are in the array.

HTML

<button id="positiveButton">Show how many positive</button>
<p id="positiveParagraph">How many positive:</p>

JavaScript

let positiveButton = document.getElementById(`positiveButton`)
let positiveParagraph = document.getElementById(`positiveParagraph`)

let numbers = [5, -2, 0, 3, -7]

positiveButton.addEventListener(`click`, showPositive)

function showPositive() {
  let numPositive = 0

  for (let number of numbers) {
    if (// your code will appear here) {
      numPositive = numPositive + 1
    }
  }

  positiveParagraph.innerHTML = `How many positive: ${numPositive}`
}

Your code

Test your code

How many positive:

Exercise 5 of 6

Write a for...of loop to show every letter in the word.

HTML

<button id="lettersButton">Show letters</button>
<p id="lettersParagraph">Letters:</p>

JavaScript

let lettersButton = document.getElementById(`lettersButton`)
let lettersParagraph = document.getElementById(`lettersParagraph`)

let word = `hello`

lettersButton.addEventListener(`click`, showLetters)

function showLetters() {
  for (// your code will appear here) {
    lettersParagraph.innerHTML = `${lettersParagraph.innerHTML} ${letter}`
  }
}

Your code

Test your code

Letters:

Exercise 6 of 6

Write a condition to show how many spaces are in the string.

HTML

<button id="spacesButton">Show how many spaces</button>
<p id="spacesParagraph">How many spaces:</p>

JavaScript

let spacesButton = document.getElementById(`spacesButton`)
let spacesParagraph = document.getElementById(`spacesParagraph`)

let string = `How are you today?`

spacesButton.addEventListener(`click`, showSpaces)

function showSpaces() {
  let numSpaces = 0

  for (let character of string) {
    if (// your code will appear here) {
      numSpaces = numSpaces + 1
    }
  }

  spacesParagraph.innerHTML = `How many spaces: ${numSpaces}`
}

Your code

Test your code

How many spaces:

Last section Next section