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
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.
Unshift -> Inserts element at the start of the array.
Shift -> Removes element from the start of the array.
Splice and slice
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.
All coders welcome
Level up every day
Users appreciate pages being usable and interactive soon after they're visually ready. UI interactions (scrolls, taps, clicks) can be delayed by script and other browser work so minimizing their impact can really help your users.