This is a continuation of a series on data structures in javascript. This week’s topic is the Array. An Array is an enumerated list of variables; meaning that each value can be referenced by a numerical index. The index number is referenced using square bracket syntax and Arrays in javascript are zero based.
[sourcecode language="javascript"]document.writeln(someArray[0]);[/sourcecode]
Numerical based indexes make it easy to loop through an Array.
[sourcecode language="javascript"]for (i=0; i < 10; i++) { document.writeln(someArray[i] + '<br>');}[/sourcecode]
There are two different ways to create an Array in javascript. The first way is to use the new operator, but current best practices dictate that the new operator should not be used on javascript primitives.
[sourcecode language="javascript"]var someArray = new Array(10);[/sourcecode]
However, since the new operator has a chance (very slim) to produce unexpected results, standard practice for creating an Array is to simply use square brackets.
[sourcecode language="javascript"]var someArray = [];[/sourcecode]
If you have some experience with Arrays in other programming languages like C or C++, you may be wondering how to define the size of the Array. In javascript it is not necessary because the size will be automatically increased as needed.
Javascript Arrays can be initialized with data or you can create an empty Array and add data at a later time.
[sourcecode language="javascript"]var someArray = [ 1, 2, 3 ];var anotherArray = [];anotherArray[0] = 1;anotherArray[1] = 2;anotherArray[2] = 3; [/sourcecode]
You can skip indexes when populating the array and the value of the skipped indexes will be ‘undefined’
[sourcecode language="javascript"]var someArray = [];someArray[0] = 1;someArray[1] = 2;someArray[3] = 3;document.writeln(someArray[2]); // prints 'undefined' [/sourcecode]
Arrays in other languages can be rigid about the type of data that is stored. Typically all of the data stored in the Array would need to be of the same type. This is not the case in javascript where you can store any type of data in the same Array. This means that you can add strings, functions, objects, booleans, or even additional Array’s to a single Array.
[sourcecode language="javascript"]var someArray = [];var someArray[0] = 1;var someArray[1] = 'yojimbo';var someArray[2] = {'firstName': 'John', 'lastName':'Doe'};document.writeln(someArray[2].firstName); // prints 'John' [/sourcecode]
An important characteristic of javascript Arrays to understand is that they are passed by reference to functions. This means that anything that you do inside of the function will alter the original Array.
[sourcecode language="javascript"]var someArray = [0, 1,2];function updateArray(passedArray) { passedArray[0] = 3;} updateArray(someArray);document.writeln(someArray[0]); // prints '3'[/sourcecode]
Similarly, javascript Arrays are assigned by reference. This means that if you create an Array by assigning it to an existing Array, anything that you do with the second variable will alter the original Array.
[sourcecode language="javascript"]var someArray = [0,1,2];var anotherArray = someArray;anotherArray[0] = 3;document.writeln(someArray[0]); // prints '3'[/sourcecode]