How to Add an Element into an Array in LWC JS

 Based on our requirement, we can insert elements /items to an array. Here are the ways we can push elements to an array in lightning web components.

Add Element into an array using push() method

Its' very common way of add elements to an array. array.push() method inserts an element to end of the array in lwc. 

// Creating an array with some data
let fruitsArray = ["Apple", "Banana"];

// using push method to add element to array
fruitsArray.push("Cherry");

Add Elements to array using unshift() method

sometimes, we need to add an element to an array, at first element. it means beginning of the array. using array.unshift() method we can do this in easy way in lightning web components.

// Creating an array with some data
let fruitsArray = ["Apple", "Banana"];

// using unshift method to add element to array
fruitsArray.unshift("Cherry");

Add elements to an array using splice() method

Using array.splice() method to add an element at any position of an array in LWC components.

// Creating an array with some data
let fruitsArray = ["Apple", "Banana"];

// using splice method to add element to array
fruitsArray.splice(1,0,"Cherry");

Add elements to an array using concat() method

we can also add elements to an array using array.concat() method. But it will not alter the original array, instead it will creates new array with added element.

Lightning web components can also support concate method to push element to an array. It's really a great thing.

// Creating an array with some data
let fruitsArray = ["Apple", "Banana"];

// using push method to add element to array
let newFruitsList = fruitsArray.concat("Cherry");

 Using this concat method, we can join two or more arrays into single array.

// Creating an array with some data
let fruitsArray1 = ["Apple", "Banana"];
let fruitsArray2 = ["Mango", "Orange"];

// using concat method to add element to array
let newFruitsList = [].concat(fruitsArray1,fruitsArray2); // output: ['Apple', 'Banana', 'Mango', 'Orange']

Here is an example for LWC component.

AddElementsIntoArray.html

<template>
    <lightning-card title="Add Items to array using push" icon-name="custom:custom14">
        <ul class="slds-m-around_medium">
            <template for:each={fruitsList1} for:item="fruit">
                <li key={fruit}>
                    {fruit}
                </li>
            </template>
        </ul>
    </lightning-card>
    <lightning-card title="Add Items to an array using unshift" icon-name="custom:custom14">
        <ul class="slds-m-around_medium">
            <template for:each={fruitsList2} for:item="fruit">
                <li key={fruit}>
                    {fruit}
                </li>
            </template>
        </ul>
    </lightning-card>
    <lightning-card title="Add Items to an array using splice" icon-name="custom:custom14">
        <ul class="slds-m-around_medium">
            <template for:each={fruitsList3} for:item="fruit">
                <li key={fruit}>
                    {fruit}
                </li>
            </template>
        </ul>
    </lightning-card>
    <lightning-card title="Add Items to an array using concat" icon-name="custom:custom14">
        <ul class="slds-m-around_medium">
            <template for:each={fruitsList4} for:item="fruit">
                <li key={fruit}>
                    {fruit}
                </li>
            </template>
        </ul>
    </lightning-card>
</template>

AddElementsIntoArray.js

import { LightningElement } from 'lwc';

export default class AddElementsIntoArray extends LightningElement {
    

    // using push method to add element to array
    get fruitsList1(){
        // Creating an array with some data
        let fruitsArray = ["Apple", "Banana"];

        fruitsArray.push("Cherry");
        return fruitsArray;
    }

    // using unshift method to add element to array
    get fruitsList2(){
        // Creating an array with some data
        let fruitsArray = ["Apple", "Banana"];

        fruitsArray.unshift("Cherry");
        return fruitsArray;
    }

    // using splice method to add element to array
    get fruitsList3(){
        // Creating an array with some data
        let fruitsArray = ["Apple", "Banana"];

        fruitsArray.splice(1,0,"Cherry");
        return fruitsArray;
    }

    // using push method to add element to array
    get fruitsList4(){
        // Creating an array with some data
        let fruitsArray = ["Apple", "Banana"];

        let newFruitsList = fruitsArray.concat("Cherry");
        return newFruitsList;
    }
}

AddElementsIntoArray LWC component screenshot

Also found above code in Tech Shorts Git repo