プログラミング

JavaScriptの参照渡し完全ガイド

最終更新： 23/03/2025
1 分の読み

JavaScriptにおける参照渡し (By Reference) の完全ガイド

JavaScriptにおける「参照渡し(by reference)」は、変数がオブジェクトや配列などの複雑なデータ型を扱う際に重要な概念です。これを正しく理解することで、変数がどのようにデータを指し示し、どのように変更されるかを正確に把握できるようになります。本記事では、参照渡しの仕組み、具体的な使い方、注意点について詳しく説明します。

関連記事

1. 参照渡し (By Reference) とは？

「参照渡し」とは、変数がデータそのものを保持するのではなく、そのデータが格納されているメモリ上のアドレス（参照）を保持することを意味します。これに対して、「値渡し (By Value)」は、変数がデータのコピーを保持する方法です。

JavaScriptでは、プリミティブ型（文字列、数値、ブール値など）は「値渡し」によって扱われ、一方でオブジェクト（配列や関数を含む）は「参照渡し」によって扱われます。これにより、オブジェクトや配列を操作する際に、元のデータが変更される可能性があることを理解しておくことが重要です。

2. 値渡しと参照渡しの違い

値渡し (By Value)

プリミティブ型のデータ（例えば、number や string）は、変数がその値を直接持つため、コピーされます。以下のコード例を見てみましょう。

javascript
let a = 10;
let b = a;  // bはaの値をコピー

a = 20;

console.log(a);  // 20
console.log(b);  // 10

この場合、aとbは異なるメモリ領域を持ち、aの値を変更してもbには影響しません。

参照渡し (By Reference)

オブジェクトや配列は参照渡しによって扱われます。つまり、変数はそのデータのメモリアドレスを保持し、データ自体は複数の変数から共有されます。次のコードを見てみましょう。

javascript
let obj1 = { name: 'Alice' };
let obj2 = obj1;  // obj2はobj1の参照を指す

obj1.name = 'Bob';

console.log(obj1.name);  // 'Bob'
console.log(obj2.name);  // 'Bob'

ここでは、obj1とobj2は同じオブジェクトを指しているため、obj1のnameプロパティを変更すると、obj2にもその変更が反映されます。

3. 配列の参照渡し

配列もオブジェクトと同様に参照渡しされます。次のコードを見てみましょう。

javascript
let arr1 = [1, 2, 3];
let arr2 = arr1;  // arr2はarr1の参照を指す

arr1.push(4);

console.log(arr1);  // [1, 2, 3, 4]
console.log(arr2);  // [1, 2, 3, 4]

このように、arr1とarr2は同じ配列を参照しているため、arr1に新しい要素を追加すると、arr2にもその変更が反映されます。

4. 参照渡しを避ける方法

参照渡しを避けて、オブジェクトや配列をコピーする方法として、浅いコピーと深いコピーの2つがあります。

浅いコピー (Shallow Copy)

浅いコピーは、オブジェクトや配列の「最上位」のプロパティや要素のみをコピーし、ネストされたオブジェクトや配列は元のオブジェクトと参照を共有する方法です。

例えば、Object.assign()やスプレッド構文（...）を使って浅いコピーを作成することができます。

javascript
let obj1 = { name: 'Alice', details: { age: 25 } };
let obj2 = { ...obj1 };  // 浅いコピー

obj1.details.age = 26;

console.log(obj1.details.age);  // 26
console.log(obj2.details.age);  // 26 (参照が共有されている)

この場合、detailsプロパティはシャローコピーされているため、obj1.detailsを変更するとobj2.detailsにも影響が出ます。

深いコピー (Deep Copy)

深いコピーは、オブジェクトや配列を再帰的にコピーし、すべてのネストされたプロパティや要素までコピーします。これを行うためには、手動でコピー処理を行うか、ライブラリを使用することが一般的です。

例えば、JSON.parse()とJSON.stringify()を使用することで、簡単に深いコピーを作成することができます。

javascript
let obj1 = { name: 'Alice', details: { age: 25 } };
let obj2 = JSON.parse(JSON.stringify(obj1));  // 深いコピー

obj1.details.age = 26;

console.log(obj1.details.age);  // 26
console.log(obj2.details.age);  // 25 (深いコピーのため、変更されない)

このように、JSON.parse()とJSON.stringify()を使うことで、ネストされたオブジェクトまで完全にコピーされ、obj1の変更がobj2に影響を与えることはありません。

5. 参照渡しの注意点

参照渡しを使用する際には、以下の点に注意が必要です。

  • 予期しない副作用: 参照渡しにより、オブジェクトや配列を変更すると、その変更が他の変数にも影響を与えることがあります。このような副作用を避けるためには、浅いコピーや深いコピーを適切に使用することが重要です。

  • パフォーマンスの影響: 深いコピーを行う際には、再帰的にオブジェクトや配列をコピーするため、パフォーマンスに影響を与えることがあります。大きなデータをコピーする場合は、パフォーマンスを考慮した方法を選択しましょう。

  • 参照を渡さない: オブジェクトや配列を関数に渡す際、参照が渡されるため、関数内でそのデータを変更することができます。関数がデータを変更しないことを保証するためには、コピーを渡すことが望ましいです。

6. まとめ

JavaScriptにおける参照渡しは、オブジェクトや配列を扱う際に重要な概念です。参照渡しを理解することで、複数の変数が同じデータを指していることを把握し、データの変更に対する予期しない副作用を避けることができます。適切に浅いコピーや深いコピーを使い分け、効率的で安全なプログラミングを行いましょう。

最終更新： 23/03/2025
1 分の読み
Back to top button