JavaScript Arrays¶

Basic Array Operations¶

Very similar to lists in Python.

To create an array:

let stuff = [42, 56, "hello", 13, true];

To access a value in the array:

let stuff = [42, 56, "hello", 13, true];

console.log(stuff[0]) // 42
console.log(stuff[2]) // "hello"

To add a value at the end of the array:

stuff.push("another")
// stuff now equals [42, 56, "hello", 13, true, "another"]

To remove a value from end of array:

let last = stuff.pop()
// last now equals "another"
// stuff now equals [42, 56, "hello", 13, true]

To add/remove from the front of the array, use unshift("something") and shift() respectively.

Iterating Through an Array¶

You can use a traditional for loop like this:

let stuff = [42, "hello", 15, "bye"];
for (let i = 0; i < stuff.length; i++) {
    console.log(`This element is ${stuff[i]}`);
}

There is also a for-of loop to make this simpler:

let stuff = [42, "hello", 15, "bye"];
for (let thing of stuff) {
    console.log(`This element is ${thing}`);
}

Removing Values From Anywhere in an Array¶

To remove a value from any spot within the array, you need to know it’s index value. You can use:

let stuff = [42, 56, "hello", 13, true];
stuff.splice(2, 1); //remove the element at index 2, just remove 1 element
// stuff now equals [42, 56, 13, true]

If you are looping through an array of objects, and you don’t know in advance which elements you are going to eliminate (perhaps they are removed after leaving the screen), you can do that using a classic backwards for loop (to avoid index value issues when removing an element from the array – whiteboard drawing!):

//assume the stuff array is already created, and holds objects that have an isDead property
for (let i = stuff.length - 1; i >= 0; i--) {
    if (stuff[i].isDead) {
        stuff.splice(i, 1);
    }
}

You can also do this using a for-of loop, and using the .indexOf method.

//assume the stuff array is already created, and holds objects that have an isDead property
for (let thing of stuff) {
    if (thing.isDead) {
        let theIndex = stuff.indexOf(thing);
        stuff.splice(theIndex, 1);
    }
}

Making a Copy of an Array¶

If you need to make a copy of an array, be aware that assigning the array to a new variable only adds a pointer to the same memory location (this is known as passing by reference). To make this clear, consider the following:

let stuff = [52, 78, "hey"];
let other = stuff;
other[1] = 35;
// now, both other and stuff equal [52, 35, "hey"]

If you want to create a copy of an array that is not pointing to the same memory location, you can create a structured clone of the object:

let stuff = [52, 78, "hey"];
let other = structuredClone(stuff);
other[1] = 35;
// now, other equals [52, 35, "hey"]
// and stuff equals [52, 78, "hey"]

Creating an Array of a Specific Size¶

Since JavaScript arrays allow you to add/remove values from them easily, it is unusual for you to create an array of a specific size. You can, however, simply create the array, then push a bunch of default values into it. This means your array will never be filled with empty elements (which can save you from undefined errors in your code).

let emptyArray = [];
for (let i=0; i<100; i++) {
    emptyArray.push(0);
}

let emptyArray = new Array(100);    // each value is currently empty
emptyArray.fill(0);                 // now every element is a 0

Array Practice Questions¶

p5js Array Examples¶

let newBall = {
    x: random(width),
    y: random(height),
    diameter: random(25, 100),
    dx: random(-5, 5),
    dy: random(-5, 5),
};

Arrays Practice Quiz¶

To confirm that you understand arrays, you should try the Arrays Practice Quiz.