JavaScript Array Methods: Part 2

Last week I covered the array methods .pop(), .push(), .shift() and .unshift(). This week will cover .slice(), .splice(), .filter(), and .reverse(). Ready? Let’s go!

Just as a brief review, these methods are pre-built callback functions that are available to you from JavaScript.

Our beginning array will be myArray = [1,2,3,4,5] and we’ll be “building” on this base array.

.slice()

This method allows us to remove elements from an array. It is non-destructive and can be called either with or without arguments. If called without arguments it creates a copy of the original array, which also means the copy will not automatically update if the original is updated.

slicedArray = myArray.slice()
//slicedArray === [1,2,3,4,5]
//myArray === [1,2,3,4,5]

When called with arguments, you can provide either 1 or 2 arguments. If only providing 1 argument, the slice will run from the index provided to the end of the array.

sliceToEnd = myArray.slice(2)
//sliceToEnd === [3,4,5]
//myArray === [1,2,3,4,5]

With 2 arguments provided, the slice will start at the first argument and end at, but not include, the second argument.

sliceWithTwo = myArray.slice(1,4)
//sliceWithTwo === [2,3,4]
//myArray === [1,2,3,4,5]

We can also use slice to remove either the first or the last element and return a new array by doing this:

remove first element: myArray.slice(1)
//[2,3,4,5]
remove last element: myArray.slice(-1)
//[1,2,3,4]

When we provide a negative index, it will start counting from the last element in the array.

.splice()

This method allows us to return a piece of an array, and it is destructive. It can be called with either 1, 2, or 3+ arguments.

One Argument: myArray.splice(start). This will remove a chunk of our original array beginning at our provided index, and running to the end of the array; a negative argument will cause it to begin at the end of the array.

spliceWithOne = myArray.splice(2)
//spliceWithOne === [3,4,5]
//myArray === [1,2]

Two Arguments: myArray.splice(start, deleteCount). This will remove the number of elements (deleteCount) beginning at the start index.

myArray = [1,2,3,4,5]
spliceWithTwo = myArray.splice(2,2)
//spliceWithTwo === [3,4]
//myArray === [1,2,5]

Three+ Arguments : myArray.splice(start, deleteCount, elementToAdd). Every additional argument provided after the start and deleteCount arguments will be insterted into our original array at our starting index.

myArray = [1,2,3,4,5]
spliceWithMore = myArray.splice(2,2, ‘a’, ‘b’)
//spliceWithMore === [3,4]
//myArray === [1, 2, ‘a’, ‘b’, 5]

Special Note: if you don’t want to actually delete any elements and only want to insert some, you can provide 0 as the deleteCount. This same effect can be accomplished non-destructively by using .slice() and the spread operator.

myArray = [1,2,3,4,5]
newArray = […myArray.slice(0,3), ‘value1’, ‘value2’, …myArray(3)]
//newArray === [1, 2, 3, “value1”, “value2”, 4, 5]
//myArray === [1,2,3,4,5]

.filter()

This method works like a for loop that specifically keeps (or filters) certain values from an array. It creates a new array with all of the elements that match our search; our search is provided as a function.

.filter() receives the same arguments as, and works similarly to, .map(). The only difference here is that our filter needs to return a boolean:

true: keep the element -or- false: filter the element out.

filteredArray = myArray.filter( n => {
 return n % 2 === 0
})
//filteredArray === [2,4]
//myArray === [1,2,3,4,5]

.reverse()

This method reverses an array in place (i.e. destructively) and does not require any arguments.

reversedArray = myArray.reverse()
//reversedArray === [5,4,3,2,1]
//myArray === [5,4,3,2,1]

We can reverse an array non-destructively by using our spread operator to create a copy, and then reverse the copy!

newReverseArray = […myArray]
newReverseArray.reverse()
//newReverseArray === [5,4,3,2,1]
//myArray === [1,2,3,4,5]