JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの値渡しと参照渡しをわかりやすく解説

値渡し（Pass by Value）とは

値渡しでは、関数を呼び出す際に、変数の「値そのもの」が引数として直接渡されます。そのため、関数の中で引数の値を変更しても、関数の外側にある元の変数には一切影響しません。JavaScriptは常に値渡しで動作するため、プリミティブ型（文字列や数値など）の値を書き換えても、元となるデータが変更されることはありません。

次の例では、変数「a」に値1が代入されています。しかし、関数「change」の中で引数に対して値2を代入しています。JavaScriptは常に値渡しであるため、表示される結果は「2」ではなく「1」となります。

コード例

<html>
<body>
<script>
   let a = 1;
   let change = (val) => {
      val = 2
   }
   change(a);
   document.write(a);
</script>
</body>
</html>

実行結果

1

参照渡し（Pass by Reference）とは

一方、引数として値ではなく「アドレス（参照）」が渡されるケースもあります。この場合、関数内で値を変更すると、関数の外側にある元の変数にも影響が及びます。これが参照渡しと呼ばれる挙動です。JavaScriptでは、主に配列やオブジェクトが参照渡しと同じように振る舞います。

次の例では、関数「change」の外側でオブジェクト「a」が宣言されています。ここで注目すべきは、変数「a」が変更（ミューテーション）されたのであって、値2が新しく代入されたわけではないという点です（例2との違いに注意してください）。参照渡しが起こるのは、このようなミューテーション（破壊的変更）が発生したときです。

例1：プロパティを変更（ミューテーション）する場合

<html>
<body>
<script>
   let a = {num:1};
   let change = (val) => {
      val.num = 2
   }
   change(a);
  document.write(JSON.stringify(a));
</script>
</body>
</html>

実行結果

{"num":2}


次の例では、ミューテーションではなく、変数「a」に値2を持つ新しいオブジェクトが代入されています。この場合は値渡しと同じ挙動になるため、関数の外側にある元の変数には何ら影響を与えません。

例2：新しいオブジェクトを代入する場合

<html>
<body>
<script>
   let a = {num : 1};
   let change = (val) => {
      val = {num :2};
   }
   change(a);
   document.write(JSON.stringify(a));
</script>
</body>
</html>

実行結果

{"num":1}

まとめ：違いを見比べる

両者の違いを整理すると、以下の表のようになります。

 値渡し参照渡し
主な対象プリミティブ型（数値・文字列・真偽値など）オブジェクト・配列
渡されるもの値のコピー参照（メモリ上のアドレス）
関数内での変更の影響元の変数には影響しないミューテーションを行うと元の変数も変更される


なお厳密に言えば、JavaScriptではオブジェクトを渡す場合でも「参照そのもの」が値としてコピーされて渡されます（この挙動は「共有渡し（Call by Sharing）」とも呼ばれます）。そのため、例2のように引数を丸ごと再代入しても元の変数は変わりませんが、例1のようにオブジェクトの内部を変更すれば元の変数にも反映されるのです。「プロパティの変更＝元のデータにも影響」「変数への再代入＝影響なし」というポイントを押さえておくと、バグの原因を特定しやすくなります。


  1. 【初心者向け】HTMLフォームの値をJavaScriptで取得してコンソールに表示する方法

    HTMLフォームに入力された値を取得するには、valueプロパティを使用します。本記事では、テキストボックスに設定された値をJavaScriptで読み取り、ブラウザのコンソールに出力する方法を、実際のコード例とともに解説します。取得対象となるHTMLフォームの例まず、以下のようなテキスト入力フィールドがあるとします。<input type="text" id="getValues" value="My Name is John Smith" />このinput要素には、id属性として「getValues」が設定され、初期値

  2. C#の値型と参照型の違いを徹底解説！メモリの仕組みとサンプルコードで比較

    C#におけるすべての型は、大きく分けて「値型」と「参照型」という2つのカテゴリに分類されます。この2つの違いを正しく理解することは、バグの防止やパフォーマンスの最適化において非常に重要です。本記事では、それぞれの型の特徴、動作の仕組み、そして実際のコード例を使った挙動の違いについて詳しく解説します。 値型とは 値型の変数は、データそのものを直接保持します。各変数が独自のデータコピーを持つため、ある変数の値を変更しても、別の変数やオブジェクトには一切影響しません。 C#における値型には、以下のようなものがあります。 int、float、double などのすべての数値型 char 型および b