概要
JavaScriptのバグの多くは、「何が渡されて、何が変わったのか」が見えていないところから始まる。
その本質にあるのが、プリミティブ型（値を直接渡す）と参照型（実体の参照という値を渡す） の違いだ。
この理解が曖昧なままコードを書くと、オブジェクトが意図せず書き換わったり、配列が破壊されたりする。
意図しない副作用が“静かに”発生する、最も根深いバグ要因の一つである。
この記事では、プリミティブと参照型の本質的な違いを明確にし、実務でどう活かすかまでを徹底的に掘り下げる。
補足
※ 厳密には、JavaScriptはすべて「値渡し（pass by value）」です。
オブジェクトや配列は「参照を値として渡す」ため、関数内で状態が変化するように見えるだけです。
本記事では便宜上「参照渡し」と表現している箇所がありますが、正確には「同じ参照が渡っている」と読み替えてください。
対象環境
モダンブラウザ対応のJavaScript（ES6〜）
Node.js含む全実行環境
そもそも「プリミティブ型」とは何か？
プリミティブ型（Primitive）は、値そのものを扱う型。
✅ 対象となる型：
string
number
boolean
null
undefined
symbol
bigint
特徴：
- 値そのものを保持・渡す
- 変更不可（イミュータブル）
- コピーすれば完全に分離された値になる
let a = 'hello';
let b = a;
b = 'world';
console.log(a); // 'hello'（変更されていない）
→ a と b は完全に独立した値
「参照型」とは何か？
参照型（Reference）は、実体へのポインタを扱う型。
✅ 対象となる型：
object
array
function
特徴：
- 実体はヒープに格納され、変数はその参照（ポインタ） を持つ
- コピーしても同じものを指している
- 一方を変更するともう一方も変わる
let obj1 = { name: 'Alice' };
let obj2 = obj1;
obj2.name = 'Bob';
console.log(obj1.name); // 'Bob'（obj1 も書き換わっている）
→ これはobj1 と obj2 が同じ場所を見ているため
破壊的コードと非破壊的コードの差
// 破壊的（mutate）
const list = [1, 2, 3];
list.push(4); // 変更される
// 非破壊的（immutable）
const newList = [...list, 4]; // listは変わらず、新しい配列を返す
→ React / Vue / Redux など、状態管理が重要な設計では「非破壊」が必須
→ 参照型をそのまま操作すると、予期せぬ状態変化が発生する
関数渡しの落とし穴
function mutate(obj) {
obj.value = 100;
}
const data = { value: 0 };
mutate(data);
console.log(data.value); // 100 ← 副作用が発生
→ 参照型を引数に渡すと、関数内で外部の状態を破壊できる
✅ 対策：構造をコピーして渡す
function safeMutate(obj) {
const copy = { ...obj };
copy.value = 100;
return copy;
}
const result = safeMutate(data);
console.log(data.value); // 0
console.log(result.value); // 100
→ 安全な状態変更には、ディープコピー or シャローコピー + 再代入が有効
比較の罠：プリミティブと参照型の ===
'hello' === 'hello' // true
{} === {} // false
[] === [] // false
→ 参照型は“中身”ではなく“場所”が違えば false
実務Tips：参照型と付き合う4つの原則
- 引数でオブジェクトや配列を受け取る関数は、副作用を避ける
- 再利用される変数にはシャローコピー / ディープコピーを必ず検討
- 状態管理ではイミュータブルなパターン（スプレッド演算子など）を徹底
- 参照型を比較するときは、参照の一致か、値の比較かを意識する
結語
JavaScriptは「すべてがオブジェクト」という呪文のもと、プリミティブと参照型が曖昧に扱われがちだ。
だが、バグの原因の多くは、その構造の違いに起因する。
- 値で渡されるのか
- 参照でつながっているのか
- それがどのスコープで共有されるのか
この3点を見極めることが、副作用のないロジックと保守性の高い設計を作る鍵になる。
コードを制御するとは、状態と記憶を理解することだ。
JavaScriptの型は、ただの仕様ではなく、「どこで何が変わるか」を読み解くためのレンズである。