JavaScript Array Methods

An array method is an operation that manipulates an array. There are a range of array methods built into the JavaScript language. Each method falls into one of two categories: destructive or nondestructive. See below for some array methods and how to use them. This is not a comprehensive list but does cover some of the more common methods.

Destructive Methods
Push (add to end)
Unshift (add to beginning)
Pop (remove from end)
Shift (remove from beginning)
Splice (replace, insert, or remove from anywhere)

Nondestructive Methods
Spread (copy with new reference)
Slice (copy a limited portion with new reference)

Destructive Array Methods:

A destructive, or mutating, method is a method that modifies the array that it is called upon. To modify an array “in place” is to do so destructively.

Push: array.push(element(s))

The .push method adds an element or multiple elements to the end of an array. This method takes one argument:

1. The element or elements to be added

and adds it or them to the end of the original array. This method returns the number of elements in the modified array.

> let array = [1,2,3]

> array.push(4,5,6)

< 6

> array

<[1,2,3,4,5,6]

Unshift: array.unshift(element(s))

The .unshift method adds an element or elements to the beginning of an array. This method takes one argument

1. the element or elements to be added

and adds them to the start of the original array. This method returns the number of elements in the modified array.

> let array = [4,5,6]

> array.unshift(1,2,3)

< 6

> array

<[1,2,3,4,5,6]

Pop: array.pop( )

The .pop method removes the last element of an array. This method does not take any arguments. This method returns the element that was removed.

> let array = [1,2,3,4,5,6,7]

> array.pop()

< 7

> array

< [1,2,3,4,5,6]

Shift: array.shift( )

The .shift method removes the first element of an array. This method does not take any arguments. This method returns the element that was removed.

> let array = [0,1,2,3,4,5,6]

> array.shift()

< 0

> array

< [1,2,3,4,5,6]

Splice: array.splice(index, quantity, element(s))

The .splice method can remove and/or add an element or elements from any single place in the array. This method takes a minimum of two and a maximum of three arguments

1. REQUIRED: The index at which point elements are to be removed or added
2. REQUIRED (can be zero if no elements are to be removed): The number of elements that are to be removed from the array.*
3. OPTIONAL: The element or elements that are to be added.

• *Elements are removed in an ascending index order. array.splice(3,4) will remove elements with indices of 3, 4, 5 and 6, in other words, the 4 elements after and including the element with an index of 3.

This method returns a new array containing the elements that were removed. If no elements were removed the method returns an empty array.

> let array = [1,65,48,5,6]

> array.splice(1,2,"two","three","four")

< [65,48]

> array

< [1,"two","three","four",5,6]

Nondestructive Array Methods:

A nondestructive, or non-mutating, method does not modify the array that it is called upon. Instead it creates a copy of the array that it is called upon and leaves the initial array intact.

Spread: …array

The spread operator makes a copy of the array that it acts on and returns a new array identical to the original. This method does not take any arguments. This method is often used to

1. Make copies of arrays with new elements before or after
2. Make copies of arrays and other objects to pass-by-value instead of pass-by-reference.

> let array1 = [2,3,4,5]

> let array2 = [1,...array1,6]

> array2

< [1,2,3,4,5,6]

Slice: array.slice(index, quantity, element(s))

The .slice method outputs 0 or more elements from an array. This method can take zero, one, or two arguments.

0 Arguments: The slice operator will return a copy of the array that it acts upon.

1 Argument: The slice operator will return a new array consisting of all of the elements whose index is equal to or greater than the input in order of lowest to highest index.

2 Arguments: The slice operator will return a new array consisting of all of the elements whose index is equal to or greater than the first input and less than the second in order of lowest to highest index.

> let array1 = [1,2,3,4,5,6,7,8]

> let array2 = array1.slice(0,5)

> array2

< [1,2,3,4,5,6]