JavaScript Array Basics

An array holds a collection of data in a single variable. The data items in an array are referred to as elements. Each element has an index which starts at zero.[1] Array indexes are used to access and modify elements as well as add new elements, as shown below.

How to Create a JavaScript Array

You can create an array in JavaScript using either an array literal 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:

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

The following shows how to use the array constructor to create an array:

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

You can pass a number to the array constructor to create an array with a length specified:

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

Array literal syntax is generally preferred over the array constructor in modern JavaScript.

The examples above show arrays containing only string data values, but JavaScript arrays can hold data of any type: strings, numbers, booleans, objects, functions, and other arrays:

var ar = ['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 the index in square brackets to access elements of an array:

var 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 also create a new array element using square brackets and an index:

ar[5] = 'fig'; // add new element 

The length Property of an Array

Generally speaking, the length property of an array specifies the number of elements in the array.[2] 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.

  1. Array indexes in JavaScript are numeric. The use of string indexes is discussed in Associative Arrays in JavaScript. ^
  2. 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 the array length are populated with array elements. See David Flanagan's JavaScript: The Definitive Guide for more information. ^