Introduction
This is the second article in the JavaScript Array Methods series — a series created to introduce beginners to array methods, their syntax, and usage. In this article, We will discuss the various array methods used to add and remove items in an array, as well as provide tips I use for memorizing some of them.
Prerequisites
It'll be great to read the introductory article. It gives a quick overview of array methods and why they're important. It's not mandatory, though :)
Adding items to an array
The following array methods are used to add items to an array.
concat()
The concat() array method enables you to combine two or more arrays or add items to an array. It always returns a new array and does not alter the original array.
To merge two or more arrays, you need to call (invoke) the concat() method on one of the arrays and pass the other(s) as arguments.
The same applies to adding an item. Call the concat() method on the array, and pass the item as an argument.
Syntax:
array0.concat(array1, array2,..arrayN)
Usage:
// Merging two arrays
const insects = ["butterfly", "moth"]
const mammals = ["dog", "cat"]
const animals = insects.concat(mammals)
console.log(animals) // ["butterfly", "moth", "dog", "cat"]
// Merging three arrays
const letters = ["m", "n", "0"]
const numbers = [20, 40]
const symbols = ["/", "$", "@"]
const characters = letters.concat(numbers, symbols)
console.log(characters) // ["m", "n", "0", 20, 40, "/", "$", "@"]
// Adding an item to an array
const pets = ["dog", "rabbit", "parrot"]
const myPets = pets.concat("cat")
console.log(myPets) // ["dog", "rabbit", "parrot", "cat"]
push()
The push() array method is used to add items to the end of an array. Unlike the concat() method, using push() modifies the original array. That is, the original array is updated with the newly added item(s) after push() is called on it. push() is more frequently used than concat() due to its faster execution speed.
To add an item to the end of an array using push(), simply call the method on the array and pass in the item as an argument.
Syntax:
array.push(item)
array.push(item1, item2,..itemN)
Usage:
// Adding one item
const superHeroes = ["blackPanther", "antMan", "spiderMan"]
superHeroes.push("hulk")
console.log(superHeroes) // ["blackPanther", "antMan", "spiderMan", "hulk"]
// Adding two items
const pokemon = ["pikachu", "charmander", "dratini"]
pokemon.push("lillipup", "snorunt")
console.log(pokemon) // ["pikachu", "charmander", "dratini", "lillipup", "snorunt"]
unshift()
While push() and concat() add items to the end of an array, unshift() adds items to the beginning of arrays. unshift() alters the original array just like push does.
To add an item to the beginning of an array using unshift(), call the method on the array and pass the items to be added as arguments.
Syntax:
array.unshift(item)
array.unshift(item1, item2,..itemN)
Usage
// Adding one item
const superHeroes = ["blackPanther", "antMan", "spiderMan"]
superHeroes.unshift("hulk")
console.log(superHeroes) // ["hulk" ,"blackPanther", "antMan", "spiderMan" ]
// Adding two items
const pokemon = ["pikachu", "charmander", "dratini"]
pokemon.unshift("lillipup", "snorunt")
console.log(pokemon) // ["lillipup", "snorunt", "pikachu", "charmander", "dratini"]
I used the same example from the push method so you notice the difference :)
Removing items from an array
The following array methods remove items from an array.
pop()
pop() can be considered the inverse of push(). It is used to remove the last item in an array. It modifies the original array and returns the removed item.
To remove the last item of an array using pop(), simply call the method on the array.
pop() does not require arguments.
Syntax:
array.pop()
Usage:
const pokemon = ["pikachu", "charmander", "dratini"]
// To view the removed item we can store the statement in a variable and console.log it
const removedItem = pokemon.pop()
console.log(pokemon) // ["pikachu", "charmander"]
console.log(removedItem) // "dratini"
shift()
You're right if you guessed shift() as the inverse of unshift(). shift() works like pop() but removes the first item of an array. It also modifies the array and returns the removed item.
To remove the first item of an array using shift(), simply call the method on the array.
shift() does not require arguments.
Syntax:
array.shift()
Usage:
const pokemon = ["pikachu", "charmander", "dratini"]
// To view the removed item we can store the statement in a variable and console.log it
const removedItem = pokemon.shift()
console.log(pokemon) // ["charmander", "dratini"]
console.log(removedItem) // "pikachu"
slice()
The slice() method like the name suggests slices (removes) out a part of the items in the array and returns a new array with the sliced items. slice() takes one or two arguments.
A single argument specifies the starting index of the array item(s) to be sliced. If no second argument is provided, the array will be sliced from the starting index specified to the last index.
Two arguments specify the starting and ending indexes of the array items to be sliced, with the ending index excluded.
Now, this sounds tricky and confusing, but don’t fret, we’ll see examples in the usage section shortly.
The arguments can be positive or negative numbers that represent indexes of the items in the array. Positive indexes start at the beginning of the array while negative indexes start at the end of the array.
Syntax:
array.slice(startIndex)
array.slice(startIndex, endIndex)
Usage for positive indexes:
const cars = ["BMW", "Hyundai", "Toyota", "Honda", "Kia"]
// specifying start index only
const slicedCars1 = cars.slice(2)
// specifying start and end indices
const slicedCars2 = cars.slice(1, 3)
// the original array is not modified
console.log(cars) // ["BMW", "Hyundai", "Toyota", "Honda", "Kia"]
// A new array is returned with the sliced items
console.log(slicedCars1) // ["Toyota", "Honda", "Kia"]
console.log(slicedCars2) // ["Hyundai", "Toyota"]
slicedCars1 returns an array starting from the item at index 2, which is "Toyota". It ends at the last item in the array, "Kia" as no end index was specified.
slicedCars2 returns the sliced array starting from the item at index 1, which is "Hyundai". It ends at the item at the index before 3, which is "Toyota", as the slice method does not include the specified end index in the returned array.
Usage for negative indexes
const cars = ["BMW", "Hyundai", "Toyota", "Honda", "Kia"]
// specifying start index only
const slicedCars3 = cars.slice(-2)
// specifying start and end indices
const slicedCars4 = cars.slice(1, -3)
// the original array is not modified
console.log(cars) // ["BMW", "Hyundai", "Toyota", "Honda", "Kia"]
// A new array is returned with the sliced items
console.log(slicedCars3) // ["Honda", "Kia"]
console.log(slicedCars4) // ["Hyundai"]
slicedCars3 returns an array starting from the item at index -2, which is "Honda" (remember negative indexes start their count from the end of the array). It ends at the last item in the array, "Kia" as no end index was specified.
slicedCars3 returns the sliced array starting from the index of 1, which is "Hyundai". It ends at the index after -3, which is still "Hyundai", as the slice method does not include the specified end index in the returned array.
How about a method that does both?
splice()
The splice() method is used to add and/or remove items in an array. splice() modifies the original array.
The splice() method takes at least two arguments. The first is the start index, the second is the delete count, and the remaining are items to be added to the array.
Syntax:
array.splice(startIndex, deleteCount)
array.splice(startIndex, deleteCount, item)
array.splice(startIndex, deleteCount, item1, item2,..itemN)
Usage for adding items:
const letters = ["a", "b", "c", "f", "g", "h"]
// start at index 3, remove 0 items and add 2 items
letters.splice(3, 0, "d", "e")
console.log(letters) // ["a", "b", "c", "d", "e", "f", "g", "h"]
This example tells splice() to start at index 3 which is “f”, remove no item, and add two items; “d” and “e”.
Usage for removing items:
const letters = ["a", "b", "c", "d", "e", "f", "g", "h"]
// start at index 4, remove 3 items
letters.splice(4, 3)
console.log(letters) // ["a", "b", "c", "d", "h"]
This example tells splice() to start at index 4 which is “e”, and remove 3 items; “e”, “f”, and “g”.
Usage for adding and removing items:
const letters = [ "f", "g", "d"]
// start at index 0, remove 2 items and add 3 items
letters.splice(0, 2, "a", "b", "c")
console.log(letters) // ["a", "b", "c", "d"]
This example tells splice() to start at index 0 which is “f”, remove 2 items; “f” and “g" and add 3 items; "a", "b", and "c".
Tips for memorizing
If your head is spinning, that’s fine 😂
You will not master everything on the first attempt. It may take several tries but with practice, these will become second nature to you. Also, you may not need to memorize these as they are easily accessible on the internet.
Here are some tips that help me memorize:
“Can Peter Piper Slay Sea Shells Unprovoked?” corresponds to
concat(),push(),pop(),shift(),slice(),splice(), andunshift().push()andunshift()both have a “u” and they do similar things to an array, i.e. add items.
What other tips do you know of or use? Let me know in the comments :)
Conclusion
In this article, we looked at the different array methods used to add and remove items from an array, their syntax, usage, and tips to memorize them.
To add items to an array, the following array methods can be used:
concat()push()unshift()
To remove items in an array, the following array methods can be used:
pop()shift()slice()
To add and remove items in an array at the same time, splice() can be used.
Thanks for reading!