10 - Arrays

Arrays are another useful data structure in JavaScript, that is based on Objects, which makes certain operations much easier to perform.

Arrays are a sequential collection of data that is stored with a numbered index. Remember that we use curly brackets to create an empty object. We can create an empty array in a similar fashion by using square brackets.

	var arr = [];

In this example, we created an empty array and used a variable called arr to store that array. Now if we wanted to add elements to this array, we can use the push method that array objects have.

In this example, we are pushing three new values to the previously empty array. In the first line, we are pushing in a value of number type, in the second line we are pushing a string type into the array and in the third line we are pushing an object type into it.

Now if we are to look at the contents of the array by using console.log, we will see something like this on screen:

	[1,"hello world",{"name":"value"}]

Notice how we used different data types and objects to populate the Array. Arrays can contain any object, even other arrays. Just like how it is with JavaScript objects, we can populate an Array at creation time by providing desired values inside square brackets using a comma to separate them. Let’s create an array with four numbers in it.

We can use the index number property that automatically gets generated to access the individual items in an array. One thing to know though is the indices that refer to the stored items in an array starts counting from 0. To access an individual item in an array, we can type the variable name that the array is stored in, and then use the index number in square brackets to refer to that item at that index. The number 0, will refer to the first item in the array - which is 15 -, the index number 1 will be for the second item, etc…

If we try to access an item that doesn’t exist, we will get an undefined value. Which makes sense because that item is not defined. Remember objects also return an undefined value when we try to access a property that doesn’t exist.

Let’s see how the array data structure can simplify things when building programs. We will start with a simple example. Imagine we want to create five different circles of distinct sizes. To be able to do so, with our current knowledge, we would need to create five different variables and assign those variables the desired values. And then call the ellipse function five times, using a different variable each time.

	var size1 = 200;
	var size2 = 150;
	var size3 = 100;
	var size4 = 50;
	var size5 = 25;
	
	ellipse(width/2, height/2, size1, size1);
	ellipse(width/2, height/2, size2, size2);
	ellipse(width/2, height/2, size3, size3);
	ellipse(width/2, height/2, size4, size4);
	ellipse(width/2,