In this tutorial, let’s look at the different ways of adding an item to the beginning of an array in JavaScript.
We’re going to be looking at both mutable (operations that change the value of the original array) and immutable (operations that create a copy with the changed values, so the original array remains intact) methods.
So, let’s get right into it then.
Mutable methods
Let’s look at the mutable methods first.
We’re going to be looking at the unshift and splice methods in this section.
Using the Unshift method
The unshift method is not as popular as it’s counterpart, the push method, but it’s perfect for solving our current problem.
As you probably know, the push method, as the name implies, can be used to push a new item or element into an array.
That’s great! But the issue is, we want our element at the beginning of the array, meaning, it has to take the 0th position, and the rest of the elements should be pushed one step to the right.
But the push method will place the new element at the end of the current array, as in the arr[arr.length] position, where “length” is the previous length of the array.
Unshift, on the other hand, will place our new element at the 0th position, just like we wanted.
Look at the example below:
let arr = [2, 3, 4, 5];
arr.unshift(1);
console.log(`New Array: ${arr}`); //New Array: 1,2,3,4,5
As you can see above, we’ve sent the value 1 through the unshift method, and it’s now the first element if our array.
The unshift method, just like the push method, returns the new length of the array.
So if we log the unshift operation from the example above, you’ll get 5 as the result, as you can see below:
console.log(arr.unshift(1)); //5
Using the splice method
Though the splice method’s purpose is to only remove/replace items of an array, you can manipulate the arguments you send through the function call to achieve a lot more than that.
Splice takes 3 arguments:
1. The starting position (the position from where you need the replacing to happen),
2. The number of items you want removed from the array (from the starting position), and finally,
3. The value(s) you want the removed items replaced with.
So, for example, arr.splice(1, 2,4,5) would replace the 2nd and 3rd items with the values 4 and 5, because we’re starting from the 1st index (2nd element in an array since array indices start from 0) and we’re asking for 2 items to be removed from the starting position.
But in this tutorial, we’re looking at how to add a new element to the beginning of an array without removing any of the current elements.
In that case, we can make the starting position 0 (first element), ask 0 elements to be removed from the starting position (this will effectively push the current elements occupying the positions we’re trying to fill further down the array), and then finally list the values we want added (which is just 1, for this example), as shown below:
arr.splice(0,0,1); //New Array: 1,2,3,4,5
Immutable methods
Now, let’s look at immutable methods of adding items to the beginning of an array.
These methods won’t affect the original array, and you can assign the copy that it creates (with the new element added to it) to a new array if you’d like.
But sometimes, you might want to change the original array, even if you’re using an immutable method.
In that case, just reassign the result of the operation back to the original variable and you’re good to go.
Using the spread operator
Technically, [1, arr] should place 1 at the beginning of the “arr” array, but unfortunately, this method doesn’t work.
Why? Well, arr is of type object and 1 is a number, and they’re just not compatible.
The concatenation should happen on the element level, and not the object level, and that’s where the spread operator comes in.
If you add 3 dots before the array variable (like …arr), then you’re good to go.
The spread operator spreads the items of an array, and this makes it easy to manipulate the array on an element level, as shown below:
arr = [1, ... arr];//New Array: 1,2,3,4,5
Using the concat operator
You can use the concat method as well.
Unlike the spread operator, concat works on the object level.
So, just create a single element array with 1 ( [1] ) and concatenate this array with the original array, as shown below:
arr = [1].concat(arr); //New Array: 1,2,3,4,5
Or, you can use the “+” operator to achieve the same result.
Just like “+” can be used to concatenate two strings, it can be used to concatenate two arrays as well, as shown below:
arr = [1] + arr; //New Array: 1,2,3,4,5
Just make sure that the you have arrays on either side of the operation, or you’ll end up with an error.
Add multiple items to the beginning of an array
Instead of adding just one element to the beginning of an array, you can add any number of them as you want by just modifying the methods we’ve seen so far.
With unshift, just send the values as arguments, separated by commas.
arr.unshift(0,1); //New Array: 0,1,2,3,4,5
The same works for splice as well. From the 3rd argument, any value you send, separated by comma will be considered a new value you want added to the array.
arr.splice(0,0,0,1); //New Array: 0,1,2,3,4,5
For the spread operator, place 0,1 at the beginning of the array.
arr = [0,1,...arr];
For concatenation, create an array with all the elements you want to add, and place this new array as the first operation of the concatenation, as shown below:
arr = [0,1].concat(arr);
arr = [0,1] + arr;
Well, that’s it! We’ve looked at 4 different mutable and immutable ways of adding a new element to an array using JavaScript, and we also looked at how to manipulate these methods to add more than one element at the same time.