JavaScript offers three in-built functions to add or insert objects in an array. These methods are -
- push
- splice
- unshift
You can utilize any of the following techniques to include objects into the array. Objects represent the components or values contained within the array. We will examine each method comprehensively.
Method 1: push
The push method is a native function in JavaScript specifically designed for arrays. Its primary purpose is to insert objects or elements into an array. This method appends the specified elements to the end of the existing array.
"Be aware that the push method allows for the addition of any quantity of elements into an array."
Syntax
An object can be supplied as an argument to the array.push method, as illustrated in the syntax below -
array.push(objectName)
In this context, "array" refers to a custom-defined identifier for the array, such as car, fruits, movie, and so forth.
Return values
The push method returns the updated length of the array following the addition of the new elements.
Example 1
This is a straightforward illustration of the push method, in which we will create an array containing three elements (the titles of movies). Subsequently, we will incorporate two additional objects into the array by providing their names as arguments in the movieList.push method.
Copy Code
<html>
<body>
<script>
var movieList = ["Rush hour", " X-Men", " Avengers"];
document.write("<b><br> Initially elements in array: </b>" + movieList + "<br>");
function pushFunction() {
//add new elementin list array
var noOfElement = movieList.push(" Twilight", " Caption America");
document.write("<b> Elements after adding new elements: </b>" + movieList);
document.write("<br> Number of elements in array: " + noOfElement);
}
pushFunction();
</script>
</body>
</html>
Output
In the response provided below, it can be observed that the push method returned a value of 5, indicating the total count of elements in the movieList array following the addition of new items.
Example 2
Here is yet another illustration of the push function, where we utilized an HTML button to invoke the function for adding new elements into the array.
Copy Code
<html>
<script>
var seriesList = ["Sherlock", " Harry Potter", " Games of Throne"];
document.write("<b> Initially elements in array: </b>" + seriesList + "<br>");
function pushFunction() {
//add new element in array
seriesList.push(" Avengers", " Prison Break", " The Spy");
//return the array with new values
document.getElementById("result").innerHTML = "<b> Array after adding new elements: </b> </br>" + seriesList;
}
</script>
<body>
<h3> Click the button to add three more elements to the array </h3>
<button onclick="pushFunction()"> Push Elements </button>
<h4 id="result">
</body>
</html>
Output: Before clicking the button
Upon running the code provided above, the output will match the one illustrated below. Additionally, we have implemented a "Push Element" button that facilitates the addition of new elements to the array.
Output: After clicking the button
In the JavaScript code, we have included three additional series names to be incorporated into that array. Therefore, when you press the Push Elements button, these new elements will be appended to the array.
In the examples provided earlier, you may have observed that the elements are added to the conclusion of the array.
Example 3: Take input from user
In this illustration, we will gather input from the user via an HTML form to add an element utilizing the push method.
Copy Code
<html>
<center>
<h3 style="color:green"> push() method </h3>
<script>
var seriesList = ["Rush Hour", " Harry Potter", " X Men"];
document.write("<b> Initially elements in array: </b> <br>" + seriesList + "<br>");
function addObject() {
var movie = document.getElementById("mv").value;
//add new elementin list array
seriesList.push(movie);
document.getElementById("result").innerHTML = "<b> Array after adding new elements:</b> <br>" + seriesList;
}
</script>
<body>
<p> Enter the movie name and click the button to add it to the array </p>
<b> Enter movie name: </b>
<input type="text" id="mv">
<button type=submit onclick="addObject()"> Add Elements </button>
<h4 id="result"> </h4>
</body>
</center>
</html>
Output: Before entering new input
Upon running the code provided above, you will first observe an output displaying three movie titles. Additionally, there is an input field designed for user input along with an "Add Element" button to submit the entered value.
See the output below:
Output: After entering a new value
We have introduced "Titanic" as a new element value and pressed the Add Element button. As a result, you will observe that "Titanic" has been successfully appended to the end of the array in the output shown below.
Method 2: splice
The splice method is another native array function in JavaScript. This particular function serves a dual purpose: it allows for the addition and removal of elements at a designated index within an array. Moreover, it can execute both of these operations simultaneously.
This function enables the addition or removal of elements/objects at a designated index specified within it. A new object is inserted at the indicated index. The splice method takes three arguments - the starting index, the count of elements to be removed, and the new elements that are to be added.
"Be aware that, akin to the push function, the splice method allows you to insert multiple new elements into an array."
Syntax
See the syntax of the splice method below -
array.splice(startindex, howmany, objectName)
An object can be appended to the array without the necessity of eliminating any existing elements by setting the second parameter to 0.
array.splice(startindex, 0, objectName)
In this context, "array" serves as a custom identifier for the array, which might be named, for instance, car, fruits, movie, and so forth.
Let’s delve into this array function by examining examples that illustrate its operation. We will explore both scenarios:
- By eliminating other elements
- Without the elimination of other elements
Example 1: By removing other elements
In this instance, we will eliminate certain elements from the array in order to introduce new elements into it. The new objects will be inserted into the array at the designated index specified in the code.
Copy Code
<html>
<center>
<h3 style="color:green"> splice() method </h3>
<script>
var seriesList = ["Sherlock", " Harry Potter", " Games of Throne"];
document.write("<b> Initially elements in array: </b> <br>" + seriesList + "<br>");
function addObject() {
//add new elementin list array
seriesList.splice(1, 2, " Prison Break", " The Spy", " Avengers");
document.getElementById("result").innerHTML = "<b> Array after adding new elements:</b> <br>" + seriesList;
}
</script>
<body>
<h3> Click the button to add three elements to the array </h3>
<button onclick="addObject()"> Add Elements </button>
<h4 id="result"> </h4>
</body>
</center>
</html>
Output
Upon running the code provided above, you will receive a response containing three series titles: Sherlock, Harry Potter, and Games of Thrones, along with an Add Element button as illustrated below:
Upon clicking the Add Element button, the initial action will involve the removal of elements located at array index 1, specifically a[1] (Harry Potter, Games of Throne). Following this, new entries (Prison Break, The Spy, Avengers) will be incorporated into the array.
Example 2: Without removing other elements
In this instance, we will refrain from eliminating any existing elements from the array in order to insert new ones. Instead, we will simply add the new elements to the array starting from the index indicated in the code.
Copy Code
<html>
<center>
<h3 style="color:green"> splice() method </h3>
<script>
var seriesList = ["Sherlock", " Harry Potter", " Games of Throne"];
document.write("<b> Initially elements in array: </b>" + seriesList + "<br>");
function addObject() {
//add new elementin list array
seriesList.splice(2, 0, " Prison Break", " The Spy");
document.getElementById("result").innerHTML = "<b> Array after adding new elements: </b> </br>" + seriesList;
}
</script>
<body>
<h3> Click the button to add three more elements to the array </h3>
<button onclick="addObject()"> Add Elements </button>
<h4 id="result"> </h4>
</body>
</center>
</html>
Output
Upon running the aforementioned code, the response will include an array containing three elements/objects, as illustrated below:
By clicking on the Add Elements button, you will append two additional elements/objects, as specified by us, to the seriesList array.
Method 3: unshift
The unshift method is another built-in function available for arrays in JavaScript. This method is utilized to insert objects or elements into the array. In contrast to the push method, which appends elements to the end, unshift places the elements at the start of the array.
"Keep in mind that you can insert multiple elements at the beginning of an array by utilizing the unshift method."
Syntax
An object is provided as an argument in the array.unshift method, illustrated in the syntax below -
array.unshift(objectName)
In this context, "array" serves as a user-specified identifier for the array, such as car, fruits, movie, and so forth.
Return values
The unshift function provides the updated length of the array following the addition of new elements. You have the option to assign the length of the array, as returned by the unshift method, to a JavaScript variable.
Example 1
This is a straightforward illustration of the unshift function, where we will start with an array containing three elements (the titles of movies). Subsequently, we will introduce two additional objects into the array by providing the object names as arguments to the movieList.unshift method.
Copy Code
<html>
<body>
<center>
<h3 style="color:green"> Simple unshift() method Example </h3>
</center>
</body>
<script>
var movieList = ["Rush hour", " X-Men", " Avengers"];
document.write("<b><br> Initially elements in array: </b>" + movieList + "<br>");
function addFunction() {
//add new element in the beginning of array
var noOfElement = movieList.unshift(" Twilight", " Caption America");
document.write("<b> Elements after adding new elements: </b>" + movieList);
document.write("<br> Number of elements in array: " + noOfElement);
}
addFunction();
</script>
</html>
Output
In the response provided below, you will notice that the unshift method returned the value 5, indicating the total number of elements in the movieList array after new elements were added.
Example 2
Here is an additional illustration of the unshift method, where we have employed an HTML button to invoke the function responsible for adding new elements to the array.
Copy Code
<html>
<center>
<h2 style="color:green"> unshift() method </h2>
<script>
var seriesList = ["Sherlock", " Harry Potter", " Games of Throne"];
document.write("<b> Initially elements in array: </b><br>" + seriesList + "<br>");
function addElement() {
//add new element at the beginning of the array
seriesList.unshift(" Avengers", " Prison Break", " The Spy");
//return the array with new values
document.getElementById("result").innerHTML = "<b> Array after adding new elements: </b> </br>" + seriesList;
}
</script>
<body>
<h3> Click the button to add three more elements to the array </h3>
<button onclick="addElement()"> Add Elements </button>
<h4 id="result">
</body>
</center>
</html>
Output: Before clicking the button
Upon running the code provided above, you will receive a response that contains three elements along with an "Add Element" button, as illustrated below. This "Add Element" button will facilitate the addition of new elements to the array.
Output: After clicking the button
In the JavaScript code, we have included three additional series names to be appended to that array. Consequently, when you click the Add Element button, these new elements will be incorporated into the array.
Example 3: Take input from the user
In this instance, we will gather input from the user via an HTML form to add an element utilizing the unshift method.
Copy Code
<html>
<center>
<h3 style="color:green"> Dynamic Example of unshift() method </h3>
<script>
var seriesList = ["Rush Hour", " Harry Potter", " X Men"];
document.write("<b> Initially elements in array: </b> <br>" + seriesList + "<br>");
function addObject() {
var movie = document.getElementById("mv").value;
//add new element in list array
seriesList.unshift(movie);
document.getElementById("result").innerHTML = "<b> Array after adding new elements:</b> <br>" + seriesList;
}
</script>
<body>
<p> Enter the movie name and click the button to add it to the array </p>
<b> Enter movie name: </b>
<input type="text" id="mv">
<button type=submit onclick="addObject()"> Add Elements </button>
<h4 id="result"> </h4>
</body>
</center>
</html>
Output: Before entering new input
Upon running the code provided above, you will first observe an output that displays three movie titles, an input field designated for user input, and a button labeled "Add Element" for submitting the entered value.
See the output below:
Output: After entering a new value
We have introduced "Titanic" as a new element value and pressed the Add Element button. In the output displayed below, you will observe that "Titanic" has been successfully inserted at the start of the array.
The aforementioned methods provide comprehensive illustrations of how to insert elements into an array. Each method operates in a distinct manner: the push function appends elements to the end of the array, whereas the unshift function adds elements to the start. Additionally, the splice method allows for the insertion of elements at a designated index within the array.