Javascript · Arrays (Basics)
Looping Through Arrays (for, for...of)
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Visiting Every Element
Printing `team[0]`, `team[1]`, `team[2]` by hand doesn't scale. A `for` loop with `length` visits every index automatically:
const team = ["Aquachu", "Pyrochu", "Florachu"];
for (let i = 0; i < team.length; i++) {
console.log(team[i]);
}
The counter `i` goes 0, 1, 2 and `team[i]` reads the element at each position. Add a fourth Codémon to the array and run again: the loop adapts on its own.
Exercise 2 — The Off-by-One Trap
The condition is `i < team.length`, with a strict `<`. Using `<=` would run one extra turn with an index that doesn't exist:
const team = ["Aquachu", "Pyrochu", "Florachu"];
for (let i = 0; i <= team.length; i++) {
console.log("Index " + i + ": " + team[i]);
}
That `undefined` at the end is the classic off-by-one bug. Start at 0, stop strictly before `length`.
Exercise 3 — Quiz: Extra Turn
What is printed on the last line?
const levels = [3, 7];
for (let i = 0; i <= levels.length; i++) {
console.log(levels[i]);
}
Options
• ```undefined```
• ```7```
• ```2```
• ```3```
Hint : Count how many turns the loop makes, and compare with the number of elements.
Exercise 4 — Loop Header
Complete the loop so it prints every move exactly once.
const moves = ["Spark", "Thunder", "Charge"];
for (let i = ____; i ____ moves.length; i____) {
console.log(moves[i]);
}
Options: 0 1 < <= ++ --
Hint : Think about the first valid index and the first invalid one.
Exercise 5 — A Simpler Way: for...of
Most of the time you don't care about the index, only about the elements. JavaScript has a dedicated loop for that: `for...of`.
const team = ["Aquachu", "Pyrochu", "Florachu"];
for (let cdm of team) {
console.log(cdm + " joins the battle!");
}
At each turn, `cdm` holds the element itself, not its index. No counter, no `length`, no brackets: fewer chances to make an off-by-one mistake.
for (let element of array) {
// 'element' is each value of the array, one after the other
}
Exercise 6 — Which Loop to Choose?
`for...of` is cleaner when you only need the values. The classic `for` is needed when you need the index: to show a position, or to modify the array. Here every Codémon levels up:
const levels = [5, 8, 3];
for (let i = 0; i < levels.length; i++) {
levels[i] += 1;
}
console.log(levels);
With `for...of`, changing the loop variable does not change the array: it only holds a copy of the value.
const levels = [5, 8, 3];
for (let level of levels) {
level += 1;
}
console.log(levels);
Exercise 7 — Quiz: What's in the Variable?
What does this code print?
const team = ["Zap", "Metachu"];
for (let x of team) {
console.log(x);
}
Options
• ```Zap``` then ```Metachu```
• ```0``` then ```1```
• ```2```
• ```undefined``` twice
Hint : Reread what the loop variable receives at each turn.
Exercise 8 — Roll Call
Complete the loop so it greets each Codémon by name.
const team = ["Aquachu", "Pyrochu", "Florachu"];
for (let ____ ____ team) {
console.log("Hello " + name + "!");
}
Options: name of in i index
Hint : The variable used inside the block must be the one declared in the header, and the keyword is specific to this loop.
Exercise 9 — Adding Things Up
A very common pattern: start a total at 0 and add each element to it while looping. Here's the team's total level:
const levels = [5, 8, 3];
let total = 0;
for (let level of levels) {
total += level;
}
console.log("Total level: " + total);
Same idea to find the highest value: keep the best seen so far and replace it whenever a bigger one shows up.
const levels = [5, 8, 3];
let best = levels[0];
for (let level of levels) {
if (level > best) {
best = level;
}
}
console.log("Highest level: " + best);
Exercise 10 — Quiz: The Total
What does this code print?
const hp = [10, 20, 30];
let total = 0;
for (let value of hp) {
total += value;
}
console.log(total);
Options
• ```60```
• ```30```
• ```3```
• ```"102030"```
Hint : Follow the total turn by turn.
Exercise 11 — Two Loops
Match each element with its role.
Items to match
• for (let i = 0; i < arr.length; i++)
• for (let x of arr)
• i
• x
Definitions
• Loop with an index
• Loop over the values
• The current position
• The current element
Exercise 12 — Full Team Report
`team` and `levels` go together, index by index.
1. For each Codémon, print `"X is level Y"` using the level at the same index
2. Then print `"Total: Z"` with the sum of all levels
3. Then print `"Strongest: X"` with the name of the highest-level Codémon
Your code must keep working if Codémon are added to both arrays.
Starter code
const team = ["Aquachu", "Pyrochu", "Florachu", "Zap"];
const levels = [12, 8, 15, 10];
// Write your code here