JavaScriptのデータの値渡しと参照渡しの違いを理解する

値渡しと参照渡し

データを変数から別の変数に渡す時、「値渡し」と「参照渡し」が存在しており、挙動が異なります。

この違いを知っておかないと、デバック作業に苦労することになりますので、概念的な説明になりますが、理解しておきましょう。

データ型と紐付けると、下記の様な関係性になります。

データ型意味
プリミティブ型値渡し100, ‘佐藤’
オブジェクト型参照渡し[100,200,300]

プリミティブ型は値渡し

プリミティブ型の値渡しは下記の様な挙動をします。サンプルコードをご覧ください。

Output
変数 a の現在の値
変数 b の現在の値
Pug
div
		table.table
			tbody
				tr
					th 変数 a の現在の値
					td#targetText
				tr
					th 変数 b の現在の値
					td#targetText1
JavaScript
const targetText = document.getElementById( 'targetText' );
const targetText1 = document.getElementById( 'targetText1' );

let a = 100; //変数を定義
let b = a; //変数bに変数aの値を渡す(値渡し)

a = 1000;

targetText.textContent = a;
targetText1.textContent = b;

このサンプルスクリプトでは、以下のことをしています。

  1. 変数aを定義して100を代入
  2. 変数bを定義して変数aの値を代入(値渡し)
  3. 変数aに1000を代入して上書き
  4. 変数aと変数bを出力

この時変数aの出力結果は1000です。一方で、変数bの出力結果は100のままです。

このサンプルコードでは、「値渡し」が行われているので、変数aの値を更新しても、更新前に定義されている変数bの値は100です。

オブジェクト型は参照渡し

オブジェクト型は参照渡しになります。下記のサンプルコードをご覧ください。

Output
変数 c の現在の値
変数 d の現在の値
Pug
div
		table.table
			tbody
				tr
					th 変数 c の現在の値
					td#targetText2
				tr
					th 変数 d の現在の値
					td#targetText3
JavaScript
const targetText2 = document.getElementById( 'targetText2' );
const targetText3 = document.getElementById( 'targetText3' );

let c = [100,200,300]; //変数を定義
let d = c; //変数bに変数aの値を渡す(参照渡し)

c[0] = 1000;

targetText2.textContent = c;
targetText3.textContent = d;

このサンプルコードでは、以下のことをしています。

  1. 変数cを定義して配列[100,200,300]を代入
  2. 変数dを定義して変数cの値を代入(参照渡し)
  3. 変数c[0]に1000を代入して上書き]
  4. 変数cと変数dを出力

この時変数cの出力結果と変数dの出力結果は同じです。

このサンプルコードは値が配列です。これはオブジェクト型になりますので、「参照渡し」が行われます。

この様に配列など、オブジェクト型を代入した時、その中身は不変ではないという特徴があり、あとで中身の一部を書き換えた場合、書き換える前に定義している変数に対しても影響を与えます。

この様に値渡しと参照渡しの違いを意識せずに開発を進めていくと、不具合が起きた時に原因に気づくことができないので、常に意識しておくことをオススメします。

インストラクター
コメント

コメントを残す