【JS】プロパティの値を破壊→非破壊処理にする方法。

個人メモです。

テーブルでボタンクリックに合わせtdタグ、thタグを切り替える処理でバグが発生。

プロパティの値の変更の破壊処理を非破壊に変更したらバグが直ったので忘備録として。

破壊処理をデバッグで確認したが、処理は問題なく最終的なアウトプットがおかしい状況。（vue.jsの処理のせい？？）

##対処方法

変数をコピーする必要がある。

オブジェクトの外側のデータをコピー

//修正前
this.innerValue = this.innerValue.map((tr, rowKey) => {


//修正後
this.innerValue = this.innerValue.map((tr, rowKey) => {
        const _tr = {...tr}

オブジェクトをスプレッド構文で展開してコピーする。

オブジェクトの内側のデータをコピー

//修正前
cell['item_type'] = 'TYPE_TH'
return cell


//修正後
return {
    ...cell,
    item_type: 'TYPE_TD'
}

変数の値を直接変更していたものを、スプレッド構文に展開（別データとしてコピー）して作成。

##コード

修正後

    changeRowTh(){
      this.innerValue = this.innerValue.map((tr, rowKey) => {
        const _tr = {...tr}
        if(rowKey === 0){
          _tr.article_items = _tr.article_items.map((cell, cellKey) => {
            return {
              ...cell,
              item_type: 'TYPE_TH',
            }
          })
        }else{
          _tr.article_items = _tr.article_items.map((cell, cellKey) => {
            return {
              ...cell,
              item_type: 'TYPE_TD'
            }
          })
        }
        return _tr
      })
    },

修正前

    changeRowTh(){
      this.innerValue = this.innerValue.map((tr, rowKey) => {
        if(rowKey === 0){
          tr.article_items = tr.article_items.map((cell, cellKey) => {
            cell['item_type'] = 'TYPE_TH'
            return cell
          })
        }else{
          tr.article_items = tr.article_items.map((cell, cellKey) => {
            cell['item_type'] = 'TYPE_TH'
            return cell
          })
        }
        return tr
      })
    },

プロジェクトのデザインパターンが破壊処理を使わない方針の場合、非破壊処理にするよう注意が必要。