How to Use Javascript to Add to an Array

Last Updated: Wednesday 8th February 2023

by Kris Barton

Do you want to use Javascript to add data to an array but are wondering what the method is? Well there are a number of ways you can do it, but the array.push(), array.unshift(), array.splice() or the array.concat() methods are probably the ones you’re looking for.

Let’s examine these Javascript methods and see what each of them can do.

There are 4 ways you can Use Javascript to add to array meme

Using Javascript to Add to an Array with Array Push

The array.push() Javascript method allows you to easily add a value to the end of an array. Here’s how it works:

let items = [‘item1’, ‘item2’];
items.push(‘item3’); 
//Output: item1, item2, item3

As you can see from the example above, adding a value to the array is as simple as adding the .push() method to your declared array variable and placing the value you want to add inside it.

It really is that simple.

But what if you wanted to use Javascript to add multiple items to an array? The array.push() method can totally do that too.

let items = [‘item1’, ‘item2’];
items.push(‘item3’, ‘item4’); 
//Output: item1, item2, item3,  ‘item4’

Pretty easy, right? Let’s take a look at the array.unshift() Javascript method in action.

Using Javascript to Add to an Array with Array Unshift

The array.unshift() Javascript method is the polar opposite of array.push(), allowing you to add values to the start of any array. Here’s how it works:

let items = [‘item1’, ‘item2’];
items.unshift(‘item3’); 
//Output: item3, item1, item2

As you see from the example above, the array.unshift() method works exactly like the array.push() method. You attached the .unshift() method to our array variable and then place the value we want to add to the array inside it.

Again, super simple to use.

And like the array.push() Javascript method, array.unshift() allows for multiple items to be added to the start of the array:

let items = [‘item1’, ‘item2’];
items.push(‘item3’, ‘item4’); 
//Output: item3, item4, item1, item2

Using Javascript to Add to an Array with Array Splice

But what if you wanted to add a value to an array, but in a specific place? Well, you could use the array.splice() Javascript method to accomplish that.

With array.splice() you can add values to an array, but you could also replace items too.

The syntax of the Javascript method is this:

array.splice(index, howmany, newvalues);

It breaks down like this:

The index refers to the location within the array where you want to place any new items.
The howmany refers to the number of items you’d like to replace (0 means you remove nothing just add items).
The newvalues refers to any new values you’d like to add to the array.

So for example, let’s say I have an array like this:

let items = ['item1', 'item2', 'item4', 'item5'];

And I want to add a value of ‘item3’ in between ‘item2’ and ‘item4’. Then you would do this:

items.splice(2, 0, 'item3');
//Output item1, item2, item3, item4, item5

But what if I wanted to add that new value into the array, but remove the last 2 items? Then this would do the job:

let items = ['item1', 'item2', 'item4', 'item5'];
items.splice(2, 2, 'item3');
//Output item1, item2, item3

Of course, using the array.splice() Javascript method, you’re reliant on already knowing what the index is of the value you want to include.

Splicing Into an Array at a Specific Place Based on an Array Value

What if you didn’t know the index of where you wanted to splice in a new value? What if you wanted to add the value ‘item3’ after ‘item2’, without knowing where in the array ‘item2’ actually is?

Well, we could do a for loop to help us out with that:

let items = ['item1', 'item2', 'item4', 'item5'];
let position = 0;

for(let i = 0; i < items.length; i++) {
    if(items[i] === 'item2') {
      position = i+1;
    }  
} 

items.splice(position, 0, 'item3');

//output of items is item1, item2, item3, item4, item5;

As you can see from the example above, I’m setting up two variable first, the array itself and a placeholder variable which will store the position in the array we’re going to include our new value.

Then, we loop through the array using the Javascright .length function and standard increment variable. Inside the loop, we’re access each item of the array and checking for our item2 value. When our value has been found, set our position variable to be the next item.

We’re doing this because we want to insert our item after ‘item2’ – if we wanted to insert it before ‘item2’, we wouldn’t need to increment the iteration number by 1 to mark the position.

Then, outside the loop, we’re splicing the array. We’re using the position value we obtained with the loop as the index where we want the splice to happen, we’re setting a remove value of 0 because in this case we don’t want to cut any values out of the array and finally we’re declaring what value we’d like to insert.

Using Javascript to Combine Arrays

What if the value we’re trying to add to the array is actually another array? What do we do then?

Then we use the array.concat() Javascript Method. It works like this:

let arr1 = ['item1', 'item2'];
let arr2 = ['item3', 'item4'];

let items = arr1.concat(arr2);
//Output of items is: item1, item2, item3, item4.
//Output for arr1 is: item1, item2.
//Output for arr2 is: item3, item4.

Combining arrays in Javascript is as simple as the above example and much like other examples of adding values to arrays, more than 2 arrays can be combined.

Like this:

let arr1 = ['item1', 'item2'];
let arr2 = ['item3', 'item4'];
let arr3 = ['item5', 'item6'];
let arr4 = ['item7', 'item8'];

let items = arr1.concat(arr2, arr3, arr4);
//Output of items is: item1, item2, item3, item4, item5, item6, item7, item8.
//Output for arr1 is: item1, item2.
//Output for arr2 is: item3, item4.
//Output for arr3 is: item5, item6.
//Output for arr4 is: item7, item8.

Pretty cool and and easy stuff, right?

The array.concat() Javascript function works by create a new array based on all the arrays combined. It places the array items in the newly create array the order in which they’re included.

So what that means is because we declare arr1 as the starting array, the values for the new array will begin whatever values were held with the arr1 array.

To demonstrate what I mean by this, let’s change up the code a little:

let arr1 = ['item1', 'item2'];
let arr2 = ['item3', 'item4'];
let arr3 = ['item5', 'item6'];
let arr4 = ['item7', 'item8'];

let items = arr2.concat(arr1, arr3, arr4);
//Output would be: item3, item4, item1, item2, item3, item4, item5, item6, item7, item8.

The output changes because in this example we’re starting with arr2 which contains values ‘item3’ and ‘item4’.

Equally, if we change the order in which we list the arrays within the concat function we’d get a different output.

let arr1 = ['item1', 'item2'];
let arr2 = ['item3', 'item4'];
let arr3 = ['item5', 'item6'];
let arr4 = ['item7', 'item8'];

let items = arr2.concat(arr3, arr4, arr1);
//Output would be: item3, item4, item3, item4, item5, item6, item7, item8, item1, item2.

Conclusion

With Javascript there are a number of ways you can add a value (or values) to array, it really just depends on how you want to add those values to your array and how complex it needs to be.

If you need to know more information about removing values from an array, then I do recommend you check out our Javascript Remove from Array article.

For more information about everything we’ve discussed above, check out the further reading below.

Let's see if we can help...