Updated April 3, 2023
Introduction to push() in JavaScript
In Javascript, push() is a method that helps in adding one or more than one elements to an array’s end. That is, length of the array will be changed on using this push() method. Moreover, it has certain other features.
They are:
- This method is deliberately generic.
- This method can be used on arrays that resembles objects.
- It can be used with apply() or call() methods.
- Starting position of a given value is determined by the property length.
- If the Property length can’t be converted into numeric, 0 will be used as index.
More details on push() method will be discussed in the below sections.
Syntax
Following is the syntax of push() method.
array.push(el1,el2....eln)Parameters used:
el1,el2….eln – Elements that has to be added.
Return:
Array with newly added elements.
How push() works in JavaScript?
Let us see how push() method works with the help of an example.
Suppose there is an array “ smp ” with elements as shown below.
[23, 45, 67, 89, 25, 56]You want to add some elements 90, 87 to this array. All you have to do is to call the method push as depicted here.
smp.push()On calling this method, the elements 90 and 87 will be added to the end of the array as
[23, 45, 67, 89, 25, 56, 90, 87]If you want to add elements to different positions, it can’t be done using this push() method as push() method allows adding elements to the end of the array only.
Examples to Implement push() in JavaScript
For better understanding of this method, let us see some practical examples.
Example #1
A simple Java script program to push certain elements to a sample array using push() method.
Code:
<!DOCTYPE html>
<html>
<body>
<script>
var smp=["Happy","Confused"];
smp.push("Sad");
document.writeln(smp);
</script>
</body>
</html>Output:
Explanation: Firstly, declare html by using the syntax <!DOCTYPE html>. Then, inside the body, start the script by using the tag <script>. Create a variable smp which contains the elements “Happy” and “Confused”. After this, push the element “Sad” to it using the method push(). Then, print the elements.
Example #2
Java script program to push numeric elements to a sample array using push() method.
Code:
<!DOCTYPE html>
<html>
<body>
<script>
//JavaScript to implement push() method
function sample() {
// sample array to add numeric elements
var smp= [ 43, 34, 67, 674, 873 ];
// Push the numeric elements to the sample array
document.write(smp.push( 92, 454 , 956));
document.write("<br>");
document.write(smp);
}
//call the function sample
sample();
</script>
</body>
</html>Output:
Explanation: Firstly, start the script by using the tag <script>. Create a function sample which contains the push method. Then, create a variable smp that contains certain numeric elements “43, 34, 67, 674, 873”. After this, push the elements “92, 454, 956” to it using the method push(). Then, print the number of elements and elements present in the array.
Example #3
Java script program to push string elements to a sample array using push() method.
Code:
<!DOCTYPE html>
<html>
<body>
<script>
// JavaScript to implement push() method
function sample() {
// sample array to add elements
var smp= ["Saranya", "Suchitra", "Sushmitha", "Princy"];
// Push the elements to the sample array
document.write(smp.push("Radha", "Remya", "Sherona"));
document.write("<br>");
document.write(smp);
}
//call the function sample
sample();
</script>
</body>
</html>Output:
Explanation: Similar to example 2, start the script by using the tag <script>. Create a function sample which contains the push method. Then, create a variable smp that contains certain string elements such as “Saranya”, “Suchitra”, “Sushmitha”, “Princy”. After this, add the elements “Radha”, “Remya”, “Sherona” to it using the method push(). Then, print the number of elements and elements present in the array.
Example #4
Java script program to push numeric elements to a sample array using a button that performs push() method
Code:
<!DOCTYPE html>
<html>
<body>
<p>Click the button below for adding elements...</p>
<button onclick="sample()">Click me</button>
<p id="example"></p>
<script>
var smp= [ 43, 34, 67, 674, 873 ];
document.getElementById("example").innerHTML = smp;
function sample() {
smp.push("890");
document.getElementById("example").innerHTML = smp;
}
</script>
</body>
</html>Output:
Firstly, declare html by using the syntax <!DOCTYPE html>. Then, inside the body, create a text that says “Click the button below for adding elements..”. After that, create a button that calls the function sample() on clicking it. Once it is created, start the script by using the tag <script>. Create a variable smp that contains the elements “43, 34, 67, 674, 873”. After this, function sample() is defined where an element “890” will be added by using the method push().
On executing the code, the following result will appear.
As you can see, a button is present “Click me”. On clicking it, the output will be changed as shown below. That is, an additional element 890 is getting added to the elements on clicking the button.
If the button is clicked again, 890 will be added once more.
Example #5
Java script program to push numeric elements to a sample array that already contains string elements using push() method.
Code:
<script>
// JavaScript to implement push() method
function sample() {
// sample array to add elements
var smp= ["Saranya", "Suchitra", "Sushmitha", "Princy"];
// Push the elements to the sample array
document.write(smp.push("1", "56", "93"));
document.write("<br>");
document.write(smp);
}
//call the function sample
sample();
</script>Output:
Explanation: Firstly, start the script by using the tag <script> similar to the other examples mentioned here. Create a function sample which contains the push method. Then, create a variable smp that contains certain string elements such as “Saranya”, “Suchitra”, “Sushmitha”, “Princy”. After this, push the elements “1”, “56”, “93”to it using the method push(). Then, print the number of elements and elements present in the array.
Conclusion
Java script push() is a method that adds 1 or more than 1 element to the end of a particular array. As explained in the above section, length of the array will be changed on calling this method since more elements are added to it. A detailed explanation of push() method that contains the syntax, working and examples is included in this article.
Recommended Articles
This is a guide to push() in JavaScript. Here we discuss Introduction to push() in JavaScript, Syntax, How does it work, Examples with code and output. You can also go through our other related articles to learn more –
