こんにちは！ エンジニアのワカツキと申します。
今回は、参照渡しなどのJavaScriptにおける値の代入について詳しく解説します。
具体的な内容としては、
- 参照渡しとは何か
- プリミティブ型とオブジェクト型について
など値の代入について詳しく理解するために必要なJavaScriptの基礎知識と「オブジェクトを値渡しする方法」など応用的な内容まで踏み込んで行きます！
JavaScriptの参照渡しとは
参照渡しとは、代入が行われる際に、値をそのまま渡すのではなく、参照先を渡すような仕様のことを指します。
たとえば、a = bという代入文の場合、aにbの値を代入するのではなく、aにbの参照先を渡すことで、aを指定した時に参照先をたどってbを取得します。
また、これとは別に値をそのまま渡すような仕様のことを値渡しと呼びます。
そして、とても重要なポイントが、JavaScriptではプリミティブ型は値渡し、オブジェクト型は参照渡し、と決まっているということです。この点をしっかりと押さえておきましょう。
プリミティブ型とオブジェクト型
JavaScriptにおいては、数値・文字列・真偽値（論理値）に加えてnull・undefinedなどがプリミティブ型です。その他のオブジェクトは全てオブジェクト型と呼ばれます。
例えば、999などの数字や”こんにちは”などの文字列、trueなどの真偽値（論理値）はプリミティブ型です。
一方「配列」や「連想配列（Object）」はオブジェクト型の仲間になります。
値渡しと参照渡し
それでは、サンプルコードの結果を見ながら値渡しと参照渡しについて理解していきましょう！
値渡しをする方法
まずは、文字列の代入をしてみましょう。
var x, y; x = "Hello"; y = x; y = "Good Night"; console.log(x); console.log(y);
実行結果：
> "Hello" > "Good Night"
このように、文字列はプリミティブ型なので、値渡しになります。値渡しは値の参照ではなくコピーなので、元の値が影響されません。
参照渡しをする方法
それでは、オブジェクト型で参照渡しをする例をみてみましょう。
var x, y;
x = {greeting: "Hello"};
y = x;
y.greeting = "Good Night";
console.log(x.greeting);
console.log(y.greeting);
実行結果：
> "Good Night" > "Good Night"
オブジェクト型は元の値を参照するため、値を代入すると元のオブジェクトの値にも影響がでます。これが参照渡しです。
オブジェクトを値渡しする方法
先ほども述べた通り、JavaScriptではプリミティブ型が値渡し、オブジェクトは参照渡しと決まっています。
少し裏技的な方法ですが、オブジェクトを参照渡しではなく値渡しするためには、以下のような方法があります。
var x, y;
x = {greeting: "Hello"};
y = JSON.stringify(x);
y = JSON.parse(y);
y.greeting = "Good Night";
console.log(x.greeting);
console.log(y.greeting);
実行結果：
> "Hello" > "Good Night"
このコードでは、JSON（Objectオブジェクト）をstringifyメソッドで文字列化して、改めてパース（parseメソッド）することで、値渡しのように同じ値をコピーしています。
このような方法で、オブジェクトを値渡し（厳密にはコピー）を行うことが可能になります！
参照渡しの注意点
参照渡しでは、サンプルコードで確認したように元の値を書き換えてしまうので、代入した値が参照先なのか値そのものなのかを注意する必要があります。
また、元の値を書き換えたくない場合は、新しい値としてコピーする必要があり、その方法はオブジェクトの種類によって異なります。
まとめ
いかがだったでしょうか！
少し踏み込んだ内容ではありますが、JavaScriptで変数を扱う上で、参照渡しなのか値渡しなのかによって処理の結果が大きく異なります。
JavaScriptで代入を行う際には、それが値渡しなのか、参照渡しなのかを意識しながら、コーディングを行いましょう！
