Lesson 9 · 9 of 20

Adding, removing and searching · JavaScript

The basic JavaScript array methods: push, pop, shift, unshift, includes, indexOf, slice and splice, with a shopping list and a queue.

JavaScript · Adding, removing and searching in DMarlon Studio: the example's code and its output in the terminal

Arrays come with methods to change the list without handling indexes yourself. `push()` adds to the end and `pop()` removes the last element and returns it: that is why last holds "cheese".

At the start, `unshift()` adds and `shift()` removes the first element and returns it. These are the methods of a queue: you join at one end and leave at the other.

To search, `includes()` answers true or false, and `indexOf()` gives the element's position, or -1 if it is not there, as happens with "tea".

`slice(start, end)` copies a part, from start up to but not including end, without changing the original; leave out the second number and it copies to the end. `splice(position, count)`, on the other hand, modifies the array: queue.splice(1, 2) removes two people from position 1, and queue.splice(1, 0, "Fran") inserts Fran without removing anyone.

Remember the difference: push, pop, shift, unshift and splice change the array; slice, includes and indexOf only read it.

Code · main.js

// A shopping list that changes as we go.const list = ["bread", "milk", "eggs"];list.push("cheese");        // add at the endconsole.log("push:   ", list);const last = list.pop();    // remove from the endconsole.log("pop:    ", list, "removed", last);list.unshift("coffee");     // add at the startconsole.log("unshift:", list);const first = list.shift(); // remove from the startconsole.log("shift:  ", list, "removed", first);// includes and indexOf: is it there, and where?console.log("Has milk?", list.includes("milk"));console.log("Position of eggs:", list.indexOf("eggs"));console.log("Position of tea:", list.indexOf("tea")); // -1: not found// slice copies a part and leaves the original as it was.const queue = ["Ana", "Ben", "Carla", "David", "Eva"];console.log("First three:", queue.slice(0, 3));console.log("From the third on:", queue.slice(2));// splice changes the original: it removes and/or inserts.const removed = queue.splice(1, 2); // remove 2 from index 1console.log("splice removed", removed, "->", queue);queue.splice(1, 0, "Fran");         // insert at index 1, remove noneconsole.log("After inserting:", queue);

Output · node main.js

push:    [ 'bread', 'milk', 'eggs', 'cheese' ]
pop:     [ 'bread', 'milk', 'eggs' ] removed cheese
unshift: [ 'coffee', 'bread', 'milk', 'eggs' ]
shift:   [ 'bread', 'milk', 'eggs' ] removed coffee
Has milk? true
Position of eggs: 2
Position of tea: -1
First three: [ 'Ana', 'Ben', 'Carla' ]
From the third on: [ 'Carla', 'David', 'Eva' ]
splice removed [ 'Ben', 'Carla' ] -> [ 'Ana', 'David', 'Eva' ]
After inserting: [ 'Ana', 'Fran', 'David', 'Eva' ]

Key points

push/pop work at the end; unshift/shift at the start.
indexOf returns -1 when the element is not found.
slice copies without changing the original.
splice removes and inserts in the array itself.

Exercise

Simulate a bakery queue: three customers join with push, two are served with shift and someone jumps in at position 0 with splice; print the queue at each step.