JavaScript Arrays (1D)
Objectives
Lab
Practice
More Info.

Array Basics

An array is an ordered collection of data of the same type. Arrays allow us to store multiple values in a structure that can be looped through as opposed to creating multiple variables or writing over previous information. For example, if we wanted to store three names in a program, we would write the following: var name1="Mickey Mouse"; var name2="Tom Cat"; var name3="Big Bird";
However, what if I wanted to store 30 names? 100? 1,000? That is a lot of variables to keep track of. Arrays allow us to store all of the names in one variable that is sectioned into parts.

In many programming languages, arrays need a maximum size assigned at the time of creation. In JavaScript, this is NOT the case. An array can be created without a maximum size and items can be added as needed.

When an array is instantiated, the computer allocates a set of consecutive spaces in memory. These spaces are then sequentially numbered for reference using indicies. The first index of an array is always 0. This means that an array with 10 elements has indicies of 0-9, inclusive. Trying to reference information in index 10 will result in an error.

The syntax of referencing an array element is arrayName[index]. This syntax can be on the left or right side of an assignment statement, compared to other values, output, or sent as a parameter to a method. In other words, it can be treated like any other variable. So, to assign the first element of a names array tot he name "Joe Smith", the code would be as follows: names[0] = "Joe Smith";

Declaring Arrays

When declaring a 1D array, we create it like any JavaScript variable. The difference is we initialize it (set its initial value) to empty square brackets []. This tells the computer to treat this variable as an array. So, the declaration of our names array would be: var names = [];
The names array can store any type of information, but all of the information in the array should be of the same type (string, int, double, boolean, etc).

Arrays can also be created with information already in them. If you know the information to be stored in the array at the time of creation, simply list the data, separated by commas in the square brackets. Remember, strings need quotes, but ints, doubles and booleans do not. var names = ["Mickey Mouse", "Tom Cat", "Big Bird"];

Built In Properties & Methods

An array in JavaScript is an Object. This means that the variable, once created, has certain properties and methods that can be accessed. For the purposes of these examples, we will be working with the names array created previously.

Traversing Arrays

The advantage of using arrays is the ability to cycle through a set of data using a loop structure. Typically, this looop is a counting loop used to iterate through the indicies of the array. The loop efficiency is dependent on the array length property. By using the length property instead of a literal number, our loop will continue to work properly even if the array size changes. for(var x=0; x<names.length; x++){ ...loop body... }
The loop body can do any number of things, such as:
  1. Output the information document.write(names[x]);
  2. Assign information names[x] = window.prompt("Enter a nmae");
  3. Search for a value if(names[x] == "Joe Smith")
  4. Keep a running total sum+=studentGrades[x];

Parallel Arrays

Sometimes, we have multiple pieces of data that belong together, such as a student name, phone number and grade. Some programmers will make multiple arrays of the same size, two of type string for name and phone and one of type int for the grade. These arrays are called prapllel arrays becasue the data in each index is partnered with the data in the same index of the other arrays. This is a great way to store information, but proceed with caution because sorting one array will leave the elements of the other arrays unmatched and our data will no longer correspond properly.

HTML Input Arrays

Often times, when creating a form, we need to provide a way for people to input more or less information than normal. For example, on a form asking for a list of children in the family, some people may have 0 or 1, others 2+ and even others 5+. To accomplish this feat and be able to send/accept all of the information we use the DOM to create new form elements, and we give each of the new elements a name that is an array (childName[]). This way, however many items get filled out, fill in the array with the information to be processed on the other side.
<input type='text' name='childName[]' /> <input type='text' name='childName[]' /> <input type='text' name='childName[]' />