Adding Stuff to an Array

4 Ways to Add Stuff to an Array

When it comes to writing code, there are multiple ways to get things done. In this post, I’ll cover 4 ways of adding items to an Array in JavaScript.

Adding an item to the end with .push()

One of the most common operations you’ll use when working with Arrays is adding an item to the end. For this, we will use the .push() method.

When you .push() an item onto the Array, it will update (or “mutate”) with the item at the end of the list.

const testArray = [1, 2, 3]

testArray.push(4) 

console.log(testArray) // prints out `[1, 2, 3, 4]`

In addition to adding the item to the end of the list, the new length of the Array will be returned when calling .push().

Here’s an example:

testArray.push(3) // returns `5`

console.log(testArray) // prints out `[1, 2, 3, 4, 3]`

const shouldBeSix = testArray.push(2)

console.log(ShouldBeSix) // prints out `6`
console.log(testArray) // prints out `[1, 2, 3, 4, 3, 2]`
testArray.push(3) // returns `5`
 
console.log(testArray) // prints out `[1, 2, 3, 4]`
 
const shouldBeSix = testArray.push(2)
 
console.log(ShouldBeSix) // prints out `6`
 
console.log(testArray) // prints out `[1, 2, 3, 4, 3, 2]`

Inserting to the Front of an Array with .unshift()

The opposite of .push() is .unshift(). As you may expect, after adding stuff to the front of the Array the new length will be returned.

Let’s keep going with our testArray from earlier.

testArray.unshift(-1, 0) // returns 8

console.log(testArray) // prints out `[-1, 0, 1, 2, 3, 4, 3, 2]

Replacing Items at a Certain Index with .splice()

If you have a list of things in an Array and you need to change out things not at either end of it, you’ll want to use .splice().

The splice() method takes three arguments.

The first argument is the Array index you want to start your operation from. Just for the sake of writing it down, remember that the first index is 0.

The second argument is the number of items you want to delete from the array to be replaced with…

The item(s) you provide to the third parameter.

In addition to mutating the array you started with, using .splice() will return an array of the items that were removed.

Let’s look at a few different examples, starting with our testArray.

console.log(testArray) // prints out `[-1, 0, 1, 2, 3, 4, 3, 2]`

testArray.splice(6, 2, 5, 6) // returns [3, 2]

console.log(testArray) // prints out `[-1, 0, 1, 2, 3, 4, 5, 6]`

We started at index 6 of testArray, and replaced 2 items with 5 and 6. We were then returned an array [3, 2]– the items that we replaced.

Here’s another example of splicing without doing any replacement:

const drinks = ['coffee', 'water', 'sprite']
 
drinks.splice(2, 0, 'cough syrup')
 
console.log(drinks) // prints out `['coffee', 'water', 'cough syrup', 'sprite']`

Since we didn’t replace any items, we put in cough syrup before sprite.

Let’s take our 'coffee' and ’water’ out of the drinks array, and put them in a new morningDrinks array:

const morningDrinks = drinks.splice(0, 2)

console.log(drinks) // prints out `['cough syrup', 'sprite']`
console.log(morningDrinks) // prints out `['coffee', 'water']`

Combining Two Arrays with concat

We can combine two arrays by calling .concat() and passing in the array we want to add:

console.log(drinks) // prints out `['cough syrup', 'sprite']`
${' '}
const doubleCup = ['styrofoam cup', 'styrofoam cup', 'crushed ice'].concat(drinks)
${' '}
console.log(doubleCup) // prints `['styrofoam cup', 'styrofoam cup', 'crushed ice', 'cough syrup', 'sprite']` 

These are some of the most common Array methods (not counting map(), filter(), and reduce(), but that’s a story for another time.

Check out my other articles, or sign up for my newsletter:

No spam. Just code stuff, unsolicited music recommendations, etc.