JavaScriptのプリミティブ型で参照渡し的なことをする

よくJavaScript界隈で見られる変数に関する話題として、「値渡し/参照渡し」が上がりますが、そもそもJavaScriptにはC++のような参照渡しなど存在しないです。それなのにわざわざ値渡し、参照渡しと分類することで、勝手が違うC++の参照渡しと混同しかねないです。

引用元　：　https://qiita.com/yuta0801/items/f8690a6e129c594de5fb

少なくともC++的な参照渡しはできません。

プリミティブ型 vs 参照型

ところが不思議なことが１つあります。

時々参照渡し的挙動をすることがあるためです。

たとえばオブジェクトとか配列などですね。

▼ こんなコードを考えてみる

function hoge(arr){
  for(let i=0; i<arr.length; ++i){
    arr[i] = "hoge";
  }
}

const arr = ["fuga","fuga"];

console.log(arr);
  /// => ['fuga', 'fuga']

hoge(arr);

console.log(arr);
  /// => ['hoge', 'hoge']

function hoge(arr){

for(let i=0; i<arr.length; ++i){

arr[i] = "hoge";

}

const arr = ["fuga","fuga"];

console.log(arr);

/// => ['fuga', 'fuga']

hoge(arr);

console.log(arr);

/// => ['hoge', 'hoge']

関数内の変更が外でも反映されてます。

こういう現象はオブジェクト・配列などプリミティブ型以外で見られます。それをもって「やっぱりJavaScriptには参照渡しがあるんだ！」となるのは早計です。

この挙動が起こる仕組みはどうしてなのか…？

先ほどのqiita記事にその答えが載っていました。

▼ qiita記事のコメントから拝借

変数が保持してる値を渡すのが値渡しです。参照型変数が保持してる値は参照です。参照の先にデータ＝オブジェクトがあります。オブジェクトがどこかに存在していて、そのオブジェクトがどこにあるかを変数に保持します。参照型変数が保持してる値＝参照を渡すのも値渡しです。参照先のオブジェクトはコピーしません。以下のような引数の渡し方ができます。プリミティブ型変数の参照渡し（JavaScriptはできない）プリミティブ型変数の値渡し参照型変数の参照渡し（JavaScriptはできない）参照型変数の値渡し参照型変数を参照渡ししようが値渡ししようが、参照先のオブジェクトの内容を変更すれば呼び出し元から参照してるオブジェクトが書き変わります。

JavaScriptには２種類の変数があります。

プリミティブ型変数
数値や文字列などデータそのものを格納する変数。これは関数に参照渡しできないし、値渡しになる。
参照型変数
オブジェクトや配列など、まとまったデータへの参照を持つ変数。参照型変数を関数に渡した場合、それ自体は値渡し。でも個々のデータは値渡しされない。そのため参照渡しのような挙動になる

ちょっと分かりにくいかもしれない。

JavaScriptでは全ての変数は値渡しです。C++のような参照渡しは対応してないし、参照渡しに見えるのも参照型変数はデータそのものは値渡ししないから。

とても興味深い事実だと思います。

プリミティブ型の疑似参照渡し

ここまでの内容を踏まえて書きます。

プリミティブ型は参照渡しできません。
でも擬似的な参照渡しなら可能と言えます。

▼ プリミティブ型の擬似的参照渡しのコード例

function countup(__counter){
  __counter.counter++;
}

let counter = {counter:1};
countup(counter);
countup(counter);
console.log(counter.counter);
  /// => 3

function countup(__counter){

__counter.counter++;

}

let counter = {counter:1};

countup(counter);

console.log(counter.counter);

/// => 3

まるで参照渡し的な挙動になります。

やってることはプリミティブ型を参照型でラップして関数に渡し、その中で参照してるデータ（counter）を変更してるだけです。

この方法には欠点があるので要注意

これは便利そうに見えるけど欠点もあります。

コードの挙動が分かりにくくなる
引数の渡し方に注意が必要になる

ここまで書いてなんですが…
あんまり良い方法じゃない気がします。

もし代替案があれば教えてください。

JavaScriptのプリミティブ型で参照渡し的なことをする

JavaScriptに参照渡しなどない

プリミティブ型 vs 参照型

プリミティブ型の疑似参照渡し

この方法には欠点があるので要注意

関連記事

プロフィール

人気記事

検索してみる