1. TOPTOP
  2. Webサービス
  3. JavaScript

JavaScriptで学習する関数の引数の値渡しと参照渡しについて

thumbnail

JavaScriptでは関数の実引数を仮引数に渡す場合、データ型によって結果が挙動が異なります。プリミティブ型のデータ型を渡すときは値渡しになり、オブジェクト型のデータ型を渡すときは参照渡しになります。

プリミティブ型とオブジェクト型の特徴

それではプリミティブ型のデータ型とオブジェクト型のデータ型には、どんなデータがあるでしょうか?それぞれに属するデータ型具体例を挙げてみます。

プリミティブ型のデータ

- 数値  → 2, 102など
- 文字列 → Hello, abcなど
- 論理値 → true, false
- 特殊な値 → undefined, null

プリミティブ型とは基本型とも呼ばれ、以下のデータが挙げられます。プリミティブ値を変数に代入すると、変数にはその値が格納されます。

オブジェクト型のデータ

- 配列 → [apple, orange, grape]など
- 関数 → function hoge() { return ... }、function () { ... }など
- 正規表現 → /abc/、 .*
- オブジェクト → { name: bob, age: 13 }、{ color: red, method: function() {...} }など

プリミティブ型に属さないデータ型はオブジェクト型のデータ型と呼ばれ、複合的なデータを形成します。また変数にこれらのデータ型を代入すると、変数にはメモリ上の場所情報が格納されます。このメモリ上の場所情報のことを参照と言います。

プリミティブ型とオブジェクト型の使用例

次に関数の引数としてプリミティブ型のデータ型を使った場合と、オブジェクト型のデータ型を使った時の挙動の比較を行います。

プリミティブ型のデータ型の使用例(値渡し)

function add2(x) { return x = x + 2; }
var a = 4;
var b = add2(a);
console.log(" a = " + a + ", b = " + b); //  a = 4, b = 6

仮引数xに実引数の”a = 3″(プリミティブ型)がそのままコピーされて渡されることを値渡しと言います。

オブジェクト型のデータ型の使用例(参照渡し)

function add3(p) { p.x = p.x + 3; p.y = p.y + 3; return p; }
var a = {x:4, y:5};
var b = add3(a);
console.log(a, b); // Object a = {x: 7, y: 8}, Object b = {x: 7, y: 8}

仮引数pに実引数の”a = {x:4, y:5}”(オブジェクト型)が渡されることを参照渡しと言います。