Introduction to JavaScript Array Push
Javascript provides us with an amazing type of objects that unusually work on numbers instead of names and can store any type of and any number of objects within that particular object. Arrays are very useful when we need to store multiple objects of similar type with similar qualities.
For example, an array object named cars will store names of all the cars. One more extraordinary feature of javascript arrays is that there’s no compulsion of adding the objects who will have similar data type only. We can add numbers, strings, float values, decimal numbers, characters, booleans and even arrays in an array. We can have multidimensional arrays in javascript.
How to Declare an Array in JavaScript?
We can declare it in two ways by using the new object or [] array. 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 in it namely 90 and 95 and the length of the array will be two.
var marks = new Array(90);
This declaration will result in array creation named marks which will contain 90 undefined items and the length of the marks array will also be 90.
In order to avoid such things, an array is declared as:
4.5 (4,785 ratings)
View Course
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 we have to add an element or item at the last position of an array.
- Unshift(): When we have to add an element at the beginning of the array, we can use the unshift() method to do the same.
- Splice(): Many times situation occurs where we 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 the push() method in javascript.
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 not only strings but elements having different datatype like integers, float, decimal, 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,95.36,true);
document.getElementById("sample").innerHTML = subjects;
}
</script>
</body>
</html>
Output:
Example #4 – Adding arrays to 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 which are pushed. Let’s verify this with the help of an example.
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 push() method and all above methods work only on ECMAScript 1 version of javascript and supported browsers and there minimum versions who 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 holes creation in an array as when splice() method is used or value is directly assigned using an index. We can use push() method to add the elements at the end of an array which increases its length.
Recommended Articles
This is a guide to JavaScript Array Push. Here we discuss the introduction, adding elements in array and examples of javascript array push. You may also have a look at the following articles to learn more –
