Javascript · Arrays (Basics)
Modifying Elements
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Replacing an Element
To read an element, you write the array name and an index between brackets: `team[1]` gives you the value stored at index 1.
To edit an element, you use exactly the same expression: `team[1] = "Zap"` stores a new value at index 1.
let cdm = team[1]; // read
team[1] = "Zap"; // write
Here Pyrochu, at index 1, is swapped out for Zap:
const team = ["Aquachu", "Pyrochu", "Florachu"];
console.log(team);
team[1] = "Zap";
console.log(team);
Pyrochu is out, Zap is in. The array still has 3 elements: the value at index 1 was simply replaced.
const, again
`team` is a `const`, and this works. `const` blocks `team = ...`, not `team[1] = ...`: the variable still points to the same array, only its content changed.
Exercise 2 — Updating a Value
A number element can be updated like any variable: read it, calculate, write it back. Here Aquachu levels up:
const levels = [5, 8, 3];
levels[0] = levels[0] + 1;
console.log(levels);
The shortcuts you know on variables work too: `+=`, `-=`, `++`...
const hp = [45, 30, 60];
hp[1] += 20; // potion on the second Codémon
hp[2] -= 15; // hit on the third one
console.log(hp);
Exercise 3 — Quiz: After the Update
What does this code print?
const levels = [5, 8, 3];
levels[2] = levels[2] * 2;
console.log(levels[2]);
Options
• ```6```
• ```3```
• ```16```
• ```10```
Hint : Find the element at that index first, then apply the operation to it.
Exercise 4 — New Last Member
Replace the last Codémon of the team with `Metachu`, whatever the team size.
const team = ["Aquachu", "Pyrochu", "Florachu"];
team[team.length ____ 1] ____ "Metachu";
console.log(team);
Options: - = === + length
Hint : Combine what you know about the last index with a plain assignment.
Exercise 5 — Writing Past the End
What if you assign to an index that doesn't exist yet? JavaScript accepts it and grows the array... but be careful:
const team = ["Aquachu", "Pyrochu"];
team[4] = "Zap";
console.log(team.length);
console.log(team[2]);
console.log(team[3]);
The array now has 5 elements, but indexes 2 and 3 are empty holes: `undefined`. This is a common source of bugs. To add elements safely, use the methods from the next chapter.
Avoid holes
Only assign to an index that already exists. Adding at the end has dedicated methods.
Exercise 6 — Quiz: Grown Array
What does this code print?
const bag = ["Potion", "Map", "Rope"];
bag[5] = "Torch";
console.log(bag.length);
Options
• ```6```
• ```4```
• ```3```
• ```5```
Hint : The length always reaches one past the highest index in use.
Exercise 7 — Heal the Second
The second Codémon drinks a potion: add 20 to its HP.
const hp = [45, 30, 60];
hp[____] ____ 20;
console.log(hp);
Options: 1 2 += = -=
Hint : Translate "second" into an index carefully, and pick the operator that adds to the existing value rather than replacing it.
Exercise 8 — Reading vs Writing
Match each line with what it does. `arr` is a `const` array.
Items to match
• let x = arr[0]
• arr[0] = x
• arr = [x]
• arr[arr.length - 1] = x
Definitions
• Reads the first element
• Replaces the first element
• Error: reassigning a const
• Replaces the last element
Exercise 9 — Swapping Two Elements
To swap two elements, you can't just write `team[0] = team[2]`: the first value would be lost. You need a temporary variable to hold it:
const team = ["Aquachu", "Pyrochu", "Florachu"];
let temp = team[0];
team[0] = team[2];
team[2] = temp;
console.log(team);
Three steps: save the first, overwrite it with the last, put the saved value in the last spot. Try removing `temp` and see what goes wrong.
Exercise 10 — Roster Changes
After a day of training:
1. Florachu, the last one, gains 4 levels
2. Pyrochu is replaced by Metachu, who arrives at level 6: update both arrays
3. The leader and the last member swap places in `team`, and their levels swap in `levels` too
4. Print `team`, then `levels`
Starter code
const team = ["Aquachu", "Pyrochu", "Florachu"];
const levels = [5, 8, 3];
// Write your code here