JavaScriptのlet、const、varの違いと使い分け

JavaScriptで変数を宣言する方法として、var、let、constの3つがあります。それぞれの挙動には違いがあり、適切に使い分けることでコードの可読性や保守性を向上させることができます。本記事では、それぞれの特徴や違い、使い分けについて詳しく解説します。

[目次を開く]

1. var の特徴と問題点 varの特徴 varの使用例 varの問題点 2. let の特徴 letの特徴 letの使用例 letのメリット 3. const の特徴 constの特徴 constの使用例 constのメリット 4. let と const の使い分け ✅ 使い分けの基準まとめ

1. `var` の特徴と問題点

var は、古いJavaScript（ES5以前）で変数を宣言するために使用されていました。しかし、いくつかの問題点があり、ES6（ECMAScript 2015）以降はletやconstが推奨されています。

`var`の特徴

関数スコープを持つ
- var で宣言された変数は、その変数が定義された関数内でのみ有効です。
- ただし、ブロックスコープ（{}内）には影響されず、意図しない再代入や上書きが発生しやすくなります。
変数の巻き上げ（ホイスティング）
- var で宣言された変数は、スクリプトの実行時に自動的にスコープの先頭に移動（ホイスティング）されます。
- これにより、変数を定義する前に参照してもエラーにならず、undefined になることがあります。
再宣言が可能
- 同じスコープ内で何度でも再宣言できますが、意図しない上書きが起こる可能性があるため、バグの原因になります。

`var`の使用例

console.log(x); // undefined（エラーにならない）
var x = 10;
console.log(x); // 10

if (true) {
    var y = 20;
}
console.log(y); // 20 （ブロックを抜けてもyが存在する）

`var`の問題点

ブロックスコープを無視するため、意図しない変数の上書きが発生する
ホイスティングにより、コードの可読性が下がる
再宣言が可能なため、予期しない動作が起こる

現在では、varはほとんど使用されず、letやconstを使うのが一般的です。

2. `let` の特徴

let は、var の問題点を解消するためにES6で導入された変数宣言キーワードです。

`let`の特徴

ブロックスコープを持つ
- {}（中括弧）内で宣言された変数は、そのブロック内でのみ有効です。
- varのようにブロックの外に漏れることがないため、安全に変数を管理できます。
ホイスティングされるが、Temporal Dead Zone (TDZ) が発生する
- let もホイスティングされますが、宣言前にアクセスするとエラー (ReferenceError) になります。
- これにより、変数の誤った使用を防げます。
再宣言不可
- 同じスコープ内で再宣言しようとするとエラーになります。

`let`の使用例

console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 10;

if (true) {
    let b = 20;
    console.log(b); // 20
}
console.log(b); // ReferenceError: b is not defined

`let`のメリット

ブロックスコープを守るため、意図しない変数の上書きを防ぐ
再宣言を禁止し、バグを防ぎやすい
ホイスティングされてもエラーを出すため、安全性が高い

3. `const` の特徴

const は、定数（変更できない変数）を宣言するためのキーワードです。

`const`の特徴

ブロックスコープを持つ
- let と同様に、const もブロック内でのみ有効です。
再代入が不可
- const で宣言した変数は、一度値を代入すると変更できません。
ホイスティングされるが、TDZ が適用される
- let と同じく、宣言前にアクセスするとエラー (ReferenceError) になります。
オブジェクトや配列の変更は可能
- const は「再代入」が不可なだけであり、オブジェクトや配列の中身は変更できます。

`const`の使用例

const PI = 3.14;
PI = 3.14159; // TypeError: Assignment to constant variable.

const obj = { name: "Alice" };
obj.name = "Bob"; // OK（オブジェクトのプロパティは変更可能）

const arr = [1, 2, 3];
arr.push(4); // OK（配列の中身は変更可能）

`const`のメリット

値の再代入を防ぐことで、意図しない変更を防ぐ
関数やクラス、オブジェクトの宣言に適している
コードの可読性を向上させる

4. `let` と `const` の使い分け

基本的には const を優先 し、値を変更する必要がある場合のみ let を使用するのが良いプラクティスです。

特徴	`var`	`let`	`const`
スコープ	関数スコープ	ブロックスコープ	ブロックスコープ
再代入	可能	可能	不可
再宣言	可能	不可	不可
ホイスティング	あり（`undefined`）	あり（TDZでエラー）	あり（TDZでエラー）
推奨度	非推奨	必要なら使用	最も推奨

✅ 使い分けの基準

基本はconstを使用
値を変更する必要がある場合はlet
varは使わない

まとめ

var は古い仕様であり、スコープの問題やホイスティングによるバグが発生しやすいため、使用を避けるべき。
let はブロックスコープを持ち、再宣言ができないため、安全に変数を扱える。
const は再代入ができず、意図しない変更を防ぐため、デフォルトで使用するのがベストプラクティス。

これらを適切に使い分けることで、バグを減らし、より可読性の高いコードを書くことができます。今後のJavaScript開発では、var を避け、let と const を適切に使い分けましょう。

アルアカ - Arcadia Academia