Updated June 9, 2023
Introduction to JavaScript Array Push
The following article provides an outline for JavaScript Array Push. Javascript gives us a fantastic type of object that unusually works on numbers instead of names and can store any type and number of objects within that particular object. Arrays are very useful when storing multiple objects of similar type with similar qualities.
An array of named cars will store the names of all cars. There is no compulsion to add objects with similar data types. In javascript, we can add numbers, strings, float values, decimal numbers, characters, booleans, and even arrays.
How to Declare an Array in JavaScript?
We can declare it using the new object or [] array in two ways. The best way out of them is using the [], i.e., opening-closing square brackets. The reason for this is that using new() can create some problems sometimes.
Example:
var marks = new Array(90, 95);The above declaration will create an array with two items, namely 90 and 95, and the array’s length will be two.
var marks = new Array(90);This declaration will result in an array creation named marks containing 90 undefined items, and the length of the marks array will also be 90.
To avoid such things, an array is declared as:
var marks = [];Adding Elements in Array
There are three ways of adding an element in the javascript array, which are as follows:
- Push(): This method is used when adding an element or item at the last position of an array.
- Unshift(): When we add an element at the beginning of the array, we can use the unshift() method to do the same.
- Splice(): We often have to add an item in the middle of the array content. Using the splice() method, we can specify the position where we need to add the new element.
Examples of JavaScript Array Push
Given below are the examples of JavaScript Array Push:
Example #1
Pushing a single element in an array.
Code:
<!DOCTYPE html>
<html>
<body>
<p>You can click the button to add a new subject mathematics in the subjects array.</p>
<button onclick="addSubject()">Add Now</button>
<p id="sample"></p>
<script>
var subjects = ["Physics", "Chemistry", "Biology", "Aeronatics"]; document.getElementById("sample").innerHTML = subjects;
function addSubject() { subjects.push("Mathematics");
document.getElementById("sample").innerHTML = subjects;
}
</script>
</body>
</html>Output:
Before click:
After click:
Example #2
Pushing multiple elements in the array.
We can add multiple elements or items in an array using javascript’s push() method.
Code:
<!DOCTYPE html>
<html>
<body>
<p>You can click the button to add a multiple subjects in the subjects array.</p>
<button onclick="addSubject()">Add Now</button>
<p id="sample"></p>
<script>
var subjects = ["Physics", "Chemistry", "Biology", "Aeronatics"]; document.getElementById("sample").innerHTML = subjects;
function addSubject() { subjects.push("Mathematics","Marathi","English","Project"); document.getElementById("sample").innerHTML = subjects;
}
</script>
</body>
</html>Output:
Before click:
After click:
Example #3
Pushing multiple elements in an array with different data types.
We can add strings and elements with different data types like integers, floats, decimals, etc. We can even add arrays in arrays using the push method.
Code:
<!DOCTYPE html>
<html>
<body>
<p>You can click the button to add a multiple datatype elements in the javascript array.</p>
<button onclick="addSubject()">Add Now</button>
<p id="sample"></p>
<script>
var subjects = ["Physics", "Chemistry", "Biology", "Aeronatics"]; document.getElementById("sample").innerHTML = subjects;
function addSubject() { subjects.push(1,36,true);
document.getElementById("sample").innerHTML = subjects;
}
</script>
</body>
</html>Output:
Example #4
Adding arrays to an array using push.
Code:
<!DOCTYPE html>
<html>
<body>
<p>You can click the button to add a multiple datatype elements in the javascript array.</p>
<button onclick="addSubject()">Add Now</button>
<p id="sample"></p>
<script> var marks =
[["Sid",["Physics",81], ["Chemistry",72], ["Biology",92], ["Aeronatics",93]]]; document.getElementById("sample").innerHTML = marks;
function addSubject() {
marks.push(["Riya",["Physics",93], ["Chemistry",85], ["Biology",91], ["Aeronatics",87]]);
document.getElementById("sample").innerHTML = marks;
}
</script>
</body>
</html>Output:
Before clicking on the button:
After clicking on the button:
The push() method in javascript returns the number of the elements in the current array after adding the specified elements in its parameters. This is always equal to the length of the array before adding the elements plus the number of the elements pushed.
Example #5
Return value of push() method.
Code:
<!DOCTYPE html>
<html>
<body>
<p>To check return value of push() method click on the button.</p>
<button onclick="addSubject()">Add Now</button>
<p id="sample"></p>
<script> var marks =
[["Sid",["Physics",81], ["Chemistry",72], ["Biology",92], ["Aeronatics",93]],
["Payal",["Physics",61], ["Chemistry",55], ["Biology",96], ["Aeronatics",56]],
["Amish",["Physics",75], ["Chemistry",68], ["Biology",79], ["Aeronatics",83]]]; document.getElementById("sample").innerHTML = marks.length;
function addSubject() {
var arrLength = marks.push(["Riya",["Physics",93], ["Chemistry",85], ["Biology",91], ["Aeronatics",87]]);
document.getElementById("sample").innerHTML = arrLength;
}
</script>
</body>
</html>Output:
Before clicking the button:
After clicking the button:
If you want to add the element at the beginning of the array unshift() method is used instead of push(). Let’s have a quick look with the help of an example for that too.
Example #6
Add new elements at the beginning of the array.
Code:
<!DOCTYPE html>
<html>
<body>
<p>You can click the button to add a multiple subjects in the subjects array at the beginning of the array.</p>
<button onclick="addSubject()">Add Now</button>
<p id="sample"></p>
<script>
var subjects = ["Physics", "Chemistry", "Biology", "Aeronatics"]; document.getElementById("sample").innerHTML = subjects;
function addSubject() { subjects.unshift("Mathematics","Marathi","English","Project"); document.getElementById("sample").innerHTML = subjects;
}
</script>
</body>
</html>We can add single or multiple items at the beginning using unshift() method, and similar to the push() method, this also returns us the new length of the array.
Output:
Before clicking the button:
After clicking the button:
Note that the push() method and all the above methods work only on ECMAScript 1 version of javascript and supported browsers, and their minimum versions that support these methods are as follows.
- Chrome 0
- Internet Explorer 5
- Firefox 0
- Safari
- Opera
Conclusion
In this way, we can use multiple methods on the array to manipulate the same. push() method is one of the safest methods as it avoids undefined hole creation in an array when the splice() method is used, or value is directly assigned using an index. We can use the push() method to add the elements at the end of an array, increasing its length.
Recommended Articles
This is a guide to JavaScript Array Push. Here we have discussed the introduction, adding elements in the array, and examples of javascript array push. You may also have a look at the following articles to learn more –
