JavaScript Array Methods Under the Hood: Push and Pop Explained

JavaScript array methods push(), pop(), shift(), unshift(), and splice() are used every day by developers, but do you know how they work under the hood?

In this article, we’ll break down the internal mechanics of these methods, explore their time and space complexities, and explain why some are faster than others. Whether you’re preparing for technical interviews or simply want to write more efficient code, understanding these fundamentals is a must.

What Are Arrays?

Let's start by defining arrays. Arrays are data structures used to store a collection of items in a single variable. These items can be of any data type, such as numbers, strings, objects, or even other arrays.

In JavaScript, arrays are index-based. This means that each item is assigned a position (starting from index 0), making it easy to access or manipulate data based on its position. To learn more about arrays and array methods, check out this link.

const animes = ["castlevania", "devil may cry", "rick and morty"]

console.log(animes[0]) ==> castlevania

Array.push(new_item)

This array method is used when you want to add an item to an array. It has a time complexity of O(1). Let me explain why.

The first thing to note is that with push(), you're adding the new item after the last item in the array. So, if you have an array of length n and you want to add the digit 3, here's what happens: Since arrays start counting from index 0, the last item is at index n - 1. To add a new item, you simply assign it to index n.

const numArray = [1, 2, 5];

const jsPush = (arr, newItem) => {
  arr[arr.length] = newItem;
  return arr;
};

console.log(jsPush(numArray, 4)) ==> [1,2,5,4]

This is what push() does under the hood. It simply places the new item at the next available index without moving items around. That's why it is O(1) (constant time). Note that native push() returns the new length (arr.length), not the array itself.

Array.pop()

This array method is used when you want to remove the last item from an array. It also has a time complexity of O(1).

If you have an array of length n, the last item is at index n - 1. To remove it, you just ignore that index and reduce the array's length by 1.

const numArray = [1, 2, 5, 4];

const jsPop = (arr) => {
  arr.length = arr.length - 1;
  return arr;
};

console.log(jsPop(numArray))==> [1,2,5]

With a time complexity of O(1), constant time, this is how pop() works under the hood.

Note that the length property is mutable (can be changed). So, when you set arr.length = arr.length - 1, JavaScript removes any item beyond the new length. It makes the array shorter, and it drops whatever doesn’t fit. If you do the opposite and set the length to arr.length + 1, JavaScript won’t complain. It just adds a space at the end of the array. To learn more about the length property, visit this link.

Conclusion

Understanding how JavaScript array methods like push() and pop() work under the hood helps you write better and faster code. These methods may seem simple, but knowing what’s going on behind the scenes and why some are slower than others can make a big difference, especially when working with large amounts of data.

If you found this helpful, stay tuned for the next part, where we’ll break down how shift(), unshift(), and splice() work.