浅い放射vs深い放射

これまで知っていたレプリケーションはctrl c+vだけでした
しかし、プログラミングの世界では、コピーにも種類があります.

🍫 浅いレプリケーション

浅いレプリケーションとは、参照(アドレス)値のレプリケーションを指す.

const obj = {
  name : taero
}

const copiedObj = obj;

copiedObj.name = rotae;

console.log(obj.name); // rotae
console.log(obj === copiedObj); // true

元のobjをcopiedobjに割り当て、copiedobjのname値を変更します.
もともとobjの名前も変わった.
これは、copiedObjectが元のobjと同じ参照(アドレス)値を表示しているためです.
このような状況は浅い放射線と言える.

🍫 深くコピー

深さレプリケーションは、価格そのもののレプリケーションを意味します.

でコピーされた値は完全に「独立」に存在します.

let a = 1;
let b = a;

b = 2;

console.log(a);  // 1
console.log(b);  // 2
console.log(a === b);  // false

🍫 オブジェクトの深度コピー

浅いコピー(浅いコピー)のように、元のオブジェクトのデータが予期せぬ変更を受ける可能性があるため、深いコピーが重要です.
オブジェクトを深くコピーする方法はいろいろありますが、その中の2つを整理します.

1. Object.assign()

Object.assign(ソースオブジェクト、ターゲットオブジェクト)メソッドターゲットオブジェクト
コピー(上書き)に使用します.( 以前に整理したobjectに関する方法 )

このメソッドを使用して、オブジェクト(空のオブジェクト、割り当てるオブジェクト)を挿入します.

const obj = { name : 'taero' };
const newObj = Object.assign({},obj);

newObj.name = 'rotae';

console.log(obj) = { name : 'taero' };
console.log(newObj) = { name : 'rotae' };

これで深い放射線になりました
しかし、少し注意しなければならないことがあります.重複したオブジェクトは、深いコピーを生成しません.

const obj = { 
  name : 'taero'
  hobby : {
    game : 'LOL'
  }
};
const newObj = Object.assign({},obj);

newObj.name = 'rotae';
newObj.hobby.game = 'Battleground'

console.log(obj.name);  // 'rotae'
console.log(obj.hobby.game);  // 'LOL'
console.log(obj.hobby.game === newObj.hobby.game); // false

上図に示すように、objのサブオブジェクトは深さコピーされていません.
これはObjectですassing()の限界です.

2. Spread Operator

const obj = { name : 'taero' };
const newObj = {...obj};

newObj.name = 'rotae';

console.log(obj) = { name : 'taero' };
console.log(newObj) = { name : 'rotae' };

この友達もobjectassignと同様に、1次元オブジェクトに深さコピーが表示されます.
ただし、2 D以上の重複オブジェクトでは、完全な深度コピーはできません.