{"id":13216,"date":"2020-07-24T22:15:49","date_gmt":"2020-07-25T05:15:49","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=13216"},"modified":"2023-12-01T03:56:06","modified_gmt":"2023-12-01T11:56:06","slug":"javascript-shift-unshift","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/javascript-shift-unshift\/","title":{"rendered":"JavaScript Shift and JavaScript Unshift: A Complete Guide"},"content":{"rendered":"\n

JavaScript shift() removes an element at a specified position and shifts the remaining elements up. The JavaScript unshift() function does the opposite. unshift() adds a new element at a particular position and shifts the remaining elements down the list.<\/em><\/p>\n\n\n\n

\n\n\n\n

You may decide that you want to add or remove an item at the start of a list. Let’s say you make a list of top salespeople. You would want to insert the number-one top seller at the start of the list.<\/p>\n\n\n\n

That\u2019s where the JavaScript shift()<\/em> and unshift()<\/em> functions come in. shift()<\/em> and unshift()<\/em> are used to remove and add items to the start of a list, respectively. These functions are similar to the push() function and pop()<\/em> function, although shift()<\/em> and unshift()<\/em> only support removing and adding items to the start of a list.<\/p>\n\n\n\n

This tutorial will explore how to use shift()<\/em> and unshift()<\/em> to remove and add items to the start of an array. In addition, we\u2019ll walk through an example of each of these functions in a JavaScript program.<\/p>\n\n\n\n

JavaScript shift<\/h2>\n\n\n\n

shift()<\/em> is a built-in JavaScript function that removes the first element from an array. The shift()<\/em> function directly modifies the JavaScript array<\/a> with which you are working. shift() returns the item you have removed from the array.<\/p>\n\n\n\n

The shift()<\/em> function removes the item at index position 0<\/a> and shifts the values at future index numbers down by one. If you are struggling to remember the purpose of the shift()<\/em> function, tell yourself this:<\/p>\n\n\n\n

shift()<\/em> shifts<\/strong><\/em> the index values in an array down by one.<\/em><\/p>\n\n\n\n

shift()<\/em> returns undefined<\/em> if you use the shift()<\/em> function on an empty list.<\/p>\n\n\n\n

Here\u2019s the syntax for the JavaScript shift()<\/em> function:<\/p>\n\n\n\n

array_name.shift()<\/pre><\/div>\n\n\n\n
The JavaScript array shift()<\/em> function takes in no parameters. This is because shift() only performs one function. shift() removes an item from the end of an array. If shift() let you remove an item from any position, a parameter would be needed.<\/p>\n\n\n\n
Shift JavaScript Example<\/h3>\n\n\n\n
Let\u2019s walk through an example to explain how the shift()<\/em> method works.<\/p>\n\n\n\n
Suppose you are the manager of a pharmaceutical sales team. You want to compose a list of this month’s top salespeople. To start with, you have a list of last month’s top salespeople. You want to remove Mark from the start of the list. Mark did not make the list last month because he was on vacation for two weeks.<\/p>\n\n\n\n
We could use the shift()<\/em> function to remove Mark\u2019s name to the start of the list. Here\u2019s an example of shift()<\/em> being used to add Heather to the start of the top salespeople list:<\/p>\n\n\n\n
let top_salespeople = ['Mark', 'Lucy', 'Graham', 'Carol', 'Ann'];\ntop_salespeople.shift();\n\nconsole.log(top_salespeople);<\/pre><\/div>\n\n\n\n
Our code returns: <\/p>\n\n\n\n
['Lucy', 'Graham', 'Carol', 'Ann']<\/pre><\/div>\n\n\n\n
Let\u2019s explain what is happening in our code. On the first line, we declare an array called \u201ctop_salespeople<\/em>\u201d which stores the top salespeople in the pharmaceutical sales team. Then, we use the shift()<\/em> function to remove the first value from the list. Finally, we use console.log()<\/em> to print to the console the revised list.<\/p>\n\n\n\n
As you can see, the shift()<\/em> function removed Mark from the list, who appeared in the first position.<\/p>\n\n\n\n
The top_salespeople<\/em> array no longer contains<\/a> Mark. This is because the shift()<\/em> function changes the original array. It does not create a new array with the modifications we have made.<\/p>\n\n\n\n
JavaScript unshift<\/h2>\n\n\n\n
The JavaScript array unshift()<\/em> function adds one or more elements to the start of an array. The unshift()<\/em> function changes the array and returns the length of the new array.<\/p>\n\n\n\n
Here\u2019s the syntax for the unshift()<\/em> function:<\/p>\n\n\n\n
array_name.unshift(item_one, item_two, \u2026)<\/pre><\/div>\n\n\n\n
The unshift()<\/em> function takes in as many parameters as you specify. These parameters will all be added to the start of the array.<\/p>\n\n\n\n
Unshift JavaScript Example<\/h3>\n\n\n\n
Let\u2019s walk through an example and discuss how the unshift()<\/em> function works.<\/p>\n\n\n\n
An employee called Hannah had an amazing month on our sales team. She advanced to 1st position on the top salespeople list. We want to add Hannah to the 1st position in our top_salespeople<\/em> array. We could use the following code to accomplish this task:<\/p>\n\n\n\n
let top_salespeople = ['Lucy', 'Graham', 'Carol', 'Ann'];\ntop_salespeople.unshift('Hannah');\n\nconsole.log(top_salespeople);<\/pre><\/div>\n\n\n\n
When we run our code, the following response is returned to the console:<\/p>\n\n\n\n
['Hannah', 'Lucy', 'Graham', 'Carol', 'Ann']<\/pre><\/div>\n\n\n\n
As you can see, Hannah\u2019s name was added to the start of our list. The unshift()<\/em> function works in the same way as the shift()<\/em> function but with two differences: unshift()<\/em> adds an item to the start of a list, and accepts that item as a parameter.<\/p>\n\n\n\n
Our sales team has been expanding. Two of our new employees have managed to advance to the top of the sales team in terms of sales in only one month. We want to add these employees to our top_salespeople<\/em> list. Geoff should appear at the start of the list, and Peter should appear second.<\/p>\n\n\n\n
This code updates the list of top salespeople:<\/p>\n\n\n\n
let top_salespeople = ['Hannah', 'Lucy', 'Graham', 'Carol', 'Ann'];\ntop_salespeople.unshift('Geoff', 'Peter');\n\nconsole.log(top_salespeople);<\/pre><\/div>\n\n\n\n
Our code returns: <\/p>\n\n\n\n
['Geoff', 'Peter', 'Hannah', 'Lucy', 'Graham', 'Carol', 'Ann']<\/pre><\/div>\n\n\n\n
This second example code works in the same way as our first example. There is one difference. In the second example, we have specified two parameters in the unshift()<\/em> function instead of one.<\/p>\n\n\n\n
As you can see, these parameters have been added to the start of our list in the order we specified. Geoff appears first and Peter appears second.<\/p>\n\n\n\n