Javascript · Arrays (Basics)
Adding Elements (push, unshift)
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Adding at the End: push
You caught a new Codémon! To add it at the end of the team, use the `push()` method:
const team = ["Aquachu", "Pyrochu"];
team.push("Florachu");
console.log(team);
console.log(team.length);
No index to compute, no risk of holes: `push` always appends right after the last element, and `length` is updated automatically.
Exercise 2 — Adding at the Start: unshift
Sometimes the new element must go first. `unshift()` adds at the start and shifts all the others one position to the right:
const line = ["Pyrochu", "Florachu"];
line.unshift("Aquachu");
console.log(line);
console.log(line[0]);
Aquachu is now at index 0, Pyrochu moved to 1, Florachu to 2. The strange name comes from "shift": the elements are shifted to make room.
Exercise 3 — Quiz: Who's Last?
What does this code print?
const team = ["Zap", "Metachu"];
team.push("Rockachu");
console.log(team[team.length - 1]);
Options
• ```"Rockachu"```
• ```"Metachu"```
• ```"Zap"```
• ```undefined```
Hint : Where does this method place the new element?
Exercise 4 — Fill the Bag
Add `Potion` at the end of the bag, then `Map` at the very start.
const bag = ["Rope"];
bag.____("Potion");
bag.____("Map");
console.log(bag);
Options: push unshift add insert
Hint : Two different methods, one per end of the array.
Exercise 5 — Several at Once, and a Return Value
Both methods accept several values, separated by commas. They are added in the order given:
const team = ["Aquachu"];
team.push("Pyrochu", "Florachu");
console.log(team);
Both also return something: the new length of the array. You can ignore it, or store it if it's useful.
const bag = ["Potion"];
let count = bag.push("Map");
console.log(count);
Exercise 6 — Quiz: What Comes Back
What does this code print?
const moves = ["Spark", "Thunder"];
let result = moves.push("Charge");
console.log(result);
Options
• ```3```
• ```"Charge"```
• ```["Spark", "Thunder", "Charge"]```
• ```undefined```
Hint : The method doesn't return what you added, but a piece of information about the array.
Exercise 7 — Building an Array in a Loop
Start empty, then add elements one by one in a loop: that's how most arrays get built in real programs.
const scores = [];
for (let round = 1; round <= 5; round++) {
scores.push(round * 10);
}
console.log(scores);
console.log(scores.length);
Five turns, five elements. Change `5` to `20` and the array simply grows to match.
Exercise 8 — Levels Table
Build `xpNeeded` so it contains 100, 200, 300, 400 and 500, in that order.
const xpNeeded = [];
for (let level = 1; level <= 5; level++) {
xpNeeded.____(level ____ 100);
}
console.log(xpNeeded);
Options: push unshift * +
Hint : The values must end up in increasing order, and each one is built from the loop counter.
Exercise 9 — push vs unshift
Match each element with its effect.
Items to match
• push(x)
• unshift(x)
• push("a", "b")
• The value returned by `push()` and `unshift()`
Definitions
• Adds x at the end
• Adds x at the start
• Adds two elements
• The new length
Exercise 10 — Quiz: Final Order
What does `team` contain at the end?
const team = ["Aquachu"];
team.unshift("Zap");
team.push("Metachu");
console.log(team);
Options
• ```["Zap", "Aquachu", "Metachu"]```
• ```["Aquachu", "Zap", "Metachu"]```
• ```["Metachu", "Zap", "Aquachu"]```
• ```["Zap", "Metachu", "Aquachu"]```
Hint : Apply the two operations one after the other, keeping track of both ends of the array.
Exercise 11 — Waiting Line
Trainers line up at the Codémon Center. `line` starts empty.
1. Three trainers arrive one after the other: `"Sam"`, `"Lea"`, then `"Noa"`, each taking their place at the end of the line
2. Then `"Champion"` arrives with a VIP pass and goes straight to the front
3. Print `"Waiting: N"` with the number of people in line
4. Print `"First: X"` and `"Last: Y"`
Starter code
const line = [];
// Write your code here