Arrays store multiple values into a single variable name. There are specific ways of populating and retrieving the values held in an array.

JavaScript recognizes an array when square brackets [ ] are used to contain the values.

three-dots

Creating an array

To declare an array for use in your script you can simply use empty square brackets. You can add items to the array later on in the program.

var partSpecs = [ ];

If you know the items to go in an array, you can declare it with the items from the start, If you only know some of the items, but not others, you can declare the array, but have empty spaces between the comma separated values.

var partSpecs = ["Universal", "dual tip", "stainless steel", 36.99, 346, 5, false]
var partSpecs = ["Universal", , "stainless steel", , 346, 5, ]

 Arrays can hold strings, numbers and Boolean values. Strings must be enclosed in quotation marks. Numbers must be numbers, no quotation marks. Boolean values are true or false, no quotation marks.

three-dots

Accessing items in an array

Each item in an array has an index number, partSpecs[0], partSpecs[1], partSpecs[2]... The index starts with 0. This means that the fifth items has an index of 4.

If you wanted to retrive the value of the fourth item in an array, you would use the following syntax:

var partMaterial = partSpec[3];

three-dots

Adding items to an array

With some arrays, it is simply a list and the order of the items do not matter. With other arrays, it is crucial that you keep the items in the proper index location for use with other parts of the program.

If you are not concerned about where the new item is being placed in the array, you can just add the new item to the end with the .push() command. You can use .push() for one or more new items for the array.

partList.push("red");
partList.push("red", true, 14);

To add a new item or items to the beginning of the array, you use the .unshift() command.

partList.unshift("automotive","muffler");

If you need to change a value in the array or you need to populate an empty slot, you can specify the array index for the new value.

partList[1] = "single tip";

This will replace whatever is currently in index [1] (the second item in the array) with the new value.

aa-three-dots

Deleting items from an array

If you need to remove items from an array there are a few ways to go about the task. 

To remove items from the front of the array, use the .shift() command.

guestList.shift(); // this will remove one item from the beginning af an exsting array

To remove items from the end of the array, use the .pop() command.

guestList.pop(); // this will remove one item from the end of the array

To remove items of a known index, you can assign that index to an empty value.

guestList[3] = ""; // this will create an empty value at index [3]

three-dots

Using .splice() to add, remove and replace items in an array

The .splice() command allows you to remover one or or items at a specified point in an array. .splice() also allows you to remove add or more items at a specified point in an array.

To remove items, the .splice() command requires the index number at which to start removing items and how many items to to remove.

var shopList = ["milk", "eggs", "broccoli", "lettuce", "tomatoes", "bread"];
shopList.splice(2,3);

In the example above the .splice() command will start at index 2 and remove 3 items, which will remove broccoli, lettuce and tomatoes.

To add items, the .splice() command requires the index number to start with, followed by 0 (how many items to remove), then the items to add to the array.

var shopList = ["milk", "eggs", "broccoli", "lettuce", "tomatoes", "bread"];
shopList.splice(2,0,"strawberries", "crackers");

The example above will add strawberries and crackers to the list right after eggs, which is index [1].

To replace items in an array using .splice() it requires the index number to start with, the number of items to be replaced and then the new items.

var shopList = ["milk", "eggs", "broccoli", "lettuce", "tomatoes", "bread"];
shopList.splice(3,2,"strawberries", "crackers");

The example above will replace lettuce and tomatoes and replace them with strawberries and crackers to the list right after broccoli, which is index [2]

aa-three-dots

Retrieving the length of the array with .length

There may be an instance when you need to find out how many items are in the array, which is also known as the length of the array. For this you use .length as follows:

var guestList = ["Bill Tate", "Susan Johnson", "Henry Johnson", "Karen Williams"];
var guestNum = guestList.length;

The value of guestNum would be 4.

aa-three-dots

Displaying an array on the web page

If you wrote a line in your script to display the array, it would not separate the values with a space and it would not add commas. The array would be fairly unintelligible.

It would be best to employ a loop to display each item in the array so that you could add a <br/> or a comma after each item.

var guestList = ["Bill Tate", "Susan Johnson", "Henry Johnson", "Karen Williams"];
var count = 0;
while (count < guestList.length) {
    document.write(guestList[count] + "<br/>")
    ++count;
}