In This Chapter

Identifying and defining arrays

Building arrays

Moving beyond 2D with multidimensional arrays

Working within array elements

Using array functions and properties

“I am large. I contain multitudes.”

— Walt Whitman

Arrays are a fundamental part of any programming language. In this chapter, you discover what they are, how to use them, and what makes JavaScript arrays distinct from arrays in other programming languages. You work with arrays to create lists, order lists, and add and remove items from lists.

Don’t forget to visit the website to check out the online exercises relevant to this chapter!

Making a List

The earlier chapters in this book involve working with variables that are standalone pieces of data, such as: var myName = “Chris”, var firstNumber = “3”, and var how ManyTacos = 8. There are often times in programming (and in life) where you want to store related data under a single name. For example, consider the following types of lists:

• A list of your favorite artists
• A program that selects and displays a different quote from a list of quotes each time its run
• A holiday card mailing list
• A list of your top music albums of the year
• A list of all your family and friends' birthdays
• A shopping list
• A to-do list
• A list of New Year’s resolutions

Using single-value variables (see Chapter 3), you would need to create and keep track of multiple variables in order to accomplish any of these tasks. Here is an example of a list created using single-value variables:

var artist1 = "Alphonse Mucha";
var artist2 = "Chiara Bautista";
var artist3 = "Claude Monet";
var artist4 = "Sandro Botticelli";
var artist5 = "Andy Warhol";
var artist6 = "Wassily Kadinski";
var artist7 = "Vincent Van Gough";
var artist8 = "Paul Klee";
var artist9 = "William Blake";
var artist10 = "Egon Schiele";
var artist11 = "Salvador Dali";
var artist12 = "Paul Cezanne";
var artist13 = "Diego Rivera";
var artist14 = "Pablo Picasso";

This approach could work in the short term, but you’d quickly run into difficulties. For example, what if you wanted to sort the list alphabetically and move artists into the correct variable names based on their position in the alphabetical sort? You’d need to first move Mucha out of the artist1 variable (maybe into a temporary holding variable) and then move Bautista into the artist1 variable. The artist2 spot would then be free for Blake, but don’t forget that Mucha is still in that temporary slot! Blake’s removal from artist9 frees that up for you to move someone else into the temporary variable, and so on. Creating a list in this way quickly becomes complicated and confusing.

Fortunately, JavaScript (and every other programming language we know of) supports the creation of variables containing multiple values, called arrays.

Arrays are a way to store groups of related data inside of a single variable. With arrays, you can create lists containing any mix of string values, numbers, Boolean values, objects, functions, any other type of data, and even other arrays!

Array Fundamentals

An array consists of array elements. Array elements are made up of the array name and then an index number that is contained in square brackets. The individual value within an array is called an array element. Arrays use numbers (called the index numbers) to access those elements. The following example illustrates how arrays use index numbers to access elements:

myArray[0] = "yellow balloon";
myArray[1] = "red balloon";
myArray[2] = "blue balloon";
myArray[3] = "pink balloon";

In this example, the element with the index number of 0 has a value of "yellow balloon". The element with an index number 3 has a value of "pink balloon". Just as with any variable, you can give an array any name that complies with the rules of naming JavaScript variables. By assigning index numbers in arrays, JavaScript gives you the ability to make a single variable name hold a nearly unlimited list of values.

Just so you don't get too carried away, there actually is a limit to the number of elements that you can have in an array, although you're very unlikely to ever reach it. The limit is 4,294,967,295 elements.

In addition to naming requirements (which are the same for any type of variable, as described in chapter 3), arrays have a couple of other rules and special properties that you need to be familiar with:

• Arrays are zero-indexed
• Arrays can store any type of data

Arrays are zero indexed

JavaScript doesn't have fingers or toes. As such, it doesn't need to abide by our crazy human rules about starting counting at 1. The first element in a JavaScript array always has an index number of 0 (see Figure 4-1).

What this means for you is that myArray[3] is actually the fourth element in the array.

Zero-based numbering is a frequent cause of bugs and confusion for those new to programming, but once you get used to it, it will become quite natural. You may even discover that there are benefits to it, such as the ability to turn your guitar amp up to the 11th level.

Creating Arrays

JavaScript provides in two different ways for you to create new arrays:

• new keyword
• Array literal notation

Populating Arrays

You can add values to an array when it is first created, or you can simply create an array and then add elements to it at a later time. Adding elements to an array works exactly the same as creating or modifying a variable, except that you specify the index number of the element that you want to create or modify. Listing 4-2, shows an example of creating an empty array and then adding elements to it.

Listing 4-2: Populating an Empty Array

var peopleList =[];
peopleList[0] = "Chris Minnick";
peopleList[1] = "Eva Holland";
peopleList[2] = "Abraham Lincoln";

You don’t always need to add elements sequentially. It is perfectly legal in JavaScript to create a new element out of sequence. For example, in the preceding array, from Listing 4-2, you could add the following:

