Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add new value to an existing array in JavaScript?
In programming, it is very common to add new value to an existing array whether you are building a small or high-level application, whenever we need to extend the number of items in an array we use it to add new value in the array. In this article, we will be learning multiple ways to add new values in an array which are the following.
Using the Array.push() method.
Using the Array.unshift() method.
Using the Array.splice() method.
Using the spread operator.
Using the Array.push() method
The Array.push() method is the most used method to add any value at the end of the array. This method takes a minimum 1 one item as a parameter, and you can pass multiple values in this method, and all the items will be added to the array respectively. This method changes the length of the array and also returns the new length of the array.
Syntax
Array.push( item1, item2, item3 … … ... item-N )
Parameter
- Item1, item2, ….. item-N − Values to be inserted. A minimum of 1 is required.
Returns − The length of the array.
Example
In this example, we insert a new value at the end of the array.
<html>
<body>
<h2>Adding new value to an array using Array.push method</h2>
<p> Click on the button to add a new Value. </p>
<button onclick="addValue()"> Click Here </button>
<p> Existing Array : <span id="showArr"> 1,2,3,4,5 </span> </p>
<script>
// Create an array
let arr = [1, 2, 3, 4, 5]
function addValue() {
// Get a random number under 100
let val = Math.floor(Math.random() * 100);
// Push the value to the array
arr.push(val)
// Show the updated array to the paragraph
let para = document.getElementById("showArr")
para.innerText = arr;
}
</script>
</body>
</html>
Using Array.unshift() Method
The array.unshift() method is used to insert a new item at the start of the array. This method takes a minimum 1 one item as a parameter you can pass multiple values in this method and all the items will be added to the beginning of the array respectively. This method changes the length of the array and also returns the new length of the array.
Syntax
Array.unshift( item1, item2, item3 … … ... item-N )
Parameter
Item1, item2, ….. item-N − Values to be inserted. A minimum of 1 is required.
Returns − The length of the array.
Example
In this example, we insert a new value at the start of the array.
<html>
<body>
<h2>Adding new value to an array using Array.unshift method</h2>
<p> Click on the button to add a new Value. </p>
<button onclick="addValue()"> Click Here </button>
<p> Existing Array : <span id="showArr"> 1,2,3,4,5 </span> </p>
<script>
// Create an array
let arr = [1, 2, 3, 4, 5]
function addValue() {
// Get a random number under 100
let val = Math.floor(Math.random() * 100);
// Insert the value to the array
arr.unshift(val)
// Show the updated array to the paragraph
let para = document.getElementById("showArr")
para.innerText = arr;
}
</script>
</body>
</html>
Using Array.splice() method
The array.splice() method in JavaScript is used to add or remove some value to a given array. This is so flexible in terms of manipulating the array that you can add new elements while removing old elements. This method overwrites the original array instead of creating a new array.
Syntax
Following is the syntax to use the Array splice() method −
array.splice(index, howMany, [element1][, ..., elementN]);
Parameters
index − Index at which to start changing the array.
howMany − An integer indicating the number of old array elements to remove. If howMany is 0, no elements are removed.
element1, ..., elementN − The elements to add to the array. If you don't specify any elements, the splice simply removes the elements from the array.
Return Value
Returns the length of the new array.
Example
In this example, we are adding an element to the 3rd position of the array.
<html>
<body>
<h2>Adding new value to an array using Array.splice method</h2>
<p> Click on the button to add a new Value. </p>
<button onclick="addValue()"> Click Here </button>
<p> Existing Array : <span id="showArr"> 1,2,3,4,5 </span> </p>
<script>
// Create an array
let arr = [1, 2, 3, 4, 5]
function addValue() {
// Get a random number under 100
let val = Math.floor(Math.random() * 100);
// Insert the value to the array
arr.splice(3, 1, val)
// Show the updated array to the paragraph
let para = document.getElementById("showArr")
para.innerText = arr;
}
</script>
</body>
</html>
Using the spread Operator
The spread operator in JavaScript was introduced with ES6. The spread operator allows us to expand an array into individual array elements. To use the spread operator three dots (…) should be preceded by the array name.
To add new elements to an existing array using the spread operator, we create an array of the elements whom we want to insert into the existing array along with the items of the existing array which will be accessed using the spread operator.
Example
In this example, we will be adding some values to an array using the spread operator.
<html>
<body>
<h2>Adding new value to an array using spread operator </h2>
<p> Click on the button to add a new Value. </p>
<button onclick="addValue()"> Click Here </button>
<p> Existing Array : <span id="showArr"> 1,2,3,4,5 </span> </p>
<script>
// Existing array
let arr = [1, 2, 3, 4, 5]
function addValue() {
// Items to be added
let val = [6, 7]
// Insert the value to the array
arr = [...arr, ...val]
// Show the updated array to the paragraph
let para = document.getElementById("showArr")
para.innerText = arr;
}
</script>
</body>
</html>
In this tutorial, we discussed adding new values to an existing array in JvaScript. There are several ways to do this in JavaScript, including using the Array.push() method, the Array.unshift() method, the Array.splice() method, and the spread operator.
3K+ Views
