## For...Of Loop

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]

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

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`]

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

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]

function showSum() {
let runningTotal = 0

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

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

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]

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}`
}
```

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`

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

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?`

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}`
}
```