JavaScriptの値渡しとは？オブジェクト参照の仕組みを実例で解説

JavaScriptは基本的に値渡し（pass by value）の言語です。しかし、オブジェクトを扱う場合には注意が必要です。オブジェクトにとっての「値」とは、そのオブジェクトへの参照（リファレンス）そのものだからです。

プリミティブ型の場合：関数内での変更は呼び出し元に影響しない

例えば、数値を関数に引数として渡し、その関数の中で値をインクリメントしても、呼び出し元の変数の値は更新されません。

コード例

let i = 0;
function increment(x) {
    x = x + 1
    console.log(x)
}
increment(i)
console.log(i)

実行結果

1
0

オブジェクトの場合：参照の再代入と内部状態の変更は挙動が異なる

オブジェクトを渡した場合、関数内でそのオブジェクトの参照自体を別のものに差し替えても、元のオブジェクトには影響しません。しかし、オブジェクトの内部（プロパティなど）を変更すると、その変更は元のオブジェクトにも反映されます。

コード例

let obj = {'foo': 'bar'};
function updateRef(x) {
    // xのローカルな参照が更新されるだけで、objには影響しない
    x = {}
}
function addHelloWorld(y) {
    // yが参照しているオブジェクトに新しいプロパティを追加
    y['hello'] = 'world';
}
console.log(obj)
updateRef(obj)
console.log(obj)
addHelloWorld(obj)
console.log(obj)

実行結果

{ foo: 'bar' }
{ foo: 'bar' }
{ foo: 'bar', hello: 'world' }

ポイントのまとめ

最初の関数updateRefでは、引数xというローカル変数が新しい空のオブジェクトに再代入されただけのため、元のobjには何の影響もありませんでした。一方、2つ目の関数addHelloWorldでは、引数yがobjと同じオブジェクトを参照していたため、その内部状態（プロパティ）を変更すると、元のオブジェクトにも変更が反映されました。

このようにJavaScriptでは、プリミティブ型は値そのものがコピーされて渡される一方、オブジェクトは「参照という値」が渡されるため、関数内での操作によって挙動が大きく異なります。この違いを理解しておくことは、バグを防ぎ、正しくコードを設計する上で非常に重要です。