You can think of these as nearly identical to Array.pop and Array.push, but on the front of the array instead of the end.
Array.shift method removes the first element of an array. It accepts no parameters, and it returns the removed element — not the updated array! (The "shift" name is because all the values shift down one index.)
Think of a vending machine that contains canned drinks. When you purchase a drink, the first can in the stack is released and given to you at the bottom of the machine. The rest of the cans inside the machine then "shift" downward, because gravity is a thing!
Let's do a quick example. First, we need an array to use:
const myBreakfast = [ "grits", "eggs", "hashbrowns", "toast", "bacon", "juice" ];
That's way too many carbs for me today... I would need a nap 30 minutes later! 😴 Let's remove those
grits from the array. We just need to do this:
const removedItem = myBreakfast.shift();
removedItem variable would contain
grits, and the
myBreakfast array would contain:
[ "eggs", "hashbrowns", "toast", "bacon", "juice" ]
Easy enough, right? But wait, I forgot about my coffee — and I want (read: need) that first! ☕
That's no problem, as this is a perfect use-case for
Array.unshift. Let's move to that now...
Array.unshift method adds one or more elements to the beginning of an array. The accepted parameters are the elements to add, of course. And like
Array.push, this returns the length of the updated array — and NOT the updated array itself.
Let's get back to my breakfast... ha! I'd like my coffee and a glass of water before the food, and we can use
Array.unshift to make that happen:
const newLength = myBreakfast.unshift("coffee", "water"); // value is 7
And all is well again! I now get my coffee before the food:
[ "coffee", "water", "eggs", "hashbrowns", "toast", "bacon", "juice" ]
Catch you on the next post... 😎