There is a range of commands that JavaScript allows to perform while working with arrays. You can even change the array length and remove its first items. A good method for that purpose is Array.shift().
This method deletes the first element of an array (the one with the index 0) and returns its value. For example, if you use Array.shift() to modify an array [“one”, “two”, “three”], you will get the “one” string returned.
Keep in mind that the array length will be modified and the indexes will move forward. Thus, for the said array, after the removal of its first element, the array length will be 2. Strings “two” and “three” will get indexes 0 and 1 respectively.
Syntax
The code below illustrates the correct syntax of the Array.shift() method. It does not accept any parameters.
array = ["a", "b", "c", "d", "e"];
element = array.shift();
console.log(array); // logs "(4) ['b', 'c', 'd', 'e']"
console.log(element); // logs "a" Note that the method did not create another array but changed the length of the initial one. It works well for arrays with elements of any data type. However, if you try to call it using an array without any items, undefined value will be returned.
array = [];
element = array.shift();
console.log(element); // logs "undefined" Calling this method by a variable which is not an array will cause the Type Error message. You also need to pay attention to the fact that this method actually removes the element with the index 0 even if there is no value by this index.
For example, in the code below there is an empty array created and values assigned to its elements with the indexes 1, 2 and 3. The first item with the 0 index is empty and the actual length of your array is 4, even though there are only three values in it.
The Array.shift() returned an undefined value and the length of the array changed to 3. At the same time the values assigned to the items initially did not change.
array = [];
array[1] = "first";
array[2] = "second";
array[3] = "third";
console.log(array); // logs "(4) […, 'first', 'second', 'third']"
console.log(array.shift()); // logs "undefined"
console.log(array); // logs "(3) ['first', 'second', 'third']"The use of Array.shift()
Since the method can delete one array item only, sometimes it makes sense to put it inside the loop. For example, let’s create a program that will erase all elements of your array and print them in the console. You can use the while loop for that purpose.
Inside the parentheses where the conditional statement is needed you can create a variable and assign a value returned by the Array.shift() method to it. After that using the typeof() operator you will be able to check the type of the variable. The logical operator of non-equality will help you to check whether this type is equal to undefined or not.
In this way only while our array still contains some items, the action of printing will be performed. As soon as Array.shift() returns undefined value, the loop will end meaning the array is empty .
animals = ["cat", "dog", "fish", "hamster", "parrot"];
while (typeof(i = animals.shift())!=="undefined"){
console.log(i);
} // logs "cat dog fish hamster parrot"
console.log(animals); // logs (0)[]Productivity
The concept of this method is clear enough: after removing the first item, all the other elements move forward to get new indexes. It sounds quite easy, but what if your array consists of 200 000 items or even more. How long will the execution of this method take if it tries to change the positions of all the 199 999 elements one by one after the removal? It may take seconds which is too much in general terms of productivity.
These days some of the famous web browsers, especially Mozilla Firefox, use a slightly different approach. Instead of moving all the elements in the array, this method lets them stay in their places and simply changes the position of the pointer, or just lets the computer know the new address of the first item.
Thus, basically there are only 2 actions to perform for the Array.shift() method. First, it deletes the element of the array with the index 0. Second, it moves the pointer by just one position. This approach greatly improves the efficiency of the method and allows it to work with the large arrays as fast as with the ones with several items only.
However, this method is not always as productive. For example, Chrome allows its fast performance for the arrays containing under 50,000 elements only. That’s why in order to stay versatile, it’s better not to use Array.shift() with arrays of a large amount of items. In some cases, the removal of the last element instead of the first one may be more convenient. A good method for this purpose is Array.pop().
Conclusion
The use of the Array.shift() method allows you to easily delete the first element of any array. It returns the value of the removed item and changes the length of the initial array. This method works with arrays of any data type. For achieving best results it’s often used inside the loops. However, considering the concept of the method execution you need to be careful while using it for the large arrays since it may greatly affect the productivity of your program.