JavaScript の基本：var と let の違いを徹底解説！

JavaScript を書いていると、変数を宣言する際に var と let のどちらを使えば良いのか迷うことがありますよね。この二つのキーワードは、JavaScript の変数宣言において非常に重要な役割を果たしますが、それぞれ異なる性質を持っています。本記事では、この「var と let の違い」を分かりやすく、そして丁寧に解説していきます。

スコープの違い：これが一番大事！

var と let の最も大きな違いは、「スコープ」という考え方にあります。スコープとは、変数がどこからどこまで有効なのか、という範囲のことを指します。 var で宣言された変数は「関数スコープ」を持ち、 let で宣言された変数は「ブロックスコープ」を持ちます。

具体的に見てみましょう。

  • 関数スコープ: 関数の中だけで有効になります。関数の外からはアクセスできません。
  • ブロックスコープ: if 文や for ループなど、波括弧（ {} ）で囲まれたブロックの中で宣言された変数も、そのブロックの外からはアクセスできません。
このスコープの違いを理解することが、 var と let の違いを理解する上で最も重要です。

例えば、以下のようなコードを考えてみてください。

var の場合:

if (true) { var x = 10; }
console.log(x); // 10 と表示される

let の場合:

if (true) { let y = 20; }
console.log(y); // エラーになる

このように、 var は if 文の外でもアクセスできますが、 let はブロックの外からはアクセスできません。これがブロックスコープの性質です。

巻き上げ（ホイスト）の違い

JavaScript では、変数が宣言される前にその変数を使おうとすると、通常はエラーになります。しかし、 var には「巻き上げ（ホイスト）」という特別な性質があります。これは、 var で宣言された変数が、コードの実行前にそのスコープの先頭に「巻き上げられる」というものです。

例を見てみましょう。

  1. var x = 10; というコードがあったとします。
  2. JavaScript エンジンは、この var x; という宣言を、コードの先頭に移動させるかのように扱います。
  3. そのため、宣言よりも前に x を使おうとしても、エラーではなく undefined という値になります。

let には、この巻き上げの性質がありません。 let で宣言された変数を宣言前に使おうとすると、エラーになります。これは、 let がより直感的で、意図しないエラーを防ぎやすいという利点につながります。

var の巻き上げの例:

console.log(a); // undefined と表示される
var a = 5;

let の場合:

console.log(b); // ReferenceError: b is not defined とエラーになる
let b = 7;

再宣言の違い

変数に新しい値を代入することは「再代入」と言いますが、同じ名前で変数自体をもう一度宣言することを「再宣言」と言います。 var と let では、この再宣言に対する振る舞いが異なります。

var を使った場合、同じスコープ内で同じ名前の変数を何度でも再宣言できてしまいます。

  • var name = "太郎";
  • var name = "花子"; // これは OK
この性質は、意図せず変数を上書きしてしまう原因になり、バグを生みやすいと言えます。 コードの可読性を高め、予期せぬエラーを防ぐためにも、再宣言は避けるべきです。

一方、 let を使った場合、同じスコープ内で同じ名前の変数を再宣言しようとすると、エラーが発生します。

  1. let age = 25;
  2. let age = 30; // これはエラーになる
これにより、誤った再宣言を防ぐことができ、コードの安全性が向上します。

キーワード 再宣言 結果
var 可能 上書きされる
let 不可能 エラーが発生する

変数の再代入

変数の値は、後から変更することができます。これを「再代入」と言います。 var と let のどちらを使っても、変数の再代入は可能です。

例えば、以下のように変数を宣言し、後から値を変更することができます。

  • var score = 100;
  • score = 120; // OK
  1. let count = 0;
  2. count = 1; // OK

この点においては、 var と let に違いはありません。どちらのキーワードで宣言しても、変数の値は何度でも変更できます。

const との比較

var と let の違いを理解する上で、もう一つ重要なキーワードがあります。それが const です。 const は「定数」を宣言するためのキーワードで、一度値を代入すると、その値は変更できなくなります。

const の特徴をまとめると以下のようになります。

  • 宣言時に必ず値を代入する必要がある。
  • 一度代入した値は、再代入することができない。
  • ブロックスコープを持つ。

let は値の変更が可能ですが、 const は値の変更ができません。

キーワード 値の変更（再代入）
var 可能
let 可能
const 不可能
プログラムの中で、値が変わらないことが確実なものには const を使うのが一般的です。これにより、コードの意図が明確になり、誤った再代入によるエラーを防ぐことができます。

どちらを使うべきか？

現代の JavaScript 開発では、 原則として let と const を使うことが推奨されています。 var は古い JavaScript の記述方法であり、スコープの曖昧さや巻き上げの性質が、コードの理解を難しくし、バグの原因となることが多いためです。

使い分けのポイントは以下の通りです。

  • 値が後から変更される可能性がある場合は let を使う。
  • 値が一度決まったら変更されない場合は const を使う。
  1. まずは const で宣言することを検討しましょう。
  2. もし値の変更が必要になった場合に let に変更するのが、安全で分かりやすいコードを書くための良い習慣です。

var は、古いコードを保守する場合などに必要となることがありますが、新規でコードを書く際には、 let と const を優先的に使用しましょう。

var と let の違い、そして const との比較について解説しました。これらの違いをしっかりと理解することで、より安全で、読みやすく、保守しやすい JavaScript コードを書くことができるようになります。ぜひ、日々のコーディングで意識して使ってみてください！

Related Articles: