配列は扱いに注意!参照渡しを理解する | [旧] WEB向上中

[旧] WEB向上中

webデザイナーとして日々奮闘する中、色々と忘れず頑張っていければと、web周りの技術や情報をメモっています。

JavaScriptでは、配列を変数に格納すると参照渡しになります。
参照渡しとは値ではなく値の格納場所だけを教えることをいいます。

たとえば
var globalVariable = 'GLOBAL';
function change (_tmp) {
var localVariable = _tmp;
localVariable = 'local';
return localVariable;
}
Controler(globalVariable);
alert(globalVariable)
この実行結果は「GLOBAL」と表示されます。
これはよくある感じでイメージしやすいと思います。

これが配列になると
var globalVariable = ['A', 'B', 'C', 'D'];
function change (_tmp) {
var localVariable = _tmp;
localVariable.pop();
return localVariable;
}
Controler(globalVariable);
alert(globalVariable)
これはどうなるでしょうか?
先ほどの感覚でいくと「'A', 'B', 'C', 'D'」と表示されそうですが、結果は「'A', 'B', 'C'」となります。
これが参照渡しです。

流れを追っていくと、globalVariableに格納された値は、Controler関数に引数として渡されます。
そしてControler関数内で、localVariableに格納されるのですが、この時にlocalVariableは、globalVariableの値をコピーしたのではなく、globalVariableが格納されているメモリの場所を記憶するのす。その結果localVariableの末尾をpop()で削除すると、localVariableが見ているglobalVariableのデータに適用される事となります。この一覧の流れが参照渡しです。

この考えはJavaScriptに限らず色々なほとんどの言語で存在する考え方なので、覚えておいた方が良いと思います。(どれもが配列が参照渡しとは限りませんので、ご注意を)