Arrays

Thus far, we have used two types of data structures;

single variables ( var )
and objects ( {} )

This week, we add a third to that list, arrays.

An array is a structure for holding a collection of data. Often times, this data is of the same type, although that is not a requirement in JavaScript. In many ways, arrays are more flexible, powerful, and simpler, than objects.

You likely remember, that objects are a structure for holding any type of data. Remember, this data is stored in an object using key:value pairs, where a key, much like a variable, points to the data.

An array uses a set of numbered positions to store data. These numbered storage locations within an array are accessed through index numbers.

Creating Arrays

In JavaScript, arrays are specified with square brackets ( [] ).

The following would create an empty array and assign it to the variable myVar.

let myVar = [];

Creating a Pre-Filled Array

To initialize an array with pre-filled elements, commas ( , ) are used as separators.

The following would initialize an array with three elements.

let myArray = [ "tree", "hat", "cat" ];

Array Elements

We describe the pieces of data in an array as elements. In the above example, the array has 3 elements.

An element can simply be thought of as a bucket, where we can place data.

Getting Elements with Index Values

In the above example, the array’s 3 elements are each strings. To get any one of these elements, you need to provide the index number of the desired element. So for example, to get and return the string value "hat" from the above, we would supply it’s index value to the variable where it is stored.

The index value is an integer supplied between square brackets, appended to the variable.

variableName[index-integer]

To get the value of "hat" from the above example, we would supply the index value of 1.

let myArray = [ "tree", "hat", "cat" ];
myArray[1]; // <- returns "hat"

NOTE: JavaScript is a “0-based” language. That is, numbering always starts at 0.

Since JavaScript is a “0-based” language, the index value of "hat" is 1. Likewise;

The element "tree" is at index 0
The element "hat" is at index 1
The element "cat" is at index 2

This can be confusing to some people, so take a moment for this to sink in. The above array ( myArray = [ "tree", "hat", "cat" ]; ) has a length of 3. However, the last element (“cat”) is at index 2.

An array of length 3 has the following index values.

[ index 0, index 1, index 2 ];

Array Length

An array’s length is the number of elements that make up the array.

To access the number of elements or rather the length of an array, you can append the getter method length to the variable referencing an array.

// initialize an array with some numbers
var myArray = [ 0, 1, 2, 3 ];

// access the length of the array
myArray.length; // <- returns 4

This also means that the last element in an array can always be accessed using the following algorithm;

yourArray[ yourArray.length - 1 ]

Going Out of Bounds

You must be careful not to access elements that don’t exist!

A common error you will get is “ReferenceError: Can’t find variable: numberList”, which means you tried to reference something that does not exist.

Be careful to check your code to ensure you pass index values that exist to an array.

What Can Be Stored in Arrays?

As mentioned above, arrays can store any collection of data. The following array contains a number of different data types;

let myArray = [ "umbrella", 123, -10.3, true ];

Collections of Similar Data

Typically however, you will use an array to store a single data type. The elements in this type of array will typically be used in similar ways throughout your code.

Collections of Objects and Arrays

Arrays can also hold other data structure, such as objects or additions arrays.

The following array contains three objects. To access these objects, and their subsequent parameters, you must use a combination of array and object notation.

let objArr = [
    { d_val: 20, h_val: 30 },
    { d_val: 10, h_val: 40 },
    { d_val: 20, h_val: 30, isHappy: true }
]

objArr[2].isHappy // ← This would return 'true'

When an array holds another array, this is known as either;

a nested array
a 2D array

Below is an example of a nested array. When using nested arrays, you can access second level elements using two sets of square brackets.

let nestedArr = [
    [ 2, 100, 34 ],
    [ 20, 80, 72 ],
    [ 120, 3, 90 ],
    [ 90, 90, 90 ]
];

nestedArr[0][2] // ← returns '34'