Introducing JavaScript Arrays

An array holds a collection of data in a single variable. The data items in an array are referred to as elements. Array elements are indexed using positive integers starting from zero. Array indexes are used to access and modify elements' values as well as add new elements, as shown below.

How to Create a JavaScript Array

You can create an array in JavaScript using an array literal, the Array.of method, or the array constructor. The following demonstrates how to create an array using an array literal, both an empty array and one initialized with a few elements:

let ar = []; // create empty array
// create array and populate with elements
let ar2 = ['apple', 'orange', 'pear', 'banana', 'strawberry'];

You can use the Array.of method to create these same arrays as follows:

let ar = Array.of(); // create empty array
// create array and populate with elements
let ar2 = Array.of('apple', 'orange', 'pear', 'banana', 'strawberry');

Or you could use the array constructor to create the arrays:

var ar = new Array(); // create empty array
// create array and populate with elements
var ar2 = new Array('apple', 'orange', 'pear', 'banana', 'strawberry');

You can pass a number to the array constructor to specify how many elements the new array will contain:

var ar3 = new Array(5); // create array with a length of 5

You can't use the array constructor to create a single-element array whose value is a positive integer, but you can use the Array.of method to do so:

// create array with single element having integer value
let ar4 = Array.of(5);

JavaScript arrays can hold data of any type: strings, numbers, booleans, objects, functions, and other arrays, as this example demonstrates:

let ar5 = ['John', 26, true, new Date(), ['Kayla', 'Cody', 'Mia'] ];

Using Index to Access Array Elements

As mentioned above, the elements of an array have an index that is used to access or change their values. The following demonstrates how to use an index in square brackets to access elements of an array:

let ar = ['apple', 'orange', 'pear', 'banana', 'strawberry'];
// access first element in array
alert( ar[0] ); // apple
// access third element in array
console.log( ar[2] ); // pear

You can change the value of an existing array element as follows:

ar[4] = 'raspberry'; // change ar[4] from strawberry to raspberry

You can add a new array element by enclosing in square brackets a positive integer equal to or greater than the current length of the array:

ar[5] = 'fig'; // add new element at end of array

The length Property of an Array

Generally speaking, the length property of an array specifies the number of elements in the array.[1] Since JavaScript arrays are zero-based, the length is always one greater than the highest index value. You can use length to add an element to the end of an array:

alert( ar.length ); // 6
ar[ar.length] = 'pomegranate'; // add pomegranate to end of array
console.log( ar );
 // ["apple", "orange", "pear", "banana", "raspberry", "fig", "pomegranate"]
alert( ar.length ); // 7

The length property is a read/write property. You can set the value of the length property to a number less than or equal to the highest index value to reduce the number of elements in an array:

ar.length = 4; // set length to remove elements
console.log( ar ); // ["apple", "orange", "pear", "banana"]

JavaScript Array Methods

JavaScript's Array object provides a number of useful methods for working with arrays: to add, remove, or extract elements of an array and more. Some of these methods (such as push, pop, shift, unshift, and splice) modify the array on which they are invoked. Others (such as concat and slice) return a new array.

See JavaScript Arrays: Tutorial Overview for a list of these methods as well as links to pages where they are described and demonstrated.

Back to top

  1. The length of an array is greater than the number of elements when the array is sparse, that is, when not all index values between zero and array length-1 are populated with array elements. For example, when you use the array constructor to specify the number of elements, the array is sparse until you provide values for those elements. ^