JavaScript Arrays

Creating JavaScript Arrays

Arrays in JavaScript are fairly easy but can sometimes be a little confusing.

The classical way to create an array is:

var arr1 = new Array(3);

This would create an array of 3 elements.

JavaScript arrays are zero-based so we will have arr1[0], arr1[1] and arr1[2]. At this point each element is undefined.

We can say arr1 holds [undefined,undefined,undefined].

We read/write values simply by assignment: 
x = arr1[0];
arr1[0] = x;

We can find the size of the array (i.e. the number of elements) by using length.

arr1.length would return 3 as we originally created the array as new Array(3).

JavaScript arrays are very flexible and once we have defined a variable as an array type we can implicitly create additional elements. For example:

var arr1 = new Array(3); 
arr1[0] = 100; 
arr1[1] = 101; 
arr1[2] = 102;

// arr1 is holding [101,102,103]

If we assign a non-existent element it is automatically created:

arr1[4] = 104;

// arr1 is holding [101,102,103,104]

Be careful about specifying the index as you may create more than one element:

arr1[6] = 106;

// arr1 is holding [101,102,103,104,undefined,106]. 
// Note that arr1.length=6

Calling new Array() has the performance overhead of calling the new constructor, so unless you have a specific reason to do so the it is better to create an array with the statement:

var arr2 = [];

Initially the length of arr2 will be zero and you can add elements implicitly as before. You can also initialise the array directly using either creation method:

var arr5 = new Array('red', 'orange', 'yellow'); 
// arr5 holds ["red", "orange", "yellow"] and arr5.length=3

var arr6 = ['red', 'orange', 'yellow']; 
// arr6 holds ["red", "orange", "yellow"] and arr6.length=3

Although a=new Array() and a=[] are considered the same by most programmers, one caveat here is when you use the above method of direct initialisation when using a single number.

var arr7 = new Array(3); 
// arr7 holds [undefined,undefined,undefined] length=3

var arr8 = [3]; 
// arr8 holds [3] length=1, i.e. arr8[0]=3

JavaScript arrays can be a mix of types, such as strings, numbers or objects

var arr7 = ['red', 123, arr3]; 
// arr7.length=3

Adding New Elements to the End of the Array

As we have seen we have to be careful how we use new indexes as JavaScript will just create them. As the array is zero-based, the next new element will be arr[arr.length].

You can also use the push method:

var arr6 = ['red', 'orange', 'yellow']; 
// arr6 holds ["red", "orange", "yellow"] arr6.push('green'); 
// arr6 holds ["red", "orange", "yellow", "green"]

You can push more than one at a time:

arr6.push('blue', 'indigo', 'violet'); 
// arr6 holds ["red", "orange", "yellow", "green", "blue", "indigo", "violet"]

If you need more array manipulation then look up the following methods:

delete – delete an element at a given index
pop – remove the last element
splice – insert element(s) into a given position
unshift – add an element to the start
shift – removes the first element
sort – sorts the array

Be sure you understand how these methods change (or not) the array length. Note array length is read/write, so you can truncate the array by setting a shorter length.

Associative Arrays

So far we have looked at numeric array indexes, but we can use strings.

var arr10 = [];
arr10['first'] = 100; 
arr10['second'] = 102;

Note that arr10.length is always zero.

Summary

JavaScript offers a flexible way of creating arrays, starting with the simple statement var a = []. But ensure that you understand how they work and if in doubt use the browser F12 tools to see what you have actually created and check its properties.

[misi ad=”ITWordpress”]