JavaScriptを学び始めたとき、多くの人が最初に出会うつまづきポイントのひとつが「変数の宣言方法」です。
JavaScriptでは、変数を宣言するために varletconst の3つのキーワードがあります。
この記事では、それぞれの違いと特徴、そして使い分けのポイントを初心者にもわかりやすく解説します。
1. var、let、constの基本的な違い
| 特徴 | var | let | const |
|---|---|---|---|
| 宣言の再代入 | 可能 | 可能 | 不可（※） |
| 再宣言 | 可能 | 不可 | 不可 |
| スコープ | 関数スコープ | ブロックスコープ | ブロックスコープ |
| 巻き上げ（Hoisting） | あり（初期化されない） | あり（TDZあり） | あり（TDZあり） |
※ const は再代入ができませんが、オブジェクトや配列の中身の変更は可能です。
2. var：古くから使われていた宣言方法
var はJavaScript ES6（2015年）以前から存在する古い変数宣言方法です。
var name = 'Taro';
console.log(name); // 'Taro'
var name = 'Jiro'; // 再宣言できる
console.log(name); // 'Jiro'特徴
- 関数スコープ：関数の中でのみスコープが限定され、それ以外はグローバル。
- 再宣言可能：同じスコープ内で再度
var宣言できる。 - 巻き上げ（Hoisting）：変数宣言がコードの先頭に持ち上げられる。
console.log(age); // undefined（エラーにならない）
var age = 30;
このような挙動はバグの原因となるため、現在ではあまり使われません。
3. let：モダンな変数宣言方法
let はES6で導入された新しい変数宣言の方法です。var の欠点を改善しています。
let name = 'Hanako';
name = 'Sakura'; // 再代入可能
console.log(name); // 'Sakura'
let name = 'Yuki'; // ❌ 同じスコープでは再宣言できない → エラー
特徴
- ブロックスコープ：
ifやforの中でもスコープが限定される。 - 再宣言不可：同じスコープ内での再宣言はできない。
- TDZ（Temporal Dead Zone）：宣言前にアクセスするとエラー。
{
console.log(color); // ❌ ReferenceError
let color = 'blue';
}
4. const：定数（再代入不可）の変数宣言
const も let と同じくブロックスコープですが、再代入ができないのが特徴です。
const pi = 3.14;
pi = 3.1415; // ❌ TypeError: Assignment to constant variable.
特徴
- 再代入不可：一度代入すると値を変えられない。
- オブジェクトや配列の中身の変更は可能。
const person = { name: 'Ken' };
person.name = 'Shin'; // ✅ 中身の変更はOK
ただし、以下のような再代入はできません。
person = { name: 'Tom' }; // ❌ エラー
5. スコープの違いに注意しよう
var（関数スコープ）の例
function testVar() {
if (true) {
var message = 'Hello';
}
console.log(message); // 'Hello'（ブロック外でも参照可能）
}
let / const（ブロックスコープ）の例
function testLetConst() {
if (true) {
let msg = 'Hi';
const greeting = 'Good day';
}
console.log(msg); // ❌ ReferenceError
console.log(greeting); // ❌ ReferenceError
}
6. どれを使うべき？
現代のJavaScript開発では以下のように使い分けるのが基本です。
推奨される使い分け
- まずは
constを使う：意図せず再代入されるバグを防ぐ。 - 必要なときだけ
letを使う：ループのカウンターや一時的に値を変更する変数。 varは基本使わない：古いコードの保守やレガシー対応以外では非推奨。
7. よくあるミスと注意点
const にオブジェクトを代入して中身を変更
const data = { count: 1 };
data.count = 2; // ✅ OK（中身の変更）
data = { count: 3 }; // ❌ NG（再代入）
let を使ってもTDZエラーに注意
console.log(myVar); // ❌ ReferenceError
let myVar = 5;
var を使って意図しないグローバル変数になることも
function example() {
message = 'hello'; // `var`も`let`も使っていない！
}
example();
console.log(message); // 'hello' → グローバルに漏れる！危険！
まとめ
varは関数スコープで再宣言可能。現在では非推奨。letはブロックスコープで再代入可能、再宣言不可。constはブロックスコープで再代入・再宣言ともに不可。- 基本は
const、必要なときだけletを使うのがモダンなスタイル。
JavaScriptのコードをより安全で読みやすく保つためにも、var の使用は避け、let と const を正しく使い分けることが重要です。
コメント