JavaScript Array push()

In this post, we will discuss push() method available in JavaScript Array.

push()

The push() method will add single/multiple items to the array. The added items are added at the end of the array. So, it takes single/multiple items as a parameter.

Syntax:

array_name.push(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 push() 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 push() method to add 5 subjects at the end of the array-subjects.
subjects.push("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:
php,html,node.js,java,jsp,html,sql,hadoop,iot,python,sub1,sub2,sub3,sub4,sub5

So, we can see that the final array includes elements with 5 subjects added.

Example 2:-

Let's create an array that hold 5 strings and add one string using push() method.

CopiedCopy Code
<html>
<body>
<script>
// Consider the array with 5 strings
const subjects =["php","html","node.js","java","jsp"];
document.writeln("Actual data: <br>");
document.writeln(subjects);
// Use push() method to add 1 subject at the end of the array-subjects.
subjects.push("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:
php,html,node.js,java,jsp,sub1

We can see that sub1 is added at the end of the array.

Example 3:-

Let's create an array that hold 5 strings and add one string using push() method. Let's see the length of the array in both the cases.

CopiedCopy Code
<html>
<body>
<script>
// Consider the array with 5 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 push() method to add 1 subject at the end of the array-subjects.
subjects.push("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:
php,html,node.js,java,jsp,sub1
Total elements:
6

We can see that sub1 is added at the end 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.push("sub1", "sub2","sub3");
		document.getElementById("subjects1").innerHTML = subjects;
		}
    </script>	
</body>
</html>

Output:

php,html,node.js,java,jsp,sub1,sub2,sub3

If we click the button, 3 subjects are added to the subjects array. If we click on this button continuously, subjects will be added.