Add and remove elements to arrays in Javascript

The original article is written here on my blog and has code images attached as well -> https://easyontheweb.com/add-and-remove-elements-in-arrays-in-javascript/

Add and remove elements in arrays in Javascript – seems like a very easy topic and so it is but what I’ve always felt is that all the methods and things that JS provides us to accomplish this go under-appreciated at times. For that purpose, I decided to write this article about some of the best methods we can use to add and remove elements in arrays in Javascript.

In this article we’ll be covering push , pop , shift , unshift ,concat, splice , slice and also on how to use the ES6 spread operator for javascript arrays.

Another motivation behind writing this article are my days in C language where most of these things had to be done manually and not many methods were available out of the box to manipulate arrays. Javascript though is a scripting language and we do get a lot of methods to work with arrays here, so why not ? I see nothing wrong with this.

So, in this article we’ll go one by one (and in the first couple of cases two by two) over these different methods and which one is suitable to be used in which scenarios.

Push and Pop
One of the most frequently used javascript methods has to be push. It does a simple thing.

Push -> Adds an element to the end of the array.

Couldn’t be any simpler right. In most of the cases the place where you do want to add a new element would be the last position of the array and that is where push works best. One thing you must note though is that push actually manipulates the current array reference, it does not create a new array and return it. We’ll learn more about this when we compare push and concat in the concat section of the article below. For now, you just need to know that what push does is add a new element at the end of the array.

Push also has a brother called pop which does the exact opposite of push and removes the last element from the array, one of the most important things to keep in mind though is that a pop operation returns the popped element and not the changed array if you are expecting that to be the output.

Pop -> Removes element from the end of the array and returns it.

Shift and unshift
Distant cousins to push and pop are the shift and unshift methods which do something very similar to their cousins but at a very different place.

Just like push and pop operate at the end of a Javascript array, the shift and unshift methods operate at the start of the array.

Unshift -> Inserts element at the start of the array.
Shift -> Removes element from the start of the array.

Splice and slice
Two of the most interesting and googled methods in Javascript are the slice and splice methods, I won’t lie – even I google them many times still. Both these methods are extremely powerful and make our lives so much easier when it comes to dealing with arrays.

So far, we have seen how to work with the first and last positions in an array, these two methods give us the power to work with any index and manipulate the array at any index of the array.

Let’s start with slice then, well, to be really honest it’s one of the methods that always always confuses me and there’s a valid reason for that. This method is actually used to return a part of the array as a new array in itself. But the confusing thing about it is it’s arguments – the first argument is the starting index, ie, the index of the first element you want as a part of the new array and the second argument is the end index but with a catch, the element at the end index is not included in the sliced new array, but the new array contains the element just before it.

Another thing to take care of is that the original array remains unaffected , it is not that the elements would be removed from that array.

Look at the above example code and see how this works, even though the end index was 4, we only extracted elements till the third 3rd index as I said.

Let’s now talk about arguably the most powerful JS array method there is – the splice method.

Splice -> adds/removes elements from an array and actually changes the original array.

This method is mostly used to replace elements at or starting from any given index but this replace can in fact be used in ways to make it work like just addition or just removal as well. Let us see how it works.

splice takes in 2 or more arguments(1 or more actually), the first argument value is the start index where we want to replace the elements at, the second argument is the number of elements we want to replace in that array and after that we can keep on giving ‘n’ number of arguments which will be the new elements that will be inserted into the array.

Also to be noted is the fact that like slice, splice also returns an array of removed elements. But, it actually also affects the original array unlike slice.

Let us see how splice can be used to remove elements from an array first :-

As you can see, we start removing elements at index 1 and we remove 2 elements, remember unlike slice, the second argument here is not the end index but the number of elements you want to operate on.

array1 is manipulated as I told you and also array2 is a new array as we expected it to be.

Using splice to add elements to arrays :-

The main point to notice here is the 0 as the second argument, what this indicates is that we want to replace 0 elements in the new array. When 0 elements are being replaced that is just equivalent to addition of elements nothing else.

Finally, let us see how we can use splice to actually replace elements :-

I think by now it would probably be clear how this one worked. 😛

Concat or spread
I won’t explain much about concat here as you must be pretty aware about what it does and also because since the arrival of the spread operator it’s usage is not that prevalent. What concat does is attaches an array to the end of another array and creates a new array as a result. One very very important thing to note is that it creates a new array and does not change any of the arrays that are involved in the concatenation. Push on the other hand added elements at the end of the original array and manipulated it.

This is a big thing if you work with libraries and frameworks like React or Vue where mutation is not good.

Let us see how the spread operator works with arrays now. The spread operator can basically be used to join arrays into one just like the concat method and it also creates a new array instead of mutating the old ones but what is good about it is that it is a bit cleaner and also gives you the freedom of choosing the order more easily than the concat method does. Also, it works just as easily with more than 2 arrays.

So, in this article we discussed a lot of methods on how to add and remove elements in arrays in Javascript and I hope to see more from you guys that I may have missed in the comments.

If you are javascript dev there are a lot of reasons to be excited about ES2020, you can check out 5 reasons why I am excited for it here -> https://easyontheweb.com/5-es2020-features-you-should-be-excited-for/