JavaScript - Array Methods

Use arrays for ordered lists of values. The elements in the array each have an index. The indexes are zero-based, i.e. the first element has an index of zero. Each array has a length property which is one greater than the largest index in the array.

var colours; colours = [ "red", "blue", "green" ]; console.log(colours[0]); // red console.log(colours[2]); // green console.log(colours[1]); // blue console.log(colours.length); // 3

Selected Methods

Method Description
forEach Passes each element of an array to a specified function. The specified function is also passed the index of the current element and the whole array.
push Appends one or more elements to the end of an array.
pop Removes and returns the last element in an array.
unshift Prepends one or more elements at the start of an array.
shift Removes and returns an element from the start of an array.
slice Creates a new array from consecutive elements of an original array. The original array is unchanged. You can specify an index at which to start copying and an index at which to stop copying.
splice Changes an array by removing a specified number of consecutive elements and inserting new elements. It returns the removed elements.

forEach

The forEach method passes each element of an array to a specified function.

var colours = [ "red", "blue", "green" ]; function showColour (colour) { console.log("The colour is " + colour); } colours.forEach(showColour); // The colour is red // The colour is blue // The colour is green

The specified function is also passed the index of the current element and the whole array.

var colours = [ "red", "blue", "green" ]; function showColour (colour, index, array) { var colourNumber = index + 1; var length = array.length; var message = "The colour is "; message += colour; message += " (" + colourNumber; message += " of " + length + ")"; console.log(message); } colours.forEach(showColour); // The colour is red (1 of 3) // The colour is blue (2 of 3) // The colour is green (3 of 3)

push

The push method appends one or more elements to the end of an array.

var colours = [ "red", "blue", "green" ]; // append a single element colours.push("yellow"); console.log(colours); // ["red", "blue", "green", "yellow"] // append two elements colours.push("cyan", "magenta"); console.log(colours); // ["red", "blue", "green", "yellow", "cyan", "magenta"]

pop

The pop method removes and returns the last element in an array.

var colours = [ "red", "blue", "green" ]; // remove the last element var last = colours.pop(); console.log(colours); // ["red", "blue"] console.log(last); // "green"

unshift

The unshift method prepends one or more elements at the start of an array.

var colours = [ "red", "blue", "green" ]; // prepend one element colours.unshift("cyan"); console.log(colours); // ["cyan", "red", "blue", "green"] // prepend two elements colours.unshift("orange", "magenta"); console.log(colours); // ["orange", "magenta", "cyan", "red", "blue", "green"]

shift

The shift method removes and returns an element from the start of an array.

var colours = [ "red", "blue", "green" ]; // remove the first element var first = colours.shift(); console.log(colours); // ["blue", "green"] console.log(first); // "red"

slice

The slice method creates a new array from consecutive elements of an original array. The original array is unchanged.

var colours = [ "red", "blue", "green", "cyan", "magenta" ]; // copy the whole array var coloursCopy = colours.slice(); console.log(coloursCopy); // ["red", "blue", "green", "cyan", "magenta"]

You can also specify an index at which to start copying.

var colours = [ "red", "blue", "green", "cyan", "magenta" ]; // copy from index 2 (i.e. the third element) var coloursCopy = colours.slice(2); console.log(coloursCopy); // ["green", "cyan", "magenta"] //copy from the second-to-last element var coloursCopy = colours.slice(-2); console.log(coloursCopy); // ["cyan", "magenta"]

You can specify an index at which to stop copying.

var colours = [ "red", "blue", "green", "cyan", "magenta" ]; // copy from index 2. stop copying from index 4 var coloursCopy = colours.slice(2, 4); console.log(coloursCopy); // ["green", "cyan"] //copy from index 2. stop copying from the second-to-last element var coloursCopy = colours.slice(2, -2); console.log(coloursCopy); // ["green"]

splice

The splice method changes an array. You can remove consecutive elements and insert new elements. It returns the removed elements.

var colours = [ "red", "blue", "green", "cyan", "magenta" ]; // remove one element, starting at index 2. var removed = colours.splice(2, 1); console.log(colours); // ["red", "blue", "cyan", "magenta"]; console.log(removed); // ["green"] // replace "blue" and "cyan" with "pink" // i.e. remove 2 elements, starting at index 1 and // insert "pink" in the elements' place var removed = colours.splice(1, 2, "pink"); console.log(colours); // ["red", "pink", "magenta"]; console.log(removed); // ["blue", "cyan"]

Further Help

You can find an excellent reference of properties and methods on the Mozilla Developer Network Array page.