JavaScript Introduction | Array | Using Arrays

Sparse Arrays

A sparse array means an array whose element positions are not continuous.
Therefore, in a sparse array, the number of array elements is always less than the value of the array’s length property.

var arr = new Array(); // creates an empty array object.
arr[99] = "JavaScript" // inserts a string at the 100th position of array arr.
// Because the 100th element was inserted, the array length increases to 100.
document.write("The length of the array is " + arr.length + ".");

Multidimensional Arrays

A multidimensional array means an array whose array elements are also arrays.

The arrays we have examined so far are one-dimensional arrays.
A two-dimensional array means an array whose elements are one-dimensional arrays.
A three-dimensional array means an array whose elements are two-dimensional arrays.

Once you understand two-dimensional arrays, you can understand arrays of higher dimensions in the same way.

var arr = new Array(3);      // creates an array with 3 elements.
for (var row = 0; row < 3; row++) {
    arr[row] = new Array(4); // creates another array with 4 elements for each element.
    for (var column = 0; column < 4; column++) {
        arr[row][column] = "[" + row + "," + column + "]"; // creates each array element.
        document.write(arr[row][column] + " ");            // accesses each array element.
    }
}

Elements of a two-dimensional array can be referenced by using the [] operator twice.

Associative Arrays

In JavaScript, only positive integers including 0 can be used as array indexes.
An array that uses string keys instead of numeric indexes is called an associative array.

JavaScript does not separately provide associative arrays supported by most programming languages.
Instead, you can create an object that uses strings as indexes and behaves like an associative array.

However, an array created this way is internally redeclared from an Array object to a basic object in JavaScript.
Therefore, all Array methods and properties that could previously be used will return inaccurate results.

var arr = [];          // creates an empty array.
arr["one"] = 1;        // adds an array element using a string as the index instead of a numeric index.
arr["true"] = true;
arr["JavaScript"] = "JavaScript";
document.write(arr["true"]); // can access an array element using a string as the index.
document.write(arr.length);  // because an associative array is not an Array object, the length property value is 0.
document.write(arr[0]);      // undefined

In the example above, the associative array arr returns 0 as the value of its length property.
As shown here, in JavaScript, an associative array is not an Array object but a basic object, so strictly speaking, it is not an array.

From ECMAScript 6, a new data structure called the Map object is provided separately to solve this inconvenience.

Accessing Strings Like Arrays

In JavaScript, strings are immutable values, so they can be treated as read-only arrays.

Therefore, you can use the [] operator as with arrays to access each character that makes up a string directly.
You can also use all generic methods provided by the Array object.
Each character of a string can also be accessed with the charAt() method provided by the String object.

var str = "Hello!";       // creates a string
document.write(str.charAt(2)); // l
document.write(str[2]);        // l

However, accessing strings like arrays does not work in Internet Explorer 7 and earlier. It can also make you mistake strings for arrays and lead to mistakes like the following.

var str = "Hello!"; // creates a string
str[0] = "";        // JavaScript strings are read-only, so this statement causes an error.

Therefore, it is better not to use strings directly like arrays. Instead, convert them to arrays first with a method such as split().

Checking Whether a Value Is an Array in JavaScript

JavaScript does not provide a separate type called array. JavaScript arrays are of the object type, and using the typeof operator returns ‘object’.

var arr = [1, true, "JavaScript"]; // creates an array
document.write(typeof arr);        // object

Therefore, JavaScript provides the following ways to check whether a variable is an array.

Array.isArray() method
instanceof operator
constructor property

From ECMAScript 5, the Array class added the isArray() method for checking whether a value is an array.

document.write(Array.isArray(arr));   // true
document.write(Array.isArray("string")); // false

However, older browsers do not support ECMAScript 5, so the Array.isArray() method may not work properly.
In that case, you can use the instanceof operator to determine whether the variable is an Array object and check whether it is an array.

document.write(arr instanceof Array); // true
document.write(123 instanceof Array); // false

You can also check whether a value is an array by using the constructor property of the Array object. For a JavaScript array, the constructor property returns the following value.

Syntax

function Array() {[native code]}

Therefore, as in the following example, you can check whether the variable is an array by using the toString() method together with the indexOf() method.

function isArray(a) {
    return a.constructor.toString().indexOf("Array") > -1;
}

var arr = [1, true, "JavaScript"];          // creates an array
document.write(arr.constructor);            // outputs the value of the constructor property
document.write(arr.constructor.toString()); // function Array() {[native code]}
document.write(arr.constructor.toString().indexOf("Array")); // 10
document.write(isArray(arr))                // true

In line 2 of the example above, the toString() method converts the value of the constructor property to a string.
In line 3, the indexOf() method finds the starting index of the substring “Array” in that string.
If the string passed as an argument cannot be found in the target string, the indexOf() method always returns -1.
Therefore, if variable arr is an array, it will always contain the substring “Array”, so the result of line 1 always returns true.