JavaScript 変数: プリミティブと参照型を理解する

JavaScript では、プリミティブ と 参照型 という 2 つの基本的な種類のデータが変数に格納されます。これら 2 つのタイプの違いを理解することは、メモリ管理と、データの共有、保存、変更の制御にとって不可欠です。この記事では、これらの違いを詳しく掘り下げ、実際の例を示し、両方の種類を効率的に処理する方法を検討します。

---

1.プリミティブと参照型

プリミティブ

最も単純な種類のデータはプリミティブと呼ばれます。変更不可能なデータを変数に直接格納します。 JavaScript がサポートするプリミティブ型は次のとおりです:

• 文字列: 「こんにちは」
• 数: 42
• ブール値: true または false
• ヌル
• 未定義
• シンボル
• bigint

主な特徴:

• 不変: 値を直接変更することはできません。
• 値ごとに保存されます。

参照型

一方、参照型はオブジェクトのメモリ位置を保存します。変数は実際の値を保存するのではなく、メモリ アドレスへの参照を保存します。例としては次のとおりです。

• オブジェクト: { 名前: 'アリス' }
• 配列: [1、2、3]
• 関数: function() { console.log('hello'); }
• 日付: 新しい日付()

主な特徴:

• Mutable: 内容は変更できます。
• 参照によって保存。

---

2.動作中のプリミティブと参照型

// Primitive Example
let a = 10;
let b = a;
b = 20;
console.log(a); // Output: 10

// Reference Example
let obj1 = { name: 'Alice' };
let obj2 = obj1;
obj2.name = 'Bob';
console.log(obj1.name); // Output: 'Bob'

説明:

• プリミティブ: a を b に代入すると、値のコピーが作成されます。 b を変更しても、a は独立しているため影響しません。
• 参照型: obj1 と obj2 は両方とも同じメモリ位置を指します。 obj2 経由でコンテンツを変更すると、obj1 も更新されます。

---

3.コンセプトを視覚化する

• プリミティブ: 各変数を値を含む独自のボックスとして想像してください。コピーすると、独立した値を持つ新しいボックスが作成されます。
• 参照型: 変数は、共有コンテナーを指すラベルと考えてください。同じコンテナを参照するすべてのラベルは、そのコンテンツに加えられた変更の影響を受けます。

---

4.突然変異と割り当て

参照型を使用する場合は、mutation と assignment の違いを理解することが重要です。

Mutation: 既存のオブジェクトの内容を変更します。

// Primitive Example
let a = 10;
let b = a;
b = 20;
console.log(a); // Output: 10

// Reference Example
let obj1 = { name: 'Alice' };
let obj2 = obj1;
obj2.name = 'Bob';
console.log(obj1.name); // Output: 'Bob'

Assignment: 参照を新しいオブジェクトに変更します。

let arr = [1, 2, 3];
let arr2 = arr;
arr2.push(4);
console.log(arr); // Output: [1, 2, 3, 4]

---

5.オブジェクトと配列のコピー

浅いコピー:

オブジェクトまたは配列の別のコピーを作成するには、スプレッド演算子 (...) または Object.assign() を使用します。

let arr = [1, 2, 3];
let arr2 = arr;
arr2 = [4, 5, 6];
console.log(arr); // Output: [1, 2, 3]

ディープコピー:

ネストされたオブジェクトの場合、ディープコピーが必要です。一般的なアプローチは、JSON.parse(JSON.stringify()).
を使用することです。

let original = { name: 'Alice' };
let copy = { ...original };
copy.name = 'Bob';
console.log(original.name); // Output: 'Alice'

---

6.値渡しと参照渡し

プリミティブ (値渡し):

関数にプリミティブを渡すとき、値のコピーが渡されます。

let nested = { person: { name: 'Alice' } };
let deepCopy = JSON.parse(JSON.stringify(nested));
deepCopy.person.name = 'Bob';
console.log(nested.person.name); // Output: 'Alice'

参照型 (参照渡し):

参照型を渡す場合、メモリの場所への参照が渡されます。

function modifyValue(x) {
  x = 20;
}
let num = 10;
modifyValue(num);
console.log(num); // Output: 10

---

7.プリミティブラッパータイプ

プリミティブは不変ですが、JavaScript はプリミティブを一時的にオブジェクトにラップして、メソッドやプロパティへのアクセスを許可します。

function modifyObject(obj) {
  obj.name = 'Bob';
}
let person = { name: 'Alice' };
modifyObject(person);
console.log(person.name); // Output: 'Bob'

説明:

文字列プリミティブ「hello」は、length プロパティにアクセスするために一時的に String オブジェクトにラップされます。ラッパーは操作後に破棄されます。

---

8.ベストプラクティス

1. 参照型には const を使用します: const を使用してオブジェクトと配列を宣言すると、再割り当ては防止されますが、内容の変更は可能になります。

let str = 'hello';
console.log(str.length); // Output: 5

1. 意図しない突然変異を避ける:
   独立したコピーが必要な場合は、必ずスプレッド演算子またはディープ コピー手法を使用してコピーを作成してください。

2. ディープコピーをいつ使用するかを知る:
   浅いオブジェクトの場合はスプレッド演算子で十分ですが、ネストされた構造では参照の問題を回避するために深いコピーが必要です。

3. 不変性の活用:
   Immutable.js などのライブラリを使用するか、関数型プログラミング手法を採用して、意図しない突然変異によって引き起こされるバグを最小限に抑えます。

---

9.よくある落とし穴

1. 変異を伴う紛らわしい代入:
   オブジェクトを変更しているのか、参照を再割り当てしているのかに注意してください。

2. 共有参照の変更:
   共有オブジェクトへの変更は、プログラムの他の部分でも使用されている場合、予期せぬ結果を招く可能性があります。

3. すべてのコピーが独立していると仮定します:
   浅いコピーでは、ネストされた構造の変更を防ぐことができないことに注意してください。

---

結論

JavaScript の中心的な考え方の 1 つは、プリミティブ と 参照型 の区別です。これは、関数へのデータの送信方法、変数の管理方法、コード内の予期しない副作用の防止方法に影響します。これらのアイデアを理解し、ベスト プラクティスを使用することで、より信頼性が高く保守しやすい JavaScript コードを構築できます。

Github Linkedin でフォローしてください

以上がJavaScript 変数: プリミティブと参照型を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。