プログラミング

JavaScriptの参照型解説

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

JavaScriptにおける「参照型（Reference Type）」は、プログラムのデータを管理するための重要な概念の一つです。参照型は、プリミティブ型（数値、文字列、真偽値など）とは異なり、メモリ内でのデータの格納方法やアクセス方法が異なります。このため、JavaScriptのデータ型における参照型の特性を理解することは、効率的なプログラム作成において非常に重要です。

1. 参照型とは？

参照型は、変数が実際のデータを直接保持するのではなく、そのデータが格納されているメモリ上の「場所」を指し示す型です。具体的には、オブジェクト、配列、関数、日付などのデータ型が参照型に該当します。

関連記事

例えば、変数にオブジェクトを代入した場合、その変数にはオブジェクトそのものの「参照」が格納されます。この参照を通じてオブジェクトにアクセスし、変更を加えることができます。参照型の変数を別の変数に代入すると、実際のデータはコピーされるのではなく、同じメモリ位置を指し示す「参照」がコピーされます。この点が、プリミティブ型とは異なる重要な特徴です。

2. 参照型とプリミティブ型の違い

参照型とプリミティブ型の最も大きな違いは、データの扱い方にあります。

  • プリミティブ型（値型）：
    プリミティブ型の変数はその値を直接保持します。値の変更があった場合、新たなメモリ位置に値が格納され、元の変数の値は変更されません。例：Number、String、Boolean、undefined、null など。

  • 参照型：
    参照型の変数は、実際のデータではなく、そのデータが格納されているメモリの位置を指し示します。このため、複数の変数が同じ参照を持つことができ、ひとつの変数でデータを変更すると、それがすべての参照に反映されます。例：Object、Array、Function など。

3. 参照型の挙動

参照型の変数に関して特に重要なのは、変数同士を代入したり、引数として渡したりする際に、コピーされるのは「参照（アドレス）」であり、実際のデータではないという点です。この性質により、参照型を扱う際には、予期しないデータの変更が生じることがあります。

例：オブジェクトを使った場合

javascript
let person1 = { name: 'Taro', age: 25 };
let person2 = person1; // person2はperson1と同じ参照を指し示す

person2.age = 30; // person2のageを変更

console.log(person1.age); // 30が表示される
console.log(person2.age); // 30が表示される

この例では、person1 と person2 は同じオブジェクトを指し示しているため、person2 の age を変更すると、person1 の age も変更されます。これは、両者が同じメモリ位置（オブジェクトの参照）を共有しているためです。

例：配列を使った場合

javascript
let numbers1 = [1, 2, 3];
let numbers2 = numbers1; // numbers2はnumbers1と同じ参照を指し示す

numbers2.push(4); // numbers2に4を追加

console.log(numbers1); // [1, 2, 3, 4]が表示される
console.log(numbers2); // [1, 2, 3, 4]が表示される

この場合も同様に、numbers1 と numbers2 が同じ配列を指し示しているため、numbers2 に新しい要素を追加すると、numbers1 も変更されます。

4. 参照型のコピーとスプレッド構文

参照型をコピーする際、オブジェクトや配列の「浅いコピー（shallow copy）」を作成することができます。これにはスプレッド構文（...）や Object.assign() を使用することが一般的です。しかし、浅いコピーでは、内部のオブジェクトや配列の参照はコピーされず、元のオブジェクトと同じ参照を共有することになります。深いコピー（deep copy）を作成するには、再帰的なコピー処理が必要です。

浅いコピーの例：

javascript
let original = { name: 'Taro', age: 25 };
let copy = { ...original }; // 浅いコピー

copy.age = 30;

console.log(original.age); // 25が表示される
console.log(copy.age); // 30が表示される

深いコピーの例：

javascript
let original = { name: 'Taro', details: { age: 25, city: 'Tokyo' } };
let copy = JSON.parse(JSON.stringify(original)); // 深いコピー

copy.details.age = 30;

console.log(original.details.age); // 25が表示される
console.log(copy.details.age); // 30が表示される

上記の例では、JSON.parse() と JSON.stringify() を使用して、オブジェクトの深いコピーを作成しています。これにより、元のオブジェクトとコピーされたオブジェクトは完全に独立したものとなります。

5. 参照型と関数

関数も参照型として扱われます。関数を変数に代入したり、引数として渡したりすることができます。関数が参照型であるため、変数に代入した関数を変更すると、その関数が指し示す動作に影響を与えます。

関数を変数に代入する例：

javascript
function greet() {
  console.log('Hello!');
}

let newGreet = greet; // 関数の参照を新しい変数に代入
newGreet(); // 'Hello!'が表示される

6. 参照型のメモリ管理

JavaScriptでは、参照型のデータがメモリ上でどのように管理されるかについても理解することが重要です。参照型のデータが不要になった場合、JavaScriptのガーベジコレクション（GC）機能がそのメモリを解放します。ガーベジコレクションは、参照されていないオブジェクトを自動的に検出してメモリを解放しますが、開発者が手動でメモリ管理を行う必要はありません。

7. まとめ

JavaScriptの参照型は、オブジェクト、配列、関数など、データを参照する方法を提供します。参照型を理解することは、変数間でデータを共有したり、効率的なメモリ管理を行ったりするために重要です。参照型は、値型と異なり、データの変更が他の変数に影響を与える

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