Arrays are a new type of variable. The variables you know so far can all hold one variable at a time such as:
1 2 3 | var x = 10; // x holds 10 var buttonState = true; // buttonState is true var greeting = "Howdy!"; // greeting holds the string "Howdy!" |
Essentially, each variable is a box with a single value.
An array is a variable that holds multiple values. You can create one like this:
1 | var a = [1,2,3,4,5]; |
The square brackets indicate the variable is an array and any values between the brackets are the elements inside the array.
You can also create an empty array like this:
1 | var b = []; |
You can retrieve elements of an array like this:
1 2 | var c = a[2]; // c contains 3 var d = a[0]; // d contains 1 |
This is called indexing the array. You place the square brackets *next to* the name of the array and have a number inside, the index number. That retrieves a specific value from the array. Note that indexing starts at 0 not 1. This is standard for most computer languages and a common source of confusion.
Again, indexing arrays starts at 0 not 1.
1 | var e = a[1]; // e contains 2 |
You can ask for the length of an array like this:
1 | var len = a.length; // len contains 5 |
We do something new here. We have the array variable name and then a period (.) and then the variable name “length”. I won’t discuss further how that works except to say that for arrays and special variables called “objects”, you can refer to variables and functions “attached” to the array or object. For now, note there is a special notation involving periods/dots.
Getting the length of an array is important so we can use loops to process an array:
1 2 3 4 5 6 7 | var a = [1,2,3,4,5]; var x = 100; var y = 200; for(var i=0; i < a.length; i++) { text("array element " + i + " is " + a[i]), x, y + textHeight() * i); } |
Copy that into a sketch to see it work. Add more elements to the array “a” and see what happens. Don’t forget to copy the code for textHeight() into your sketch from examples above. (I won’t remind you of this in future. textHeight() is useful enough I’m going to assume we can use it all the time. The openprocesing.org console is cumbersome. I’d rather see output on screen.)
Complete Activity 41
Complete Activity 42
You can add and remove elements from arrays while your program is running.
To add an element to the end of your array, use the array function push() as in:
1 2 3 | var names = ["Alice", "Bob"]; names.push("Carol"); // array is now ["Alice", "Bob", "Carol"] |
or
1 2 3 4 | var nums = [1,2,3]; nums.push(5); nums.push(8); // nums is now [1,2,3,5,8] |
You can remove elements from the end of your array using the array function pop() as in:
1 2 | var names = ["Alice", "Bob"]; names.pop(); // array is now ["Alice"] |
The array pop() function returns the value removed:
1 2 3 | var names = ["Alice", "Bob"]; var n = names.pop(); // n is "Bob" |
Complete Activity 43
If you want to learn more about what you can do with arrays, the w3schools.com site has a decent reference. Look at these links:
https://www.w3schools.com/js/js_arrays.asp
https://www.w3schools.com/js/js_array_methods.asp
However, you won’t need to know anything from there for the next activities.