Resources:

Shiffman - 7.5: Removing Objects from Arrays - p5.js
W3 Schools - JavaScript Array Methods

Push and Pop

We previously learned about push() and pop(). The following examples operate on an array of words, but the same methods can be used on arrays of objects.

The push() method adds a new element to an array (at the end):

let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi"); // Adds a new element ("Kiwi") to fruits

The pop() method removes the last element from an array:

let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop(); // Removes the last element ("Mango") from fruits

This example shows an interactive example with a different class, called Ring, using push() to add new elements to the ring array.

Splicing an Array

The splice() method can be used to add new items to an array:

let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

The first parameter (2) defines the position where new elements should be added (spliced in). The second parameter (0) defines how many elements should be removed. The rest of the parameters ("Lemon" , "Kiwi") define the new elements to be added.

Using splice() to Remove Elements

With clever parameter setting, you can use splice() to remove elements without leaving "holes" in the array:

let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1); // Removes the first element of fruits

The first parameter (2) defines the position where new elements should be added (spliced in). The second parameter (0) defines how many elements should be removed. The rest of the parameters are omitted. No new elements will be added.

So practically, we'll most often use splice in a for() loop, in the format fruits.splice(i, 1); which removes the element at i and shifts the remaining elements, so as not to leave a "hole" in the array. Here's an example:

There's a Catch

We're checking each object for whether or not it was clicked using an incrementing for() loop in the mouseClicked() interrupt function. While this is the intuitive way to do things, there's a small chance that this could create a problem. For example, if we had clicked spots[4], we'd splice it out, making the previous spots[5] the new spots[4]. The for() loop moves on to check whether we clicked spots[5] (which is now the new spots[5], formerly spots[6]). The previous spots[5] gets away without being checked!

A common way around that is to count backwards in for() loops that use splice() (or other methods of removing elements from arrays, which we won't cover). In other words, instead of:
for (let i = 0; i < spots.length; i++){
we can write:
for (let i = spots.length-1; i >= 0 ; i--){

Try implementing this method of iteration in the above code sample.

Then, try using splice() to create a "cap" on the length of the array of 20 items. In other words, add up to 20 objects to the array, but delete the first object in order to add the 21st.