概要
JavaScriptにおける変数の「参照」という概念は、初学者から中級者までが最も混同しやすいトピックの一つです。多くのエンジニアが「オブジェクトは参照渡しである」という通説を信じていますが、厳密にはJavaScriptは「値渡し（Pass by Value）」のみを採用する言語です。しかし、なぜオブジェクトを操作すると元の変数まで影響を受けるのか。本稿では、メモリの仕組み、プリミティブ型と参照型の本質的な違い、そしてJavaScriptエンジンが内部で行っているポインタ操作のメカニズムを紐解き、プロフェッショナルなフロントエンド開発において必須となる変数の参照概念を徹底解説します。
メモリ領域と変数の実体
JavaScriptの変数は、メモリ上のどこかに存在する値を指し示す「名前付きの箱」ではありません。正確には、メモリ内の「スタック（Stack）」領域と「ヒープ（Heap）」領域を理解する必要があります。
プリミティブ型（Number, String, Boolean, Null, Undefined, Symbol, BigInt）は、スタック領域にその値自体が直接格納されます。一方、オブジェクト（Object, Array, Function）は、ヒープ領域にデータ本体が格納され、スタック領域にはそのデータが存在する「メモリ上のアドレス（参照先）」のみが格納されます。
「変数は参照できますか？」という問いに対する答えは、「プリミティブ型は値そのものを保持し、オブジェクト型はその値を保持するのではなく、ヒープ上のアドレスを保持しているため、そのアドレスを介して間接的に参照している」となります。
値渡しと参照渡しという誤解の正体
JavaScriptには「参照渡し（Pass by Reference）」という仕組みは存在しません。ある関数にオブジェクトを渡すとき、渡されているのは「オブジェクトそのもの」ではなく、「オブジェクトを指し示すアドレスのコピー」です。これを専門用語で「共有渡し（Pass by Sharing）」と呼びます。
以下のコードを見てください。
let obj = { count: 1 };
function modify(o) {
o.count = 2; // ヒープ上の実体を書き換える
}
modify(obj);
console.log(obj.count); // 2
function reassign(o) {
o = { count: 3 }; // ローカル変数の指し先を変えるだけ
}
reassign(obj);
console.log(obj.count); // 2 （元の変数は影響を受けない）
この結果が示す通り、関数内で引数の変数を再代入しても、呼び出し元の変数は変化しません。もし「参照渡し」であれば、reassign関数内で外側の変数そのものが書き換わるはずです。この挙動を理解することは、Reactの状態管理や不変性（Immutability）を扱う上で極めて重要です。
不変性（Immutability）と参照の罠
モダンなフロントエンド開発において、ReactやReduxを使用する場合、「参照の同一性」がパフォーマンスの鍵を握ります。
配列やオブジェクトを直接変更（ミューテーション）すると、参照先のアドレスが維持されたまま中身だけが変わるため、Reactは「PropsやStateが変わっていない」と誤認し、再レンダリングをスキップしてしまうことがあります。
// 不適切な実装（参照が同じまま中身が変わる）
const list = [1, 2, 3];
list.push(4);
// 正しい実装（新しい参照を生成する）
const newList = [...list, 4];
スプレッド演算子（…）を用いることで、新しいヒープ領域に新しいアドレスを作成し、Reactなどのフレームワークに「データが更新された」というシグナルを送ることができます。これが「参照の比較」を効率化する現代的なアプローチです。
実務におけるメモリリークと循環参照の回避
変数の参照を深く理解することは、メモリリークの防止にもつながります。JavaScriptのガベージコレクション（GC）は、主に「マーク・アンド・スウィープ」アルゴリズムを使用しており、ルートオブジェクトから到達できない変数をメモリから解放します。
しかし、クロージャやグローバル変数にオブジェクトを保持し続けると、GCはそれを「まだ使用中」と判断し、メモリを解放しません。特にイベントリスナーの登録やタイマー処理（setInterval）において、参照を適切に解除しないことは、大規模なアプリケーションにおいてメモリ使用量が肥大化する最大の原因となります。
実務アドバイス：参照を意識したコーディングの作法
1. プリミティブ型は「値」、オブジェクト型は「アドレス」として脳内で区別する。
2. 関数引数として受け取ったオブジェクトを直接書き換える（ミューテーション）ことは避ける。常に新しいオブジェクトを返す「純粋関数」を心がける。
3. 複雑なネスト構造を持つオブジェクトをコピーする場合は、シャローコピー（浅いコピー）の限界を理解し、必要に応じてディープコピーや構造化複製（structuredClone）を活用する。
4. useEffectの依存配列など、参照の比較が重要な場所では、不要なオブジェクトの再生成を避け、useMemoやuseCallbackで参照の安定化を図る。
まとめ
「変数は参照できますか？」という問いは、JavaScriptのメモリ管理モデルを問う本質的な質問です。JavaScriptはすべてを「値」として扱いますが、その値が「実データ」なのか「アドレス」なのかという違いが、プログラムの挙動に決定的な差を生みます。
参照の仕組みを正しく理解することは、単にバグを防ぐだけでなく、Reactなどの宣言的UIライブラリにおいて、最適化されたパフォーマンスの高いコードを書くための土台となります。変数を扱う際、常に「今、自分は実データを操作しているのか、それともアドレスをコピーしているのか」を意識してください。この視点を持つだけで、あなたのコードの堅牢性は格段に向上するはずです。エンジニアとして、言語仕様の深淵に触れ、メモリレベルでの挙動をコントロールするスキルを磨き続けましょう。