JavaScriptのletとconstは何が違う？再代入と中身の変更を分けてみよう

JavaScriptのletとconstは、どちらも値を名前で扱うための宣言。まずは「あとから同じ名前へ別の値を入れ直すか」で分けてみよう。

このページでは、再代入と、オブジェクトの中身を変えることの違いを知る。下の作例はブラウザ内だけで動き、保存や外部通信はしないよ。

letは値を入れ直せる

let count = 0;
count = count + 1;

countという名前へ、0の後に1を入れ直している。この入れ直しが再代入だよ。

constは同じ名前への再代入をしない

const title = '練習';

ここでtitleへ別の値を代入し直そうとするとエラーになる。名前の参照先を入れ直さないという約束で、作成時に値が必要になるよ。

中の値まで全部固定するわけではない

const item = { count: 0 };
item.count = item.count + 1;

これは、itemへ別のオブジェクトを代入する操作ではなく、参照しているオブジェクトのプロパティを変える操作。constでも、こうした中身の変更は可能なんだ。constならすべての値が深く変更不能になる、と考えないでね。

作例で二つの数を増やす

1. 「letの数を増やす」で、letで宣言した数値を入れ直す。
2. 「constの中身を増やす」で、constのオブジェクト内の数値を変える。
3. 二つの表示が、それぞれ増えることを見る。
4. リセットで両方を0へ戻す。

作例は、constへの再代入を繰り返して例外を起こすものではなく、正常に動く二つの処理を比べるものだよ。

どちらにするか迷ったら

後から再代入しない名前にはconst、必要があるものにはlet、という方針を出発点にできる。ただし、プロジェクトの規約も確認しよう。変更したくないデータの扱いは、宣言方法とは別に設計する必要がある。

MDNのconstで、ブロックの範囲や再代入の制約も確認してみてね。