<javascript>データ型の種類と参照型の値を取り扱う際の注意点

データ処理：型の種類

javascriptで取り扱うデータには、大きく分けて2種類あります。

• 基本型（プリミティブ型）
• 参照型（オブジェクト型）

基本型（プリミティブ型）

• 数値型(number)
• 文字列型(string)
• 論理値型(boolean)
• 特殊型(null/undifind)

特長

• 変数には、値が直接格納される
• 値の受け渡し時には、値そのものが受け渡される

var a, b;
a = 0;
b = a;
b = 5;
console.log(b); // 5
console.log(a); // 0 <-値自体が受け渡されたため、aは変わらない

参照型（オブジェクト型）

• オブジェクト(object)
• 配列(array)
• 関数(function)

特長

• 変数には値が格納されている配列の場所（メモリアドレス）が格納される
• 値が変更されると、配列自体の値が変更されるため、参照先が同じになっている変数全てに影響がある

var a, b;
c = [0,1,2];
d = c;
d[0] = 7;
console.log(d) // [7,1,2]
console.log(c) // [7,1,2] <- 参照先が渡されたため、cも変わる

この場合、 dは参照するアドレスがcから受け渡されたため、dが参照している配列=cが参照している配列となります。 そのため、dで配列の中身を編集すると、cも同じく変化してしまいます。

オブジェクトの値についての注意

オブジェクトは参照型ですが、 下記のような例では、一見して基本型と同じような挙動に見えます。

var e, f;
e = document.getElementById("hoge");
f = e;
f = document.getElementById("fuga"); //この時点で新しい参照先が作成される

console.log(e) // <div id='hoge'></div>
console.log(f) //<div id='fuga'></div> (eは変わらない)

この場合、f=eのときに、eの参照先をコピーしたのではなく、 fが新しい参照先を作成したため、eとfが異なる状態となります。