Add New Value to an Existing Array in JavaScript

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.

    


    

        Adding New Value to an Existing Array in JavaScript
    
    

        In this article, we have used push()
        method to add new value to an existing array in 
        JavaScript.
    
    Add Element
    


    

    

    

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.

    


    

        Adding New Value to an Existing Array in JavaScript
    
    

        In this article, we have used index
        assignment to add new value to an existing array in 
        JavaScript.
    
    Add Element
    


    

    

    

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.

    


    

        Adding New Value to an Existing Array in JavaScript
    
    

        In this article, we have used unshift()
        method to add new value to an existing array in 
        JavaScript.
    
    Add Element
    


    

    

    

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.

    


    

        Adding New Value to an Existing Array in JavaScript
    
    

        In this article, we have used splice()
        method to add new value to an existing array in 
        JavaScript.
    
    Add Element
    


    

    

    

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.

    


    

        Adding New Value to an Existing Array in JavaScript
    
    

        In this article, we have used concat()
        method to add new value to an existing array in 
        JavaScript.
    
    Add Element
    


    

    

    

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.

    


    

        Adding New Value to an Existing Array in JavaScript
    
    

        In this article, we have used spread operator(...)
         method to add new value to an existing array in 
        JavaScript.
    
    Add Element
    


    

    

    

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.

    
    


    

        Adding New Value to an Existing Array in JavaScript
    
    

        In this article, we have used _.union()
        method to add new value to an existing array in 
        JavaScript.
    
    Add Element
    


    

    

    

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.