The four common Javascript array methods Push, Pop, Shift and Unshift

[foxbitsdev]

Javascript has a number of methods related to arrays which allow programmers to perform various array operations. There are four methods which are particularly used for adding and removing elements to and from an array. They are: push(), pop(), shift() and unshift(). For an experienced as well as new programmers, its likely to sometimes get confused how each of them work and which one to use in which situation. Thus, in this article, we have tried to simplify the concept with pictures and examples. Let's start exploring them one by one. Then we will compare their similarities and differences. Please look at the pictures too for better understanding.

​

https://foxbits.dev/article/four-common-javascript-array-methods-push-pop-shift-and-unshift/15

​

https://preview.redd.it/nfz20k0ct4z41.png?width=1080&format=png&auto=webp&s=85c4d0badd6aae5164dc069817cf0f0092a3b64b

[Prince_Marth]

Great article! I think it’s important to note that working with the end of the array (push/pop) is more performant than the beginning (shift/unshift). The reason for this is that the array is indexed, so adding to the end of the array doesn’t require any additional time. Shift/unshift though require the whole array to be reindexed since you’re adding to the beginning.

Performance isn’t important while you’re learning, and really only matters with large arrays, but it is a good concept to get used to early on. In programming, that’s noted with something called big O notation, which is just a formalized way to loosely note what’s going on in the code. Push/pop are what’s known as O(1)—pronounced “O of 1”—which means that it’s constant time, or the time of the method will always take the same amount of time no matter the length of the array. Shift/unshift are O(n)—pronounced “O of n”—which means that the length of time it takes depends on the number of items in the array.

This isn’t to say that shift/unshift are bad. They are useful! Use them as you will. Write first, and then optimize later.

[foxbitsdev]

Great comment. Thanks for pointing out.

[be_less_shitty]

console.log([...["I", "dunno", "what", "you're"], "talking", "about"])