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.

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.