Add New Value to an Existing Array in JavaScript

Javascript Web Development Front End Technology

To add new value to an existing array in Javascript, it can be achieved using various ways. We will be understanding seven different approaches for adding a new element to existing array.

In this article we are having an array of numbers and our task is to add new value to an existing array in JavaScript.

Approaches to Add New Value to Existing Array

Here is a list of approaches to add new value to an existing array in JavaScript which we will be discussing in this article with stepwise explaination and complete example codes.

Using push() Method
Using Index Assignment
Using unshift() Method
Using splice() Method
Using concat() Method
Using spread Operator
Using Underscore.Js _.union() Method

Using push() Method

To add new value to an existing array in JavaScript, we have used push() method. It appends one or more elements at the end of an array and returns the new length of the array.

We have used two div elements to display the array and updated array using getElementById(), innerHTML and innerText property. We have also added a button which triggers addValue() function upon clicking.
We have used Math.random() and Math.floor() method to generate a random element to be added to array and stored it in variable val.
Then we have used push() method to add the val element at the end of the array.

Example

Here is a complete example code implementing above mentioned steps to add new value to an existing array in JavaScript using push() method.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Adding New Value to an Existing Array in JavaScript
    </title>
</head>
<body>
    <h2>
        Adding New Value to an Existing Array in JavaScript
    </h2>
    <p>
        In this article, we have used <strong>push()</strong>
        method to add new value to an existing array in 
        JavaScript.
    </p>
    <button onclick="addValue()">Add Element</button>
    <br><br>
    <div id="array"></div>
    <div id="result"></div>
    <script>
        let arr = [1, 2, 3, 4, 5];
        document.getElementById('array')
            .innerHTML= "Initial array: " +arr
        function addValue() {
            let val = Math.floor(Math.random() * 100);
            arr.push(val);
            document.getElementById("result")
                .innerText = "Updated array: " +arr;
        }
    </script>
</body>
</html>

Using Index Assignment

In this approach to add new value to an existing array in JavaScript, we have used index assignment i.e assigning a new element directly to array.

We have used two div elements to display the array and updated array using getElementById(), innerHTML and innerText property. We have also added a button which triggers addValue() function upon clicking.
We have used length property to find the size of array and stored it in len variable. We have used the length value as index while assigning a new value to the array.
We have used Math.random() and Math.floor() method to generate a random element to be added to array and stored it in variable val.
Then we have used arr[len]=val; to add randomly generated element (val) to array at index specified by len.

Example

Here is a complete example code implementing above mentioned steps to add new value to an existing array in JavaScript using index assignment.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Adding New Value to an Existing Array in JavaScript
    </title>
</head>
<body>
    <h2>
        Adding New Value to an Existing Array in JavaScript
    </h2>
    <p>
        In this article, we have used <strong>index</strong>
        assignment to add new value to an existing array in 
        JavaScript.
    </p>
    <button onclick="addValue()">Add Element</button>
    <br><br>
    <div id="array"></div>
    <div id="result"></div>
    <script>
        let arr = [1, 2, 3, 4, 5];
        document.getElementById('array')
            .innerHTML= "Initial array: " +arr
        function addValue() {
            let len=arr.length;
            let val = Math.floor(Math.random() * 100);
            arr[len]=val;
            document.getElementById("result")
                .innerText = "Updated array: " +arr;
        }
    </script>
</body>
</html>

Using unshift() Method

In this approach we have used unshift() method to add new value to an existing array in JavaScript. It adds elements at the beginning of the array.

We have used two div elements to display the array and updated array using getElementById(), innerHTML and innerText property. We have also added a button which triggers addValue() function upon clicking.
We have used Math.random() and Math.floor() method to generate a random element to be added to array and stored it in variable val.
Then we have used unshift() method to add the val element at the start of the array.

Example

Here is a complete example code implementing above mentioned steps to add new value to an existing array in JavaScript using unshift() method.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Adding New Value to an Existing Array in JavaScript
    </title>
</head>
<body>
    <h2>
        Adding New Value to an Existing Array in JavaScript
    </h2>
    <p>
        In this article, we have used <strong>unshift()</strong>
        method to add new value to an existing array in 
        JavaScript.
    </p>
    <button onclick="addValue()">Add Element</button>
    <br><br>
    <div id="array"></div>
    <div id="result"></div>
    <script>
        let arr = [1, 2, 3, 4, 5];
        document.getElementById('array')
            .innerHTML= "Initial array: " +arr
        function addValue() {
            let val = Math.floor(Math.random() * 100);
            arr.unshift(val);
            document.getElementById("result")
                .innerText = "Updated array: " +arr;
        }
    </script>
</body>
</html>

Using splice() Method

In this approach to add new value to an existing array in JavaScript we have used splice() method. The splice() method is used to modify, remove or replace existing elements and add new elements.

We have used two div elements to display the array and updated array using getElementById(), innerHTML and innerText property. We have also added a button which triggers addValue() function upon clicking.
We have used Math.random() and Math.floor() method to generate a random element to be added to array and stored it in variable val.
Then we have used arr.splice(3, 0, val) where 3 represent the index where new element will be added, 0 represents 0 element to be deleted and val is the element which we are adding to the array.

