JavaScript Array unshift()
In this post, we will discuss unshift() method available in JavaScript Array.
unshift()
The unshift() method will add single/multiple items to the array. The added items are added at the first of the array. So, it takes single/multiple items as a parameter.
Syntax:
array_name.unshift(item1,.....item n)
Here, the 'array_name' is the name if the array.
Example 1:-
Let's create an array that hold 10 strings and add 5 strings using unshift() 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);
// Use unshift() method to add 5 subjects at start of the array-subjects.
subjects.unshift("sub1","sub2","sub3","sub4","sub5");
document.writeln("<br>");
document.writeln("<br>");
document.writeln("After adding 5 subjects: <br>");
document.writeln(subjects);
</script>
</body>
</html>
Output:
Actual data:
php,html,node.js,java,jsp,html,sql,hadoop,iot,python
After adding 5 subjects:
sub1,sub2,sub3,sub4,sub5,php,html,node.js,java,jsp,html,sql,hadoop,iot,python
So, we can see that the final array include elements with 5 subjects added at first.
Example 2:-
Let's create an array that hold 5 strings and add one string using unshift() method.
<html>
<body>
<script>
// Consider the array with 10 strings
const subjects =["php","html","node.js","java","jsp"];
document.writeln("Actual data: <br>");
document.writeln(subjects);
// Use unshift() method to add 1 subject at first of the array-subjects.
subjects.unshift("sub1");
document.writeln("<br>");
document.writeln("<br>");
document.writeln("After adding 1 subject: <br>");
document.writeln(subjects);
</script>
</body>
</html>
Output:
Actual data:
php,html,node.js,java,jsp
After adding 1 subject:
sub1,php,html,node.js,java,jsp
We can see that sub1 is added at first of the array.
Example 3:-
Let's create an array that hold 5 strings and add one string using unshift() method. Let's see the length of the array in both the cases.
<html>
<body>
<script>
// Consider the array with 10 strings
const subjects =["php","html","node.js","java","jsp"];
document.writeln("Actual data: <br>");
document.writeln(subjects);
document.writeln("<br>");
document.writeln("Total elements: <br>");
document.writeln(subjects.length);
// Use unshift() method to add 1 subject at first of the array-subjects.
subjects.unshift("sub1");
document.writeln("<br>");
document.writeln("<br>");
document.writeln("After adding 1 subject: <br>");
document.writeln(subjects);
document.writeln("<br>");
document.writeln("Total elements: <br>");
document.writeln(subjects.length);
</script>
</body>
</html>
Output:
Actual data:
php,html,node.js,java,jsp
Total elements:
5
After adding 1 subject:
sub1,php,html,node.js,java,jsp
Total elements:
6
We can see that sub1 is added at first of the array. At first time the length of the subjects array is 5 and after adding "sub1", the length is 6.
Example 4:-
Now we will create a button and onclick of it, we will add 3 subjects into the array.
<html>
<body>
<button onclick="click1()">Click to add 3 subjects</button>
<p id="subjects1"></p>
<script>
var subjects = ["php","html","node.js","java","jsp"];
document.getElementById("subjects1").innerHTML = subjects;
function click1(){
subjects.unshift("sub1", "sub2","sub3");
document.getElementById("subjects1").innerHTML = subjects;
}
</script>
</body>
</html>
Output:
sub1,sub2,sub3,php,html,node.js,java,jsp
If we click the button, 3 subjects are added to the subjects array at first. If we click on this button continuously, same subjects will be added continuously.
