値渡しと参照渡しを知りプログラムの挙動を正しく把握しよう【JavaScript入門】
2015/12/21
以前、JavaScriptの基礎知識として関数に関する記事を書きましたが、関数を作成するにあたって知っておいたほうが良い知識に値渡しと参照渡しがあります。
値渡しと参照渡しとは関数への引数の渡し方に関する用語です。
この記事を理解するには関数と配列・オブジェクトを理解する必要があります。
では、早速ソースコードを見ていきましょう。
function reverseList(target){
target.reverse(); //配列を反転
return target;
}
var data = [0,1,2];
var result = reverseList(data);
console.log(result[0], result[1], result[2]); //2, 1, 0 と出力。期待通り
console.log(data[0], data[1], data[2]); //2, 1, 0 と出力。何故かdataの中身まで変更されている！！
この例では渡された配列の値を逆順にして返すreverseList関数を定義しました。11行目ではreverseList関数の実行結果を出力しています。8行目のdata配列の中身と比較して逆順になっているので期待通りの結果です。
しかし、問題となるのが12行目です。元データである配列dataまでが逆順になってしまいました。実はこれが参照渡しの特性なんです。参照渡しとはいわゆるショートカット（macではエイリアス）のようなもので関数に渡したデータに変更を加えれば元のデータも変更されます。上記の例では配列targetは配列dataの参照（ショートカット）ということです。
逆に元のデータに影響を与えない引数の渡し方を値渡しといいます。参照渡しがショートカットを渡すのに対し、値渡しはコピーを渡します。
では「どうやって参照渡しと値渡しを指定するのか？」ということになりますが、これはプログラマーが自由に決められるものではありません。JavaScriptでは配列とオブジェクトは参照渡しとなります。他（数値、文字列など）は値渡しとなります。
また、下記のように配列を他の変数に代入した場合も参照が使われます。
var data = [1,2,3]; var data1 = data; //data1とdataは同一のものとして扱われる
では、下記のような場合はどうでしょうか？
var data = [1,2,3]; var data1 = data[1];
この場合は参照渡しではなく値渡しになります。何故なら変数data1に代入されたは配列自身ではなく配列の要素だからです。このケースでは配列の要素は数値であるため値渡しになります。もし、配列の要素が配列またはオブジェクトであれば（配列やオブジェクトは入れ子にすることが可能です）参照渡しになります。
再度言いますが参照渡しは元のデータにも影響を及ぼす為取り扱いには細心の注意を払いましょう。