8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

JavaScript constは変更不可という理解を捨てる🚮

Last updated at Posted at 2025-03-13

はじめに

constの値は変更できない/されないという理解をされてる人のための内容です。
結論、変更できる / されるケースがあります!

ということで、その見解を改めるために必要となってくるメモリ管理の仕組みとメモリの観点を添えて以下へ記載します。

目次

  1. メモリとは?(ざっくり解説)
    1-1. メモリ(RAM)とは?
    1-2. メモリの特徴
  2. JavaScript でのメモリの使われ方
    2-1. 変数のメモリへの保存
    2-2. const のオブジェクトとメモリ
  3. JavaScript のガーベージコレクション(GC)とは?
    3-1. ガーベージコレクション(Garbage Collection)とは?
  4. まとめ
  5. 参考文献🌟

🧷 メモリとは?(ざっくり解説)

メモリ(RAM)とは?

メモリ(RAM:Random Access Memory) とは、コンピュータがデータやプログラムを一時的に記憶する場所です。

💡 メモリ=作業机、HDD/SSD=本棚。

記憶装置 役割
HDD / SSD 長期保存 本棚(ノート・教科書)
メモリ(RAM) 一時保存 机の上に広げた資料
CPU 計算・処理 作業する人

🔥 メモリの特徴

✅ データの読み書きが超高速(HDD/SSD より何百倍も速い)
✅ 電源を切るとデータが消える(揮発性)
✅ 容量が限られている(机の広さに限界がある)

🧷 JavaScript でのメモリの使われ方

プログラムが動くとき、変数やオブジェクトのデータはメモリに保存される!

📝 変数のメモリへの保存

let num = 10;
let obj = { name: "Alice", age: 25 };
変数 メモリの値
num 10(直接保存)
obj 0x1234(オブジェクトがあるアドレス)

🔹 obj のデータ本体 { name: "Alice", age: 25 } は 別のメモリ領域 に保存されている!

📝 const のオブジェクトとメモリ

✅ const は「メモリのアドレスを固定する」 = 「家の住所」

const myHouse = { address: "東京", owner: "Alice" };
変数名 メモリのアドレス 値(オブジェクト)
myHouse(家) 0x1234(家の住所) { address: "東京", owner: "Alice" }

🔹 myHouse には「オブジェクトがあるメモリのアドレス(例: 0x1234)」が入っている。
🔹 const なので、このアドレス (0x1234) = 住所 は変えられない!

✅ プロパティの変更は「メモリ上のデータの書き換え」 = 「家の中の模様替え」

myHouse.owner = "Bob"; // OK
myHouse.color = "Blue"; // OK(新しいプロパティの追加)
変数名 メモリのアドレス 値(オブジェクト)
myHouse 0x1234 { address: "東京", owner: "Bob", color: "Blue" }

🔹 オブジェクトのアドレス (0x1234) は変わらないが、中身は変更可能!
🔹 「Alice から Bob に住人が変わった」や「家の色を青に塗り替えた」 みたいなもの。
🔹 家(オブジェクト)は変わらないけど、中身(プロパティ)は変えられる。

❌ オブジェクトの再代入 = 「家ごと引っ越し」は禁止

myHouse = { address: "大阪", owner: "Charlie" }; // ❌ エラー

🔹 const では、新しいアドレス (0x5678) への変更が禁止 される!
🔹「東京の家を捨てて、大阪の新しい家に住む」 みたいなもの。
🔹 const で固定された 「東京の家」 から 「大阪の家」 に変えようとするとエラーになる。

🔒 Object.freeze() は「メモリの中身の変更も禁止」 = 「家を改築禁止にする」

const frozenHouse = Object.freeze({ address: "東京", owner: "Alice" });
frozenHouse.owner = "Bob"; // ❌ 変更できない(無視される)

🔹 Object.freeze() を使うと、メモリ内のオブジェクト (0x9999) が 読み取り専用 になる!
🔹「家のリフォームを禁止して、絶対に変えられないようにする」 みたいなもの。
🔹 住人を変えたり、壁の色を塗り替えたりできなくなる。

🧷 JavaScript のガーベージコレクション(GC)とは?

📝 ガーベージコレクション(Garbage Collection)とは?

JavaScript には ガーベージコレクション(GC) という仕組みがあり、不要になったオブジェクトを自動的にメモリから解放してくれます。

✅ メモリを解放 = 「住人がいない家を取り壊す」

  1. 参照がなくなったオブジェクト は GC によって削除される。
  2. スコープを抜けた変数 も自動的にメモリ解放される。

❗ GC によるメモリ解放

function createUser() {
  let user = { name: "Charlie" };
  return user;
}

let person = createUser();
person = null; // `user` への参照が消えたため GC の対象に

🔹 person = null; にすると { name: "Charlie" } への参照がなくなり、GC によってメモリから削除される。

❗ GC に頼らず、明示的にメモリ管理する方法

let data = { value: 100 };
data = null; // 使わなくなったオブジェクトを手動で解放

🎉 まとめ

JavaScript の概念 メモリの概念
const オブジェクト名 = {...} 家の住所(固定) メモリアドレスを固定
オブジェクト名.プロペティ名 = ... 家の模様替え メモリの中身を変更(OK)
オブジェクト名 = {...} 新しい家に引っ越し メモリアドレス変更(NG)
Object.freeze(オブジェクト名) 改築禁止の家 メモリの中身も変更禁止
ガーベージコレクション🗑️ 住人がいない家を取り壊す 参照がなくなったメモリを解放

const のイメージが変わりました。
メモリの概念を理解すると、JavaScript の const の動きがよりクリアになった気がする! 🚀

参考文献🌟

8
2
6

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?