DEV Community

Cover image for Why does adding to the beginning of an array require more work than adding to the end of an array!?
Mohamed Sellami
Mohamed Sellami

Posted on

Why does adding to the beginning of an array require more work than adding to the end of an array!?

If you decide to add an item to the beginning of an array or in the middle, you will need to do more work than adding an item to the end of an array...let's discover why!

First, let's quickly find out what an array is!
An array is a sorted data structure, it consists of a collection of elements arranged in a certain way. Each element has a value and an index, if you want to access a specific element, you can do it using its index. In general, indexes start at 0, so if you have an array with four elements, indexes start from 0 to 3. Arrays are a good choice if you want your data to be ordered.

Let's imagine the array is like a bunch of boxes with toys inside, and for some reason, the boxes have to be in order. Each box is labelled with its index and have a picture of the toy inside it. The toy company received four new toys, a robot, a rubber duck, a car and blocks and they were arranged and given indexes 0, 1, 2, 3(respectively).
boxes

After one day the company received a new box contain a ball, and the box needs to be placed at the end of the boxes(After the box that contains the blocks).
add new box at the end of the boxes

The worker responsible for arranging the boxes only needs to put the box at the end and give it the index of the last box + 1, so the last box(that contain blocks) has an index of 3, the new box will have an index of 3 + 1 which is 4. This is a quick and easy process!
add new box

The next day the ball was sold, so the ball box has been removed from the end and this is also a quick and easy process.
remove a box from the end

On the same day, the company received a box contain a teddy bear and for some reason, this must be placed at the beginning of the boxes(before the box that contains the robot).
add a new box at the beginning

So let's place the new box before the box that contains the robot.
adding new box

OOPS! All the indexes now are disordered, the robot box is no longer at index 0, the rubber duck box is no longer at index 1, the car box is no longer at index 2 and the blocks box is no longer at index 3. So the worker now is not happy and she needs to do some extra work!
She needs to reindex each box, starting from the first box with an index of 0 until the last box with an index of 4.
reindex the boxes

This problem will always occur if we try to add or remove a box from the beginning or from any other position except at the end. Imagine if the company sold the rubber duck box and the worker needs to remove that box this is what happens.
remove the third box
Now the worker need to reindex the third and the fourth box.
reindex the third and the fourth box

This problem can become very large as the array size increases for example if you are dealing with arrays that have a size of more than 1000 elements. Fortunately, you don't need to do all of this work if you are working with arrays in your program, some programming languages have built-in methods to do all this work for you, for example in JavaScript you can add an item to the beginning of an array using unshift() and to add it at the end you can use push(), and if you want to remove an item from the beginning you can use shift() and from the end you can use pop(), or if you want to add or remove item from any other position you can use splice().

let array = ["robot", "ruber duck", "car", "blocks"];

//add "teddy bear" at the beginning
array.unshift("teddy bear");
console.log(array);  //["teddy bear", "robot", "ruber duck", "car", "blocks"]

//remove "teddy bear"
array.shift();
console.log(array); //["robot", "ruber duck", "car", "blocks"]

//add "ball" at the end
array.push("ball");
console.log(array); //["robot", "ruber duck", "car", "blocks", "ball"]

//remove "ball"
array.pop();
console.log(array); //["robot", "ruber duck", "car", "blocks"]

//add "teddy bear" in the middle
array.splice(2, 0, 'teddy bear');
console.log(array); //["robot", "ruber duck", "teddy bear", "car", "blocks"]

//remove "teddy bear"
array.splice(2, 1);
console.log(array); //["robot", "ruber duck", "car", "blocks"]

Enter fullscreen mode Exit fullscreen mode

Time complexity(Big O notation)

If you are familiar with big O notation, the big O notation of adding or removing elements from the beginning or any position of an array except the end is O(n) - linear time-, so shift() unshift() and splice() have time complexity of O(n), n represents the size of the array, as n grow the running time increases, so this process gets slower as the array gets bigger, for example it is so much slower if we want to add an element to the beginning of an array of size one million.
On the other hand, adding or removing item from the end is so much faster and the big O notation of this process is O(1) -constant time-, so push() and pop() have time complexity of O(1), as n grow the running time will remain the same, adding an element to the end of an array of size 4 will be as fast as adding an element to the end of an array of size million.

Top comments (0)