JavaScriptにおけるvar、let、constの特性 | 全国個人事業主支援協会

COLUMN コラム

JavaScriptにおけるvar、let、constの特性

2024年06月28日
JavaScriptにおけるvar、let、constの特性

JavaScriptにおけるvar、let、constのは、変数を宣言するためのキーワードですが、

それぞれに特有の特性と使用シナリオがあります。

1. var
特徴として関数スコープ: varで宣言された変数は、その宣言が行われた関数内でのみ有効です。ブロックスコープ（{}で囲まれたブロック）を無視します。
再宣言可能: 同じスコープ内で同じ名前の変数を再宣言できます。
巻き上げ（ホイスティング）: varで宣言された変数は、スコープの先頭に巻き上げられますが、宣言だけであり、初期化は元の位置に残ります。

サンプルコード：
function example() {
console.log(a); // undefined
var a = 10;
console.log(a); // 10
}

良い点は古いブラウザでも問題なく動作します。関数スコープを利用したい場合に便利です。
悪い点は巻き上げとブロックスコープ無視により、予期しないバグを引き起こす可能性があります。
同じ名前で再宣言できるため、変数の再宣言によるバグの原因になりやすいし、発見しにくいです。

2. let
特徴としてはブロックスコープ: letで宣言された変数は、その宣言が行われたブロック（{}）内でのみ有効です。
再宣言不可: 同じスコープ内で同じ名前の変数を再宣言することはできません。
巻き上げ（ホイスティング）: 変数の宣言も巻き上げられますが、宣言前にアクセスするとReferenceErrorが発生します。

サンプルコード：
function example() {
console.log(a); // ReferenceError: a is not defined
let a = 10;
console.log(a); // 10
}
良い点はブロックスコープを持つため、意図しない変数の再利用を防げます。再宣言が禁止されているため、変数名の重複によるバグを防止できます。
悪い点はvarに比べると若干の可読性の向上が見込める反面、非常に古いブラウザではサポートされていない可能性があります。

3. const
特徴としてブロックスコープ: letと同じくブロックスコープを持ちます。
再宣言不可・再代入不可: constで宣言された変数は再宣言も再代入もできません。ただし、オブジェクトのプロパティは変更可能です。
巻き上げ（ホイスティング）: letと同様、宣言前にアクセスするとReferenceErrorが発生します。

サンプルコード：
function example() {
const a = 10;
console.log(a); // 10
a = 20; // TypeError: Assignment to constant variable.
}

サンプルコード：
const obj = { key: ‘value’ };
obj.key = ‘newValue’; // これは許可される
obj = {}; // TypeError: Assignment to constant variable.

良い点は不変な値を表すための変数に適しています。意図しない再代入を防ぐことができ、コードの安全性が向上します。
悪い点はオブジェクトのプロパティは変更可能であるため、完全に不変であることを保証できません。同じく非常に古いブラウザではサポートされていない可能性があります。

まとめ
var: 古いスタイルの変数宣言。関数スコープ、再宣言可能、巻き上げが特徴。古いコードやレガシーシステムで見られる。
let: 現代的な変数宣言。ブロックスコープ、再宣言不可、巻き上げ時にエラーを投げる。ループや条件文内での変数宣言に適している。
const: 不変の値を表すための変数宣言。ブロックスコープ、再宣言不可・再代入不可。ただしオブジェクトのプロパティは変更可能。固定値や定数を扱う際に使用。

それぞれのキーワードは、適切な場面で使い分けることで、コードの予測可能性と保守性が向上します。個人的にはこれから書くなら、letかconstを使用するべきかと思っています。ご参考まで。