JavaScript Array shift()
In this post, we will discuss shift() method in JavaScript Array.
shift()
The shift() method will remove the first element from the array. It will return the first element. If we print the array, then the updated array is returned (By removing the first element). It will not take any parameters.
Syntax:
array_name.shift()
Here, the 'array_name' is the name if the array.
Example 1:-
Let's create an array that hold 10 strings and shift(remove) first element from the array using shift() method.
<html>
<body>
<script>
// Consider the array with 10 strings
const subjects =["php","html","node.js","java","jsp","html","sql","hadoop","iot","python"];
document.writeln("Actual data: <br>");
document.writeln(subjects);
document.writeln("<br>");
document.writeln("<br>");
// Use shift() method to remove first element and display it.
document.writeln("Removed element: <br>");
document.writeln(subjects.shift());
document.writeln("<br>");
document.writeln("<br>");
document.writeln("Final subjects: <br>");
document.writeln(subjects);
</script>
</body>
</html>
Output:
Actual data:
php,html,node.js,java,jsp,html,sql,hadoop,iot,python
Removed element:
php
Final subjects:
html,node.js,java,jsp,html,sql,hadoop,iot,python
The first element in the array is "php". By applying shift(), it removed "php" from the array and returned it. Now the Final array won't contain "php".
Example 2:-
Let's create an array that hold 5 integers and shift(remove) first element from the array using shift() method.
<html>
<body>
<script>
// Consider the array with 5 integers
const marks =[78,89,90,88,90];
document.writeln("Actual data: <br>");
document.writeln(marks);
document.writeln("<br>");
document.writeln("<br>");
// Use shift() method to remove first element and display it.
document.writeln("Removed element: <br>");
document.writeln(marks.shift());
document.writeln("<br>");
document.writeln("<br>");
document.writeln("Final marks: <br>");
document.writeln(marks);
</script>
</body>
</html>
Output:
Actual data:
78,89,90,88,90
Removed element:
78
Final marks:
89,90,88,90
The first element in the array is 78. By applying shift(), it removed 78 from the array and returned it. Now the Final array won't contain 78.
Example 3:-
It can also be possible to check the total number of elements after shifting the element using length property.
<html>
<body>
<script>
// Consider the array with 5 integers
const marks =[78,89,90,88,90];
document.writeln("Actual data: <br>");
document.writeln(marks);
document.writeln("<br>");
document.writeln("Length: <br>");
document.writeln(marks.length);
document.writeln("<br>");
document.writeln("<br>");
// Use shift() method to remove first element and display it.
document.writeln("Removed element: <br>");
document.writeln(marks.shift());
document.writeln("<br>");
document.writeln("<br>");
document.writeln("Final marks: <br>");
document.writeln(marks);
document.writeln("<br>");
document.writeln("Length: <br>");
document.writeln(marks.length);
</script>
</body>
</html>
Output:
Actual data:
78,89,90,88,90
Length:
5
Removed element:
78
Final marks:
89,90,88,90
Length:
4
The first element in the array is 78. By applying shift(), it removed 78 from the array and returned it. Now the Final array won't contain 78. In two cases, the length is not same.
Example 4:-
Now we will create a button and onclick of it, we will shift(remove) the first element from the array.
<html>
<body>
<button onclick="click1()">Click to shift(remove) the first element</button>
<p id="subjects1"></p>
<script>
var subjects = ["php","html","node.js","java","jsp"];
document.getElementById("subjects1").innerHTML = subjects;
function click1(){
subjects.shift();
document.getElementById("subjects1").innerHTML = subjects;
}
</script>
</body>
</html>
Output:
html,node.js,java,jsp
If we click the button, "php" will be removed. If we click on this button continuously, each time the first element is removed from the updated arrays.
