JavaScript Introduction | Array | Array Basics

Creating Arrays

The following are ways to create an array in JavaScript.

Syntax

1. var arr = [arrayElement1, arrayElement2,...];          // using an array literal
2. var arr = Array(arrayElement1, arrayElement2,...);     // using the Array object constructor
3. var arr = new Array(arrayElement1, arrayElement2,...); // creating an Array object with the new operator

All three methods above create arrays with the same result.
An array literal is created by listing array elements inside square brackets ([]) separated by commas.

var arrLit = [1, true, "JavaScript"];             // using an array literal
var arrObj = Array(1, true, "JavaScript");        // using the Array object constructor
var arrNewObj = new Array(1, true, "JavaScript"); // creating an Array object with the new operator

document.write(arrLit + "<br>");                  // 1,true,JavaScript
document.write(arrObj + "<br>");                  // 1,true,JavaScript
document.write(arrNewObj);                        // 1,true,JavaScript

Referencing Arrays

In JavaScript, when you want to reference each element of an array, use the [] operator.

Syntax

arrayName[index]

In JavaScript, the number of array elements is called the array length.
This array length is automatically updated in the length property.

In JavaScript, indexes always start at 0.
An arbitrary expression that returns a non-negative integer can also be used as an index.
Only positive numbers less than 232 can be used for these indexes.

The following example creates an array and adds and deletes elements in the created array.

var arr = ["JavaScript"]; // creates an array with only one element.
var element = arr[0];     // reads and assigns the first element of the array.

arr[1] = 10;      // assigns number 10 to the second element. The array length increases from 1 to 2.
arr[2] = element; // assigns the value of variable element to the third element. The array length increases from 2 to 3.

document.write("The elements of array arr are [" + arr + "].<br>"); // outputs all array elements.
document.write("The length of array arr is " + arr.length + ".<br>"); // outputs the array length.

delete arr[2];    // deletes the third element. However, the array length does not change.

document.write("The elements of array arr are [" + arr + "].<br>"); // outputs all array elements.
document.write("The length of array arr is " + arr.length + ".");   // outputs the array length.

In the example above, the third statement attempts to store an element at an index greater than the current length of the array.
JavaScript allows storing elements at indexes beyond the length of the array.
At this time, the array length is automatically extended to that index.

Adding Array Elements

The following are ways to add new array elements in JavaScript.

Syntax

1. arr.push(elementToAdd);       // using the push() method
2. arr[arr.length] = elementToAdd; // using the length property
3. arr[specificIndex] = elementToAdd; // adding by specifying a specific index

Both the push() method and the length property add a new element to the end of the array.

var arr = [1, true, "Java"];

arr.push("Script");           // using the push() method
document.write(arr + "<br>"); // 1,true,Java,Script

arr[arr.length] = 100;        // using the length property
document.write(arr + "<br>"); // 1,true,Java,Script,100

arr[10] = "JavaScript";       // adding by specifying a specific index
document.write(arr + "<br>"); // 1,true,Java,Script,100,,,,,,JavaScript
document.write(arr[7]);       // undefined

In the example above, the length of array arr finally becomes 11.
At this time, only indexes 0, 1, 2, 3, 4, and 10 have array elements, and no array elements exist at the remaining indexes.

A part with no array element corresponding to an index is called an array hole.
In JavaScript, these array holes are treated like elements with the value undefined.
Therefore, when an array hole is referenced as in the example above, undefined is returned.

Array Iteration

When you want to access every element of an array in order, you can use an iteration statement such as a for statement.

var arr = [1, true, "JavaScript"];

var result = "<table><tr>";
for (var idx in arr) {
    result += "<td>" + arr[idx] + "</td>";
}
result += "</tr></table>";

document.write(result);

Array Object

In JavaScript, an array is defined as a collection of ordered values and is handled as an Array object. JavaScript also provides various methods so users can easily perform tasks related to arrays.

The following example shows the results of the typeof operation for an array and each array element.

var arr = new Array(10, "string", false);

document.write((typeof arr) + "<br>");    // object
document.write((typeof arr[0]) + "<br>"); // number
document.write((typeof arr[1]) + "<br>"); // string
document.write(typeof arr[2]);            // boolean