シャローコピーとディープコピーの違い

シャローコピーとディープコピーの違いです。

説明	シャローコピー
	ディープコピー

シャローコピー

シャローコピーは、オブジェクトの参照先をコピーします。
コピー元のオブジェクトとコピー先のオブジェクトが同じアドレスの値(インスタンス)を参照します。
片方のオブジェクトの値を変更すると、もう一方のオブジェクトの値も変更されます。
英語ではshallow copyです。shallowは、浅いという意味です。

シャローコピーのサンプル

以下は、JavaScriptのシャローコピーのサンプルです。

<script>
	let color1 = ['red','yellow','blue'];
	let color2 = [];
	
	//参照先を渡す
	color2 = color1;
	
	if (color1 == color2) {
		console.log("OK"); //OK
	} else {
		console.log("NG");
	}

	color1[1] = "オレンジ";

	console.log(color1); // ["red", "オレンジ", "blue"]
	console.log(color2); // ["red", "オレンジ", "blue"]
</script>

2行目と3行目は配列です。JavaScriptの配列は、参照型です。
6行目は、配列color1の参照先を変数のcolor2に代入することになります。
参照先のコピーは、シャローコピーと呼ばれます。(shallow=浅い)

8行目のif文は、同じ参照先なのでtrueになります。
14行目は、変数color1の値を変更しています。
16,17行目は、変数の値を表示しています。
変数の参照先が同じため、color1とcolor2の値が同じになっています。

基本型(プリミティブ型)の場合

値のデータ型が、基本型(プリミティブ型)の場合は、値自体がコピーされます。

<script>
	let color1 = "赤";
	let color2 = "青";
	
	color2 = color1;
	
	if (color1 == color2) {
		console.log("OK"); //OK
	} else {
		console.log("NG");
	}

	console.log(color1); // 赤
	console.log(color2); // 赤

	color1 = "オレンジ";

	console.log(color1); // オレンジ
	console.log(color2); // 赤
</script>

2行目と3行目は文字列です。JavaScriptの文字列(String型)は、基本型です。
5行目は、color1の値を変数のcolor2に代入しています。
7行目のif文は、同じ値なのでtrueになります。
13,14行目は、同じ値です。
16行目は、変数color1に値を代入しています。
18,19行目は、変数の値を表示しています。
color1とcolor2の値は異なっています。

ディープコピー

ディープコピーは、オブジェクトの値(インスタンス)をコピーします。
コピー元のオブジェクトとコピー先のオブジェクトがそれぞれ別のアドレスの値(インスタンス)を参照します。
片方のオブジェクトの値を変更しても、もう一方のオブジェクトの値は変更されません。
英語ではdeep copyです。deepは、深いという意味です。

以下は、WikiPediaのObject copyingのShallow copyのリンクです。
https://en.wikipedia.org/wiki/Object_copying#Shallow_copy