Example

Here is a complete example code implementing above mentioned steps to add new value to an existing array in JavaScript using splice() method.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Adding New Value to an Existing Array in JavaScript
    </title>
</head>
<body>
    <h2>
        Adding New Value to an Existing Array in JavaScript
    </h2>
    <p>
        In this article, we have used <strong>splice()</strong>
        method to add new value to an existing array in 
        JavaScript.
    </p>
    <button onclick="addValue()">Add Element</button>
    <br><br>
    <div id="array"></div>
    <div id="result"></div>
    <script>
        let arr = [1, 2, 3, 4, 5];
        document.getElementById('array')
            .innerHTML= "Initial array: " +arr
        function addValue() {
            let val = Math.floor(Math.random() * 100);
            arr.splice(3, 0, val);
            document.getElementById("result")
                .innerText = "Updated array: " +arr;
        }
    </script>
</body>
</html>

Using concat() Method

In this approach we have used concat() method to add new value to an existing array in JavaScript. It is used to join two or more arrays without changing the existing arrays.

We have used two div elements to display the array and updated array using getElementById(), innerHTML and innerText property. We have also added a button which triggers addValue() function upon clicking.
Two arrays have been initialized i.e arr1 and arr2 and then concatenated using concat() method and stored into arr.

Example

Here is a complete example code implementing above mentioned steps to add new value to an existing array in JavaScript using concat() method.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Adding New Value to an Existing Array in JavaScript
    </title>
</head>
<body>
    <h2>
        Adding New Value to an Existing Array in JavaScript
    </h2>
    <p>
        In this article, we have used <strong>concat()</strong>
        method to add new value to an existing array in 
        JavaScript.
    </p>
    <button onclick="addValue()">Add Element</button>
    <br><br>
    <div id="array"></div>
    <div id="result"></div>
    <script>
        let arr1 = [1, 2, 3, 4, 5];
        let arr2 = [10, 20, 30, 40, 50];
        document.getElementById('array')
            .innerHTML= "Initial array1: " +arr1 
                        +"<br> Initial array2: " +arr2;
        function addValue() {
            let arr= arr1.concat(arr2)
            document.getElementById("result")
                .innerText = "Updated array: " +arr;
        }
    </script>
</body>
</html>

Using spread Operator

In this approach we have used spread operator to add new value to an existing array in JavaScript.

We have used two div elements to display the array and updated array using getElementById(), innerHTML and innerText property. We have also added a button which triggers addValue() function upon clicking.
We have initialized two arrays arr and val and used spread operator [...arr, ...val] to combine both arrays into new array newAarr.

Example

Here is a complete example code implementing above mentioned steps to add new value to an existing array in JavaScript using spread operator.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Adding New Value to an Existing Array in JavaScript
    </title>
</head>
<body>
    <h2>
        Adding New Value to an Existing Array in JavaScript
    </h2>
    <p>
        In this article, we have used <strong>spread operator(...)
        </strong> method to add new value to an existing array in 
        JavaScript.
    </p>
    <button onclick="addValue()">Add Element</button>
    <br><br>
    <div id="array"></div>
    <div id="result"></div>
    <script>
        let arr = [1, 2, 3, 4, 5];
        document.getElementById('array')
            .innerHTML= "Initial array: " +arr
        function addValue() {
            let val = [6, 7];
            newAarr = [...arr, ...val]
            document.getElementById("result")
                .innerText = "Updated array: " +newAarr;
        }
    </script>
</body>
</html>

Using Underscore.Js _.union() Method

In this approach we have used _.union() method of Underscore.Js library to add new value to an existing array in JavaScript. It returns combined array of unique values from each array.

We have used two div elements to display the array and updated array using getElementById(), innerHTML and innerText property. We have also added a button which triggers addValue() function upon clicking.
Then we have used _.union() method to which makes union of two arrays passes as its parameter.
It combines only unique values of both the arrays.

Example

Here is a complete example code implementing above mentioned steps to add new value to an existing array in JavaScript using _.union() method.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Adding New Value to an Existing Array in JavaScript
    </title>
    <script src="https://unpkg.com/[email protected]/underscore-min.js"></script>
</head>
<body>
    <h2>
        Adding New Value to an Existing Array in JavaScript
    </h2>
    <p>
        In this article, we have used <strong>_.union()</strong>
        method to add new value to an existing array in 
        JavaScript.
    </p>
    <button onclick="addValue()">Add Element</button>
    <br><br>
    <div id="array"></div>
    <div id="result"></div>
    <script>
        let arr = [1, 2, 3, 4, 5];
        document.getElementById('array')
            .innerHTML= "Initial array: " +arr
        function addValue() {
            let newArr = _.union(arr, [3, 10]);
            document.getElementById("result")
                .innerText = "Updated array: " +newArr;
        }
    </script>
</body>
</html>

Conclusion

In this article, we discussed how to add new value to an existing array in JavaScript. There are various approaches to do this in JavaScript, including using the push() method, index assignment, unshift() method, splice() method, concat() method, spread operator and _.union() method. The _. union() method only adds unique values to the array and ignores the duplicate values.

Saurabh Jaiswal

Updated on: 2024-11-20T14:37:57+05:30

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started