How to retain my array value inside onrowselect action javascript?

Question

I have a tree grid functionality. Whenever the parent row is selected child will select automatically and vice versa. In form of tree grid structure if I choose to other parent row to select by expand/collapse row and now my previous selected value are not retaining inside my HandleRowSelection method. How do I persist my previous value?

In simple words, how do I persist my templist even though my handleRowSelection is called multiple times?

handleRowSelection(evt)
  {
   
  var treeGrid =this.template.querySelector('tree-grid');
    var selectRows =treeGrid.getSelectedRows();
    
      if(selectRows.length > 0){
        let templist = [];
          selectRows.forEach(function (record){
            
            templist.push(record.id);
          })
          
          // select and deselect child rows based on header row
          this.dataObj.forEach(element => {
              // if header was checked and remains checked, do not add sub-rows
              element.items && element.items.forEach(record => {
               
              // if header was not checked but is now checked, add sub-rows
              if(!this.currentSelectedRows.includes(record.id) && templist.includes(record.id)) {
                record.items.forEach(function (item){
                                      console.log('item',item.id)
                                      templist.push(item.id);
                                     })
              }
             
             
              // if header was checked and is no longer checked, remove header and sub-rows
              if(this.currentSelectedRows.includes(record.id) && !templist.includes(record.id)) {
                  record.items.forEach(item => {
                      const index = templist.indexOf(item.id);
                      if(index > -1) {
                        templist.splice(index, 1);
                      }
                  })
              }
              console.log('now check',templist);
              // if all child rows for the header row are checked, add the header
              // else remove the header
              var allSelected = true;
              record.items && record.items.forEach(item => {
                  if(!templist.includes(item.id)) {
                      allSelected = false;
                  }
              })
             
              if(allSelected && !templist.includes(record.id)) {
                
                templist.push(record.id);
              } else if(!allSelected && templist.includes(record.id)) {
                  const index = templist.indexOf(record.id);
                  if(index > -1) {
                    templist.splice(index, 1);
                  }
              }

          })
          
          
        })

           this.selectedrows = templist; // array list will hold every selected parent & child value
     this.currentSelectedRows = templist; // array allow to add/edit child value
         
      }
     
  }

Answer 1

To persist a variable, create it outside the function