javascriptのassignメソッドの使い方が分かりません

Question

https://jsprimer.net/basic/object/

上記サイトで下記の様なコードが書かれ、説明に
「注意点として、Object.assignメソッドはsourcesオブジェクトのプロパティを浅くコピー（shallow copy）する点です。 shallow copyとは、sourcesオブジェクトの直下にあるプロパティだけをコピーするということです。 そのプロパティの値がオブジェクトである場合に、ネストした先のオブジェクトまでも複製するわけではありません。」
と書かれています。

「sourcesオブジェクトの直下にあるプロパティだけをコピーするということです。 そのプロパティの値がオブジェクトである場合に、ネストした先のオブジェクトまでも複製するわけではありません。」
との箇所から私は今回の場合
「shallowClone(obj)」
には
「obj={level:1,}」
だけが代入されると思ったのですが、これは間違えているのでしょうか？

間違えている場合「cloneObj.nest」「obj.nest」には何が入っているのでしょうか？

なぜ「console.log(cloneObj.nest === obj.nest); 」は「true」となるのでしょうか？

const shallowClone = (obj) => {
    return Object.assign({}, obj);
};
const obj = { 
    level: 1,
    nest: {
        level: 2
    },
};
const cloneObj = shallowClone(obj);
// `nest`オブジェクトは複製されていない
console.log(cloneObj.nest === obj.nest); // => true

Comments

[think49]

答えは出ていますが、"shallow copy" でぐぐってみましたか。
https://nansystem.com/shallow-copy-vs-deep-copy/

[tanakashouzoux]

think49さん
いつもご指導ありがとうございますm(__)m

はい！
ググらせて頂いておりました！！
shallow copyとdeep copyの違いもググって上記リンクで勉強させて頂いておりました！
「オブジェクトまでも複製するわけではありません。」という表現がどうも理解出来なくて悩んでいたのですが、これは「参照しているだけで新しいコピーを作っているわけではない」という認識でよろしいのでしょうか？

Answer 1

assignメソッドの使い方

オブジェクトの複製には shallow copy と deep copy の２種類がありますので、この２種類を理解して使いどころを意識します。

shallow copy は プリミティブじゃない値(オブジェクト)は参照が渡されます。

const obj = { 
    level: 1,
    nest: {
        level: 2
    },
};
// cloneObj.nest は obj.nest の参照なので、いずれかを変更すると他方も変更する
const cloneObj = Object.assign({}, obj);

cloneObj.nest.level++;
console.log( JSON.stringify(obj) ); // {"level":1,"nest":{"level":3}}
console.log( JSON.stringify(cloneObj2) ); // {"level":1,"nest":{"level":3}}

deep copy は参照を断ち切るために、値がobject の場合、（再帰処理で）深堀りし、プリミティブを複製します。
（obj.nest.level はそのままに、cloneObj.nest.level だけを変できるようになる）

const obj = { 
    level: 1,
    nest: {
        level: 2
    },
};
// オブジェクトリテラルは ``JSON.parse(JSON.stringify(boj))`` で deep copy できる。
const cloneObj = JSON.parse(JSON.stringify(obj));

cloneObj.nest.level++;
console.log( JSON.stringify(obj) ); // {"level":1,"nest":{"level":2}}
console.log( JSON.stringify(cloneObj) ); // {"level":1,"nest":{"level":3}}

jQuery の $.extend() が deep copy にも対応したユーティリティ関数として有名です。

Comments

[tanakashouzoux]

AkitoshiManabeさん
わざわざご丁寧にコードまで記述頂きありがとうございますm(__)m
「shallow copy は プリミティブじゃない値(オブジェクト)は参照が渡される」んですね♪
こう説明して頂けたお陰で大変理解が進みました！！！
ありがとうございます！！！

「ネストした先のオブジェクトまでも複製するわけではありません」というのは「ネストした先のオブジェクトはコピーではなく参照をします」という認識で合ってますでしょうか？

Answer 2

===によるオブジェクトの比較は、同じオブジェクトの実体を指す場合にtrueとなります。
逆に言えば、trueとなった場合は、同じオブジェクトの実体を指しているので、オブジェクトは増えていない、つまり複製されていないということです。

const nest = {
    level: 2
};

const obj = { 
    level: 1,
    nest: nest,
};

const cloneObj = shallowClone(obj);

console.log(cloneObj === obj); // => false なので違うオブジェクト　＝　複製されている
console.log(cloneObj.nest === nest); // => true なので同じオブジェクト　＝　複製されていない
console.log(obj.nest === nest); // => true なので同じオブジェクト　＝　複製されていない

Comments

[tanakashouzoux]

Lhankor_Mhyさん
ご丁寧に、しかもコードまでありがとうございますm(__)m

聞ける人が身近にいないので本当に助かります(´；ω；`)ｳｩｩ

Answer 3

単純に、引数1に引数2のオブジェクトの各要素を上書きしていくという理解でよくないですか？

var hoge={a:1,b:2};
var fuga={a:100,c:300};
console.log(Object.assign(hoge,fuga)); //{a:100,b:2,c:300}

Comments

[tanakashouzoux]

yambejpさん
わざわざ回答いただきありがとうございますm(__)m

yambejpさんのコードだと理解可能なのですが、私が載せたコードだと「ネストした先のオブジェクトまでは複製しません」と書いてあるのに、それだと矛盾する気がするんですよね・・・

[yambejp]

var hoge={a:1,b:2,nest: {d: 4,e:5 }};
var fuga={a: 100,c:300,nest: {d: 400,f:600 }};
console.log(Object.assign(hoge,fuga)); //{a:100,b:2,c:300,nest{d:400,f:600}}

同じnest要素はそのオブジェクトとして上書きされるということで
どうでしょう？
abcと同等の上書きならnestは{d:400,e:5,f:600}になりそうな
気もするところですが
まるっとnestが上書きされているという感覚

[tanakashouzoux]

yambejpさん
何度も本当にありがとうございますm(__)m

ご記述頂いたコードは完全に理解出来ていると思います！

上記サイトの「ネストした先のオブジェクトまでは複製しません」というのはどういう意味になるのでしょうか？
「ネストした先のオブジェクトまでは複製しません」=「上書きはするよ」ということなのでしょうか？

[yambejp]

その直後の段落で「逆にプロパティの値までも再帰的に複製してコピーすることを、深いコピー（deep copy）と呼びます。」とあるので
再帰処理されないよ・・・という意図の文書だと思います

[yambejp]

const shallowClone = (obj) => {
return Object.assign({}, obj);
};
const obj = {
level: 1,
nest:{level:2},
};
const cloneObj = shallowClone(obj);
cloneObj.level=100;
cloneObj.nest.level=200;
console.log(obj.level); //1
console.log(obj.nest.level); //200

※イメージ的には参照渡しのような挙動ですね（jsの基本動作）

[tanakashouzoux]

yamabejpさん
何度も何度もご丁寧にありがとうございますm(__)m

参照渡しの様な挙動となるのですね♪
お陰様で理解が深まりました！！
ありがとうございます！！！！！