Manipulating the First Element of an Array in JavaScript: shift() and unshift()

What happend

This topic arose when a colleague from the website encountered a question during an interview: ‘What is the purpose of the JavaScript shift syntax for arrays?’

When they shared this with me, I also wasn’t sure about this syntax… I thought, ‘Am I falling behind?’

‘Shift’ seems like it would scramble the entire array, but to my surprise, after looking it up, it’s quite the opposite… Hahaha.

This article will introduce the uses of ‘shift’ and its partner ‘unshift,’ as well as highlight important considerations.

shift( ) – Removing the First Element

The shift( ) method is a built-in feature of JavaScript arrays that allows you to remove the first element of an array while also returning the removed element.

For example,

Consider an array: [“Apple”, “Orange”, “Pineapple”]

When we apply the shift( ) method to this array, the resulting array will contain only “Orange” and “Pineapple.”

Additionally, the shift( ) method also provides a return value, which is the element that has been removed.

let arr= ["Apple", "Orange", "Pineapple"]
let val = arr.shift()
console.log(val)

⬆️ You can try this js code and it will print “Apple.”

And this feature allows shift( ) to simulate the scenario of FIFO (First In First Out), which is akin to emulating the behavior of a queue.

Considerations:

• Performance: While shift() can remove the first element, its performance might not be optimal for large arrays. This is due to the fact that every time an element is moved, the remaining elements need to be reindexed.
• Empty Array: Applying shift() to an empty array will not result in an error, but it will return undefined.

unshift( ) – Adding Elements to the Beginning

The unshift( ) method allows you to add one or more elements to the beginning of an array and returns the new length of the array.

Example:

let arr= ["Orange", "Pineapple"];
let cnt = arr.unshift("Apple", "Banana");

console.log(arr); // ["Apple", "Banana", "Orange", "Pineapple"]
console.log(cnt); // 4

Considerations:

• Performance: Similar to shift( ), if the array is large, the reindexing process during unshift( ) might be impacted.
• No Elements Specified: If unshift( ) is used without specifying any elements to insert, the array will remain unaffected, and the method will return the original length of the array.

Conclusion

In reality, JavaScript has quite a depth of knowledge behind it. Most of the time, we tend to use JavaScript with the bare minimum standards, just aiming for it to work, haha.

That’s why it seems like there’s more note-taking involved in JavaScript compared to other languages, because there’s always new ground to cover.

Reference

• Array.prototype.shift() – JavaScript | MDN (mozilla.org)
• Array.prototype.unshift() – JavaScript | MDN (mozilla.org)

🧡 Hopefully, this post has helped you to some extent.

🧡You can support me by clicking some ad, Thanks a lot

✅If you got any problem about the explanation, please feel free to let me know

Some Random notes