Array methods

You need to know how to do 3 things with arrays:

1. Find the position of an item
2. Add an item to the array
3. Remove an item from the array

As you go through this lesson, you’ll notice there are many ways to do it in JavaScript. They are all correct. What you need to learn (over time) is to choose the methods you prefer.

For now, your job is to understand how each method works. Don’t try to evaluate which is better. You’ll learn my preferred methods (and why I prefer them) as you go through the course.

Finding the position of an item

You can use indexOf to find a primitive value in the array.

const index = array.indexOf(thing)

• If thing exists, indexOf returns the index you’re looking for.
• If thing does not exist indexOf returns -1.

const fruitBasket = ['apple', 'banana', 'orange', 'pear']

const posOfBanana = fruitBasket.indexOf('banana') // 1 (Second item)
const posOfKiwi = fruitBasket.indexOf('kiwi') // -1 (Not found)

Note: indexOf only works with primitive values. If you want to find the index of an object, array, or function, you need to use findIndex. You will read about findIndex later in the course. We don’t need it now.

Adding items to an array

You can add items in three ways:

1. To the start of an array
2. To the end of an array
3. To the middle of an array

Let’s focus on adding items to the start and end first. We’ll talk about adding items to the middle later in this lesson.

Adding items to the start

You can use unshift to add items to the start of an array.

const array = [3, 4, 5]
array.unshift(2)

console.log(array) // [2, 3, 4, 5]

If you want to add more items, you can separate each item with , in the unshift method.

const array = [3, 4, 5]
array.unshift(1, 2)

console.log(array) // [1, 2, 3, 4, 5]

Adding items to the end

You can add items to the end of an array with push.

const array = [3, 4, 5]
array.push(6)

console.log(array) // [3, 4, 5, 6]

If you want to add more items, you can separate each item with , in the push method.

const array = [3, 4, 5]
array.push(6, 7)

console.log(array) // [3, 4, 5, 6, 7]

Removing items from an array

You can remove items in three ways:

1. From the start
2. From the end
3. From the middle

Again, we will talk about start and end first. We’ll leave middle for later.

Removing items from the start

You can use shift to remove items from the start of an array. This method changes the original array.

const array = [3, 4, 5]
const itemOne = array.shift()

console.log(itemOne) // 3
console.log(array) // [4, 5]

If you want to remove 2 (or more) items, you can use shift 2 (or more) times.

const array = [3, 4, 5]
const itemOne = array.shift()
const itemTwo = array.shift()

console.log(itemOne) // 3
console.log(itemTwo) // 4
console.log(array) // [5]

Removing items from the end

You can remove an item from the end with pop.

const array = [3, 4, 5]
const lastItem = array.pop()

console.log(array) // [3, 4]
console.log(lastItem) // 5

If you want to remove 2 (or more) items, you can use pop 2 (or more) times.

const array = [3, 4, 5]
const lastItem = array.pop()
const secondLastItem = array.pop()

console.log(array) // [3]
console.log(lastItem) // 5
console.log(secondLastItem) // 4

The almighty splice method

splice lets you add items to any position. It also lets you remove items from any position. Its syntax looks a bit confusing, but it’s super convenient.

Here’s the syntax:

const deletedItems = array.splice(index, deleteCount, itemsToAdd)

• index is the position to start modifying the array.
• deleteCount is the number of items you want to delete.
• itemsToAdd is items you want to add, each separated by ,.

Adding items with splice

You can use splice to add items to the start of an array.

const array = [3, 4, 5]
array.splice(0, 0, 1, 2)

console.log(array) // [1, 2, 3, 4, 5]

Here’s what we did with splice:

1. First argument (0): Start at index 0.
2. Second argument (0): Delete 0 items.
3. Third and fourth argument: Items we want to add.

You can use splice to add items to the end of an array. (But it’s easier to use push).

const array = [3, 4, 5]
array.splice(array.length, 0, 6, 7)

console.log(array) // [3, 4, 5, 6, 7]

Here’s what we did:

1. First argument (array.length): Start modifying the array at array.length, which means we start modifying the array AFTER the last item.
2. Second argument (0): Delete 0 items.
3. Third and fourth argument: Items we want to add.

You can also use splice to add items to the middle of an array.

const array = [3, 4, 7]
array.splice(2, 0, 5, 6)

console.log(array) // [3, 4, 5, 6, 7]

Here’s what we did:

1. First argument (2): Start modifying the array at index 2. This means we start modifying the array between the second and third items.
2. Second argument (0): Delete 0 items.
3. Third and fourth argument: Items we want to add.

Removing items with splice

You can use splice to remove items from the start of an array.

const array = [3, 4, 5]
const deleted = array.splice(0, 2)

console.log(deleted) // [3, 4]
console.log(array) // [5]

Here’s what we did:

1. First argument (0): Start at index 0.
2. Second argument (2): Delete 2 items.

You can use splice to remove items from the end of an array.

const array = [3, 4, 5]
const deleted = array.splice(array.length - 2, 2)

console.log(array) // [3]
console.log(deleted) // [4, 5]

Here’s what we did:

1. First argument (array.length - 2): Modifies the array at index array.length - 2, which is 3 - 2 = 1. So we remove items from second item onwards.
2. Second argument (2): Delete 2 items.

You can also use splice to remove items from the middle of an array.

const array = [3, 4, 9, 8, 5]
const deleted = array.splice(2, 2)

console.log(deleted) // [9, 8]
console.log(array) // [3, 4, 5]

Here’s what we did:

1. First argument (2): Start modifying the array at index 2. This means we start deleting the third item.
2. Second argument (2): Delete 2 items.

Making a copy of an array

You can make a copy of an array with slice. If you use the methods on the new array, you won’t change the original array. (This would be helpful for the exercise below).

const array = [3, 4, 5]
const copy = array.slice()

copy.push(6)

console.log(array) // [3, 4, 5]
console.log(copy) // [3, 4, 5, 6]

Exercise

The following questions require you to make use of the people array provided below. To make like easier for you, use slice to make a copy of the array before answer each question.

1. What is the index of Mahatma Gandhi in this list of people? Use indexOf.
2. Add Winston Churchill and Albert Einstein to the start of the list.
   1. With unshift
   2. With splice
3. Add Charles Darwin and Walt Disney to the end of the list.
   1. With push
   2. With splice
4. Add Pablo Picasso and Ludwig van Beethoven after Mahatma Gandhi. Use splice.
5. Remove Benjamin Franklin and Thomas Edison
   1. With shift
   2. With splice
6. Remove Napoleon Bonaparte and Abraham Lincoln
   1. With pop
   2. With splice
7. Remove Mahatma Gandhi with splice

Here’s the people array:

let people = [
  'Benjamin Franklin',
  'Thomas Edison',
  'Franklin Roosevelt',
  'Mahatma Gandhi',
  'Napoleon Bonaparte',
  'Abraham Lincoln',
]