const / let / var って、どんなふうに違うのかな？
今回は JavaScript の 定数や変数である const / let / var について取り上げてみたい思います。
const / let / var まとめ
| 種類 | 再代入 | 再宣言 | スコープ | 主な用途 |
| const | ❌ 不可 | ❌ 不可 | ブロックスコープ | 変更されない値（定数） |
| let | ✅ 可能 | ❌ 不可 | ブロックスコープ | 普通の変数 |
| var | ✅ 可能 | ✅ 可能 | 関数スコープ（古い） | レガシーコードとの互換 |
const (定数) ※使用推奨
特徴
- 再代入不可
- 再宣言不可
- ブロックスコープ
- 宣言時に初期化必須
➡️「中身が不変」ではなく「参照が不変」
const price = 100;
price = 200; // ❌ NG 再代入のためエラー
const price = 300; // ❌ NG 再宣言のためエラーオブジェクト・配列は変更できるが再代入は不可（重要）
const user = { name: "Taro" };
user.name = "Jiro"; // ✅ OK オブジェクトのプロパティは変更可能
user = {}; // ❌ NG 再代入のためエラー
const list = [1, 2, 3];
list.push(4); // ✅ OK 配列も追加可能
list = [5, 6, 7]; // ❌ NG 再代入のためエラースコープ
ブロックスコープ内 しか参照できない
➡️ 意図しない参照を防げる
{
const test1 = 'test1';
console.log(test1); // ✅ OK 'test1'が表示される
}
console.log(test1); // ❌ NG ブロックスコープ外のためエラーlet（変数）
特徴
- 再代入可能
- 再宣言不可
- ブロックスコープ
- ES2015（ES6）から登場
let count = 1;
count = 2; // ✅ OK 再代入可能
let count = 3; // ❌ NG 再宣言のためエラーブロックスコープ
ブロックスコープ内 しか参照できない
➡️ 意図しない参照を防げる
{
let test23 = 'test2';
test23 = 'test3';
console.log(test23); // ✅ OK 'test3'が表示される
}
console.log(test23); // ❌ NG ブロックスコープ外のためエラーvar（変数）※非推奨
特徴
- 関数スコープ
- 再代入可能
- 再宣言可能
- 巻き上げ（hoisting）が分かりづらい
var x = 1;
var x = 2; // ✅ OK 再宣言可能
x = 3; // ✅ OK 再代入可能ブロックスコープ
ブロックスコープ外 でも参照できる
➡️ ブロック {} を無視するため、バグの温床 になる
{
var test45 = 'test4';
test45 = 'test5';
console.log(test45); // ✅ OK 'test5'が表示される
}
console.log(test45); // ✅ OK 'test5'が表示される巻き上げ（hoisting）での違い
巻き上げ（hoisting）とは、JavaScript がコードを実行する前に、変数や関数の宣言をあらかじめ登録する仕組み のことで、値の代入はこの段階では行われない。
hoisting（巻き上げ）イメージ例
- JavaScriptがコードを読む
- 変数・関数の「宣言」のみを先に集める
- 上から順にコードを実行する
➡️ Temporal Dead Zone（TDZ）: 初期化(宣言)される前の、参照できない期間のこと
var
var で宣言した場合、登録されているが値が代入されずに初期化(宣言)前にアクセスすると undefined となる
console.log(a); // a は存在している(登録されている)が値が代入されず undefined
var a = 10;
console.log(a); // ✅ OK 10 が表示されるconst / let
const やlet で宣言した場合、初期化(宣言)前にアクセスできないため、エラーとなる
// TDZ 開始
console.log(b); // ❌ NG ReferenceError: Cannot access 'b' before initialization
const b = 5; // TDZ 終了
console.log(b); // ✅ OK 5 が表示される
// TDZ 開始
console.log(c); // ❌ NG ReferenceError: Cannot access 'c' before initialization
let c = 7; // TDZ 終了
console.log(c); // ✅ OK 7 が表示される※参考 関数宣言 / 関数式(const/let)
関数宣言 の場合は、hoisting（巻き上げ）されるため初期化(宣言)前でも実行可能だが、関数式(const/let) の場合は、初期化(宣言)前にアクセスできないため、エラーとなる
hello(); // ✅ OK "Hello" が表示される
function hello() {
console.log("Hello");
}
goodbye(); // ❌ NG ReferenceError: Cannot access 'goodbye' before initialization
const goodbye = function () {
console.log("Good bye");
};
goodbye(); // ✅ OK "Good bye" が表示されるどれを使うべき？
- const：推奨、基本はこちらを使用
- let：後で値が変わる変数
var：非推奨、古い、使わない
まとめ
JavaScript の const / let / var について、いかがでしたでしょうか？
再代入 や スコープ の違い、hoisting（巻き上げ）の挙動 など、それぞれの特性を理解することで、予期せぬバグを防ぎ、より安全で読みやすいコードを書くことができます。
基本的には const を使い、値を変更する必要がある場合のみ let を使う ことを意識して、バグの少ない JavaScript を書いていきましょう。
コメント