Arrays 1

Arrays are a new type of variable. The variables you know so far can all hold one variable at a time such as:

var x = 10;  // x holds 10
var buttonState = true; // buttonState is true
var greeting = "Howdy!"; // greeting holds the string "Howdy!"

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:

var a = [1,2,3,4,5];

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:

var b = [];

1	var b = [];

You can retrieve elements of an array like this:

var c = a[2]; // c contains 3
var d = a[0]; // d contains 1

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.

var e = a[1]; // e contains 2

1	var e = a[1]; // e contains 2

You can ask for the length of an array like this:

var len = a.length; // len contains 5

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:

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);
}

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:

var names = ["Alice", "Bob"];

names.push("Carol"); // array is now ["Alice", "Bob", "Carol"]

var names = ["Alice", "Bob"];

names.push("Carol"); // array is now ["Alice", "Bob", "Carol"]

var nums = [1,2,3];
nums.push(5);
nums.push(8);
// nums is now [1,2,3,5,8]

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:

var names = ["Alice", "Bob"];
names.pop(); // array is now ["Alice"]

1 2	var names = ["Alice", "Bob"]; names.pop(); // array is now ["Alice"]

The array pop() function returns the value removed:

var names = ["Alice", "Bob"];
var n = names.pop();
// n is "Bob"

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.