Now that you know about the basic primitive data types in JavaScript, it's time to move to a more powerful data structure-the array.
So, what is an array? It's simply a list (a sequence) of values. Instead of using one variable to store one value, you can use one array variable to store any number of values as elements of the array.
To declare a variable that contains an empty array, you can use square brackets with nothing between them, as shown in the following line of code:
> var a = [];
To define an array that has three elements, you can write the following line of code:
> var a = [1, 2, 3];
When you simply type the name of the array in the console, you can get the contents of your array:
> a;
[1, 2, 3]
Now the question is how to access the values stored in these array elements. The elements contained in an array are indexed with consecutive numbers, starting from zero. The first element has index (or position) 0, the second has index 1, and so on. Here's the three-element array from the previous example:
|
Index |
Value |
|
0 |
1 |
|
1 |
2 |
|
2 |
3 |
To access an array element, you can specify the index of that element inside square brackets. So, a[0] gives you the first element of the array a, a[1] gives you the second, and so on, as shown in the following example:
> a[0];
1
> a[1];
2
Using the index, you can also update the values of the elements of the array. The next example updates the third element (index 2) and prints the contents of the new array, as follows:
> a[2] = 'three';
"three"
> a;
[1, 2, "three"]
You can add more elements by addressing an index that didn't exist before, as shown in the following lines of code:
> a[3] = 'four';
"four"
> a;
[1, 2, "three", "four"]
If you add a new element but leave a gap in the array, those elements in between don't exist and return the undefined value if accessed. Check out the following example:
> var a = [1, 2, 3];
> a[6] = 'n`xew';
"new"
> a;
[1, 2, 3, undefined x 3, "new"]
To delete an element, you can use the delete operator. However, after the deletion, the length of the array does not change. In a sense, you may get a hole in the array:
> var a = [1, 2, 3];
> delete a[1];
true
> a;
[1, undefined, 3]
> typeof a[1];
"undefined"
Arrays can contain all types of values, including other arrays:
> var a = [1, "two", false, null, undefined];
> a;
[1, "two", false, null, undefined]
> a[5] = [1, 2, 3];
[1, 2, 3]
> a;
[1, "two", false, null, undefined, Array[3]]
The Array[3] in the result is clickable in the console and it expands the array values. Let's look at an example where you have an array of two elements, both of them being other arrays:
> var a = [[1, 2, 3], [4, 5, 6]];
> a;
[Array[3], Array[3]]
The first element of the array is [0], and it's also an array:
> a[0];
[1, 2, 3]
To access an element in the nested array, you can refer to the element index in another set of square brackets, as follows:
> a[0][0];
1
> a[1][2];
6
Note that you can use the array notation to access individual characters inside a string, as shown in the following code block:
> var s = 'one';
> s[0];
"o"
> s[1];
"n"
> s[2];
"e"
There are more ways to have fun with arrays (and we get to those in Chapter 4, Objects), but let's stop here for now, remembering the following points:
- An array is a data store
- An array contains indexed elements
- Indexes start from zero and increment by one for each element in the array
- To access an element of an array, you can use its index in square brackets
- An array can contain any type of data, including other arrays