Room 51 - JavaScript (Array Methods)

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.