JavaScript Object: Array

JavaScript has a few built-in objects. One of the most-used objects is Array. Array stores a collection of ordered values that can be accessed via its index (a number).

Some of the characteristics of JavaScript array are as follows:

• untyped (multiple types in the same array)
• zero based, use 32-bit indexes
• dynamic memory allocation (dynamically shrink or expand)
• does not support multi-dimension (but can hold array of arrays)
• sparse (can have gaps, multi-dimension can have varying length in the second dimension)

There are 2 ways to create an array: Array Literal and Array Constructor.

Array Literal

Array literal is the simplest and the most well-known way to cr// will throw Error, not a valid index numbereate an instance of an Array object in JavaScript and probably in most mainstream programming languages.

var arr = [];           // create an array with zero element
var arr = [1,2,3,4,5];  // create an array with 5 elements of the same type

// array with 5 elements: a number, an object, a string, a boolean, and an array
var arr = [1, {}, "This is a string", true, [1,2]]; 

// sparse array that contains 5 elements:
// a number followed by 3 undefined and ended with a number
var arr = [0, , , 3];

Array Constructor

Array constructor is probably less used and less well-known. It is also slower than Array literal.

var arr = new Array(); // create an array with zero elements
var arr = new Array(1,2,3,4,5);  // create an array with 5 elements, same type

// array with 5 elements: a number, an object, a string, a boolean, and an array
var arr = new Array(1, {}, "This is a string", true, new Array(1,2);

// sparse array that contains 5 elements:
// a number followed by 3 undefined and ended with a number
var arr = new Array(0, , , 3);

Modifying Element, Accessing Element, How Many Elements?

Here are examples how to modify/access element of the array and also to know how many elements in the array:

// declare an array of 4 elements, all numbers
var arr = [1,2,3,4];

// modify the value of the first element
arr[0] = 5;

// how many items in the array currently
var arr_length = array.length;

// modify the value of the last element 
// (array index starts from 0, last element means n-1)
arr[arr_length - 1] = 10;

if(arr[1] + arr[2] === arr[0]){
  console.log("The sum of array index 1 and 2 are equal to array index 0");
}

// modifying length property of Array is allowed in certain situation

// Example #1: increase length from 4 to 10, 
// we'll have 6 undefined elements added to the end of the array
arr.length  = 10; 

// Example #2: decrease the length from 4 to 3
// hence arr[3] = 4 no longer exist, we reduce the size of array
arr.length  = 3; 

// Example #3: invalid index number
// will throw Error, not a valid index number
arr.length = -1; 

Iterating Array Elements

There are 2 ways to iterate over Array elements: for-loop and forEach array method.

1) Example for for-loop:

var arr = [1,2,3,4,5];

// NOTE: arr.length is evaluated at every iteration
for(var i=0; i < arr.length; i++){
  console.log("Index " + i + " : " + arr[i]);
}

2) Example for for-loop optimized:

var arr = [1,2,3,4,5];

// optimized because arr.length is called only once
for(var i=0, len; len = arr.length, i < len ; i++){
  console.log("Index " + i + " : " + arr[i]);
}

3) Example for forEach array method:

var arr = [1,2,3,4,5];

arr.forEach(function(element, index, array){
  console.log("Index " + i + " : " + element);
});