気まぐれ更新

ES6のObject.assign()でつまった話

背景

仕事でReact製のアプリケーションの改修を行ってる際に、Object.assign()を用いてstateオブジェクトをコピーしようとした時に少しハマったので備忘録として書きます

やったこと

下記フォーマットのstateオブジェクトをコピーして、値を成形したものを新規オブジェクトとして用いる

// stateの中身
{
  a: {
    b: 'hoge'
  }
}

コード

const copyState = Object.assign({}, this.state);
copyState.b = 'piyo';

// 出力結果: piyo
console.log(copyState.b)

// 出力結果: piyo
console.log(this.state.b)

参照までコピーされてstateが書き換わってる...
Object.assign()で値だけコピーしているはずなので、参照がコピーされるのはおかしい

こたえ

どうやらObject.assign()はshallow copyであってdeep copyではないらしい
思考停止で使ってたので気づかなかった...

JavaScriptにおけるDeep Copy

JSON.stringifyしたものにJSON.parseをかける

const obj = {
  a: {
    b: 'hoge'
  }
};

const copyObj = JSON.parse(JSON.stringify(obj));

簡単にオブジェクトをコピー(実際は新しいオブジェクトを生成)できる
便利な反面プロパティにfunctionやundifinedがあるとなくなってしまったり、date型の値の形式が変わってしまったりすることがあるので思考停止で使うのは危なそう

Deep Copyの関数を自作する

確実っちゃ確実な方法
気が向いたら実装してみようと思う

ライブラリを使う

このあたりが良さそう?

github.com

github.com