シャローコピーとディープコピーの違いです。
目次
説明 | シャローコピー |
ディープコピー |
シャローコピー
- シャローコピーは、オブジェクトの参照先をコピーします。
- コピー元のオブジェクトとコピー先のオブジェクトが同じアドレスの値(インスタンス)を参照します。
- 片方のオブジェクトの値を変更すると、もう一方のオブジェクトの値も変更されます。
- 英語では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
関連の記事
JavaScriptのデータ型とデータ型を調べる方法
JavaScript if文で配列を比較するサンプル
静的型付けと動的型付けの違い