データの参照についての備忘録

今回はデータの参照についての備忘録です。

データの参照についてってなんだか地味だなぁという印象がありますよね。
私も参照について勉強するとなった時にそう感じましたが、その地味な印象に反してJavaScriptにおいて非常に重要な仕組みであり、そして混乱しやすい物だと感じました。

このデータの参照についての仕様の理解を深めて行きたいと思います。

データの参照とは、わかりやすく考えるとメモリ空間に割り振られたアドレス（番地）に格納されたデータが、どの番地からどの番地に対して働きかけているか、という状態の事です。

それでは最もシンプルなデータの参照から考えていきます。

プリミティブ型の参照

変数に値を代入した場合の参照先

まずは簡単なプリミティブ型の参照から

let a = "hello";

この様に変数を宣言した時、メモリ空間の１番地に「”hello”」という文字列が、２番地に「a」という変数がそれぞれ生成され、２番地から１番地を参照している状態になります。

一般的な考え方としては変数aに文字列”hello”が代入されているわけですが、逆に言うと、aから”hello”を参照しているという状態になるわけです。

これを例えば

let a

という風に変数aの宣言だけした場合は、データの参照は行われていないという事になります。

プリミティブ型の再代入

それでは次に、変数aに違う値を再代入した時の挙動です。

let a = "hello"
let a = "bye"

この様に記述した場合重要な仕組みですが、１番地の「”hello”」が「”bye”」に置き換わるのではありません。
「”bye”」は新たに３番地に格納され、aの参照先が１番地から３番地へ変更される事になります。

この仕様を別の例を使って考えていこうと思います。

プリミティブ型を別の変数に代入した場合の挙動

まずはletで変数aを宣言し、文字列”hello”を格納
その後変数aを変数bに格納したあと、変数aに文字列”bye”を格納します。

let a = "hello";
let b = a;
a = "bye";
console.log(a, b);

この場合のaとbそれぞれの値はaが”bye”、bが”hello”となります。

これは、bにaを代入したが、参照先は同じでは無いという事の照明になります。

つまりbに代入されたのは1番地にある”hello”を参照しているというaの状態ではなく、メモリ空間に格納された”hello”という文字列を参照している状態が代入されたのです。

これがどういう事かというと、bにaを代入した時点で、新たに別の番地にもう一つ文字列”hello”が格納されて、bはその番地を参照しているという事になります。

オブジェクトの参照

プリミティブ型の参照は理解できたと思います。
次はオブジェクトの参照について考えていきます。

変数にオブジェクトを代入した場合の参照先

まずは変数aにnumber:1というプロパティを持ったオブジェクトを代入します。

const a = {
number: 1
};

この時に何が起きているかと言いますと…

この様になっています。

オブジェクトを別の変数に代入した後にプロパティを変更した場合

まずはコードを見てみます。

const a = {
number: 1
};
const b = a;
a.number = 2;
b.number2 = 1;
console.log(a,b);

この様に、オブジェクトaを変数bに代入し、その後aのnumberの値を変更し、bには新たにnumber2というプロパティを設定します。

この時コンソールに表示されるのは

{number: 2,number2: 1} {number: 2,number2: 1}

となります。

これはプリミティブ型の時とは違い、aとbのオブジェクトが情報を共有しているという事になります。

オブジェクトを他の変数に代入した場合は、その中のプロパティを参照している【{}】をコピーして参照するため、その【{}】の参照先プロパティは同じ番地に存在しているからです。

ここが非常に重要なポイントになるので、しっかり押さえておきたいですね。

まとめ

今回はJavaScriptにおけるデータの参照について、基本中の基本を押さえていきました。

プリミティブ型の参照については実際のプログラムにおいてそこまで関わってくることは無いかもしれませんが、オブジェクトの参照は頻繁に考える事になりそうですね。