JavaScriptでの値渡しと参照渡し【現役エンジニアが解説】

PROGRAM

今回は、JavaScriptでの値渡しと参照渡しについて、それぞれの場合に分け、簡単に解説していきます。

値渡し

JavaScriptでは、プリミティブ型は全て値渡しとなります。

プリミティブ型とは、文字列、数値、BigInt、真偽値、undefined、シンボルの型のことです。

var a, b;
a = 0;
b = a;
console.log(b); // 0
b = 1;
console.log(b); // 1
console.log(a); // 0

上記のコードのように、プリミティブ型では代入の際に値そのものが渡るため、独立性が保たれます。

参照渡し

JavaScriptでは、オブジェクト型は全て参照渡しとなります。

オブジェクト型とは、簡単に言えば、配列や連想配列といったプリミティブ型以外の型のことです。

var a, b;
a = [0,1];
b = a;
console.log(b); // [0,1]
b[0] = 1;
console.log(b); // [1,1]
console.log(a); // [1,1]

上記のコードのように、オブジェクト型では代入の際には参照先が渡るため、独立性がなく、値が連動してしまいます。

オブジェクトの値渡し

現在、JavaScriptでオブジェクト型の値渡しを行う正攻法はありません。

しかし、配列の場合は空の配列を追加することで、連想配列の場合は一度JSON化して戻すことで値渡しできます。

var a, b;
a = [0,1];
b = a.concat();
console.log(b); // [0,1]

b[0] = 1;
console.log(b); // [1,1]
console.log(a); // [0,1]

var c, d;
c = {a:0,b:1};
d = JSON.stringify(c);
d = JSON.parse(d);
console.log(d); // {a:0,b:1}

d.a = 1;
console.log(d); // {a:1,b:1}
console.log(c); // {a:0,b:1}

上記のコードのように、配列はconcatメソッドで空の配列を追加することで、連想配列はJSON.stringifyメソッドとJSON.parseメソッドで一度JSON化してから戻すことで値渡しできます。