peopleList[99] = "Tina Turner";

Creating an array out of sequence like this effectively creates blank elements for all of the indexes in between peopleList[2] and peopleList[99].

So, if you check the length property of the peopleList array after adding an element with an index of 99, something interesting happens:

peopleList.length // returns 100

Even though you've only created four elements, JavaScript will say that the length of an array is 100 because the length is based on the highest numbered index, rather than on how many elements you've actually created.

Understanding Multidimensional Arrays

Not only can you store arrays inside of arrays, you can even put arrays inside of arrays inside of arrays. This can go on and on.

An array that contains an array is called a multidimensional array. To write a multidimensional array, you simply add more sets of square brackets to a variable name. For example:

var listOfLists[0][0];

Multidimensional arrays can be difficult to visualize when you first start working with them. Figure 4-2 shows a pictorial representation of a multidimensional array.

You can also visualize multidimensional arrays as hierarchal lists or outlines. For example:

Top Albums by Genre

1. Country

   1.1 Johnny Cash:Live at Folsom Prison

   1.2 Patsy Cline:Sentimentally Yours

   1.3 Hank Williams:I'm Blue Inside

2. Rock

   2.1 T-Rex:Slider

   2.2 Nirvana:Nevermind

   2.3 Lou Reed:Transformer

3. Punk

   3.1 Flipper:Generic

   3.2 The Dead Milkmen:Big Lizard in my Backyard

   3.3 Patti Smith:Easter

Here is a code that would create an array based on Figure 4-2:

var bestAlbumsByGenre = []
bestAlbumsByGenre[0] = "Country";
bestAlbumsByGenre[0][0] = "Johnny Cash:Live at Folsom Prison"
bestAlbumsByGenre[0][1] = "Patsy Cline:Sentimentally Yours";
bestAlbumsByGenre[0][2] = "Hank Williams:I'm Blue Inside";
bestAlbumsByGenre[1] = "Rock";
bestAlbumsByGenre[1][0] = "T-Rex:Slider";
bestAlbumsByGenre[1][1] = "Nirvana:Nevermind";
bestAlbumsByGenre[1][2] = "Lou Reed:Tranformer";
bestAlbumsByGenre[2] = "Punk";
bestAlbumsByGenre[2][0] = "Flipper:Generic";
bestAlbumsByGenre[2][1] = "The Dead Milkmen:Big Lizard in my Backyard";
bestAlbumsByGenre[2][2] = "Patti Smith:Easter";

Accessing Array Elements

You can access the elements of arrays in the same way that you set them, using square brackets and the index number. For example, to access the third element in any array called myArray, you would use the following:

myArray[2];

To access elements in a multidimensional array, just add more square brackets to get to the element you want:

bestAlbumsByGenre[0][1]; // returns "Patsy_Cline:Sentimentally Yours";

To test out setting and accessing the elements of an array, follow these steps:

1. Open your Chrome browser and the open the JavaScript console.

   You can open your JavaScript Console using the Chrome menu or by pressing Command + Option + J on Mac or Ctrl + Shift + J in Windows.

2. In the console, type the following statement, followed by the Return or Enter key, to create an array called lengthsOfString:

   var lengthsOfString = [2,4,1.5,80];

3. Type the array name followed by the index number in square brackets to retrieve the value of each array element.

   For example:

   lengthsOfString[0];
lengthsOfString[3];
lengthsOfString[2];

4. Enter an index number that doesn’t exist in the array.

   For example:

   lengthsOfString[4];

   Notice that the value of this array element is undefined.

5. Type the following command to create a new variable to hold the total length of string that you have:

   var totalLength = lengthsOfString[0] + lengthsOfString[1] + lengthsOfString[2] + lengthsOfString[3];

6. Finally, get the value of totalLength with this command:

   totalLength;

Using array methods

The syntax for using array methods differs depending on the particular method you are trying to use. You do, however, access the functionality of every array method the same way that you access array properties: by using dot notation.

For a complete reference to JavaScript array methods, with examples, visit https://docs.webplatform.org/wiki/javascript/Array#Methods.

Listing 4-3 shows some examples of the most commonly used JavaScript methods.

Listing 4-3: Commonly Used JavaScript Array Methods in Action

<html>
<head>
  <title>common array methods</title>
</head>
<body>
  <script>
    var animals = ["tiger" , "bear"];
    var fruit = ["cantaloupe" , "orange"];
    var dishes = ["plate" , "bowl" , "cup"];

    var fruitsAndAnimals = fruit.concat(animals);
    document.write (fruitsAndAnimals + "<br>");

    var whereIsTheTiger = animals.indexof("tiger";
    document.write ("The tiger has and index number of: " + whereIsTheTiger + "<br>");
  </script>
</body>
</html>

Figure 4-3 shows the result of Listing 4-3 when run in a browser.