Real lists change: a new ingredient in a recipe, a student joining a queue while another leaves. Instead of rewriting the array we use four operations: two work at the end of the array and two at the start.
At the end: push and pop
list.push(value) "pushes" a value (or several, separated by commas) onto the end of the array. list.pop() removes the last value:
const sandwich = ["bread", "lettuce", "tomato"];
sandwich.push("mayo", "cheese");
console.log(sandwich);
sandwich.pop();
console.log(sandwich);["bread", "lettuce", "tomato", "mayo", "cheese"] ["bread", "lettuce", "tomato", "mayo"]
const, because we change the array's contents; we do not replace it with a new array.At the start: shift and unshift
list.shift() removes the first value, and the rest move up one place. list.unshift(value) adds a value at the start:
const ranking = ["Lily", "Noah", "Mason", "Hassan"];
ranking.pop();
ranking.unshift("Hassan");
console.log(ranking);
ranking.shift();
console.log(ranking);["Hassan", "Lily", "Noah", "Mason"] ["Lily", "Noah", "Mason"]
| Add | Remove | |
|---|---|---|
| At the end | push(v) | pop() |
| At the start | unshift(v) | shift() |
pop() and shift() take nothing in their brackets, since the value they remove is in a known place. push and unshift need the value to add.Useful tricks
pop() and shift() return the value they removed, so you can keep it in a variable. And push inside a loop builds a new array that starts empty, []:
const queue = ["Ali", "Mona", "Omar"];
const first = queue.shift();
console.log("Served: " + first);
console.log(queue);
const evens = [];
for (let i = 2; i <= 10; i = i + 2) {
evens.push(i);
}
console.log(evens);Served: Ali ["Mona", "Omar"] [2, 4, 6, 8, 10]
Practice
Complete line 3 to add "mayo" and "bacon" together to the end of sandwichIngredients in one line.
const sandwichIngredients = ["bread", "lettuce", "tomato", "cheese"];
___
console.log("Sandwich Ingredients");
console.log(sandwichIngredients);Press Run to see the result. Ice cream does not belong in pasta! Complete line 3 to remove the last value from ingredientsList.
const ingredientsList = ["pasta", "tomatoes", "garlic", "cheese", "ice cream"];
___
console.log("Pasta Ingredients");
console.log(ingredientsList);Press Run to see the result. Complete line 3 to remove the first value from burgerIngredients.
const burgerIngredients = ["cucumber", "sauce", "shrimp", "mayo"];
___
console.log("Burger ingredients");
console.log(burgerIngredients);Press Run to see the result. Complete line 3 to add "mushroom" to the start of burgerIngredients.
const burgerIngredients = ["cucumber", "sauce", "shrimp", "mayo"];
___
console.log("Burger ingredients");
console.log(burgerIngredients);Press Run to see the result. On line 3, remove the extra letter at the end of letterList so only the letters of program are left.
let letterList = ["p", "r", "o", "g", "r", "a", "m", "y"]; console.log(letterList);
Press Run to see the result. The canteen queue: Sara joins the end, then the first student is served and leaves. Print Served: Ali (use the value shift() returns), then print the queue: ["Mona", "Omar", "Sara"].
const queue = ["Ali", "Mona", "Omar"];
Press Run to see the result. Build a new array called passed holding only the marks of 50 or more (use push inside for...of). Print it, then print how many there are: [78, 90, 66] then 3.
const marks = [45, 78, 90, 30, 66]; const passed = [];
Press Run to see the result. Key points
- End:
push(v)adds andpop()removes. - Start:
unshift(v)adds andshift()removes. pop()andshift()return the removed value;pushin a loop builds a new array.