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.

CopiedCopy Code
<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.

CopiedCopy Code
<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.

CopiedCopy Code
<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.

CopiedCopy Code
<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.