An array is a set of data elements stored under the same name. There can be arrays of values (var or let) or custom objects. While both objects and arrays are ways of storing collections of data, only objects allow for functionality, while arrays are better at storing, indexing and searching large collections of data.
Arrays might store vertex data for complex shapes, recent keystrokes from the keyboard, or data read from a file.
If you have a list of items (a list of car names, for example), storing the cars in single variables could look like this:
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
However, what if you want to loop through the cars and find a specific one? And what if you had not 3 cars, but 300? The solution is an array! An array can hold many values under a single name, and you can access the values by referring to an index number.
let cars = ["Saab", "Volvo", "BMW"];
Using an array literal is the easiest way to create a JavaScript Array. The syntax is:
let array_name = [item1, item2, ...];
Spaces and line breaks are not important. A declaration can span multiple lines:
let cars = [
"Saab",
"Volvo",
"BMW"
];
You refer to an array element by referring to the index number. This statement accesses the value of the first element in cars:
let name = cars[0];
The index of the array is very important, and reflects the order in which elements the elements were added to the array. In the above example, cars[0] definitely refers to "Saab" and only "Saab", because that's the first index (index 0) in the array.
This statement modifies the first element in cars:
cars[0] = "Opel";Let's try that out:
Let's look at another example where we use the values stored in an array to create geometry.
The following example shows how to make a star using two arrays of coordinates.
Remember to always start counting from 0. If you try to access an element that is larger than the size of the array, you'll get an error:
Try creating an array of words, in the syntax let dogs = ["poodle", "chow chow", "maltese"]; Create an index variable, and a function that increments the index of the array each time the mouse is clicked.
We'll get an error, because we run out of bounds of the array. Try fixing this with a modulus function.
The real strength of JavaScript arrays are the built-in array properties and methods:
let x = cars.length; // The length property returns the number of elements
let y = cars.sort(); // The sort() method sorts arrays
Our familiar for() loops are great for looping over an array:
Of course, we don't have to use the built-in array properties. We can simply make loops that iterate for as many times as we specify. Try modifying the above code to create 12 fruit words at random locations on the canvas (duplicate words are fine).
Arrays are often used to store data from the mouse. The pmouseX and pmouseY variables store the cursor coordinates from the previous frame, but there’s no built-in way to access the cursor values from earlier frames. At every frame, the mouseX, mouseY, pmouseX, and pmouseY variables are replaced with new numbers and their previous numbers are discarded. Creating an array is the easiest way to store the history of these values. In the following example, the most recent 100 values from mouseY are stored in a array and displayed on screen as a line from the left to the right edge of the screen. At each frame, the values in the array are shifted to the right and the newest value is added to the beginning.
Now let's return to our screen saver example. Modify the code below to draw an array of four images instead of just one.