JavaScriptのletとvarの違いは？

JavaScript における var と let の違い

JavaScript では、変数を宣言する際に var、let、const のいずれかのキーワードを使用します。その中でも、var と let はどちらも変数を宣言するために使用されますが、いくつかの重要な違いがあります。

スコープの違い

var と let の最も大きな違いは、そのスコープです。

var は関数スコープです。 関数内で var を使用して宣言された変数は、その関数全体でアクセス可能です。
let はブロックスコープです。 ブロック (if 文や for 文など) 内で let を使用して宣言された変数は、そのブロック内でのみアクセス可能です。

スコープの比較表

キーワード	スコープ
var	関数スコープ
let	ブロックスコープ

関数スコープの例


            <script>
            function myFunction() {
              if (true) {
                var x = 10; // 関数スコープ
              }
              console.log(x); // 10 と出力される
            }
            myFunction();
            console.log(x); // エラー！x は関数スコープ内でのみアクセス可能
            </script>

上記の例では、var を使用して変数 x が宣言されています。x は if 文の内部で宣言されていますが、var は関数スコープを持つため、if 文の外側でもアクセスすることができます。

ブロックスコープの例


            <script>
            function myFunction() {
              if (true) {
                let y = 20; // ブロックスコープ
              }
              console.log(y); // エラー！y は if ブロック内でのみアクセス可能
            }
            myFunction();
            </script>

上記の例では、let を使用して変数 y が宣言されています。y は if 文の内部で宣言されており、let はブロックスコープを持つため、if 文の外側からはアクセスできません。

巻き上げの違い

var と let のもう一つの違いは、変数の巻き上げに関係します。

var は巻き上げられます。 var を使用して宣言された変数は、そのスコープの先頭に「巻き上げられる」ため、宣言前に参照することができます。ただし、初期化は行われないため、参照時には undefined となります。
let は巻き上げられません。 let を使用して宣言された変数は、宣言前に参照することはできません。

var の巻き上げの例


            <script>
            console.log(a); // undefined と出力される
            var a = 10; 
            </script>

上記の例では、var を使用して宣言された変数 a は、宣言前に参照されています。var は巻き上げられるため、エラーとはならず undefined と出力されます。

let の巻き上げの例


            <script>
            console.log(b); // エラー！Cannot access 'b' before initialization
            let b = 20;
            </script>

上記の例では、let を使用して宣言された変数 b は、宣言前に参照されています。let は巻き上げられないため、エラーが発生します。

変数の再宣言

var と let では、変数の再宣言に関する挙動も異なります。

var は再宣言が可能です。 同じスコープ内で var を使って変数を再度宣言することができます。
let は再宣言が禁止されています。 同じブロック内で let を使って変数を再度宣言するとエラーが発生します。

var の再宣言の例


            <script>
            var x = 10;
            var x = 20; // 再宣言可能
            console.log(x); // 20 と出力される
            </script>

let の再宣言の例


            <script>
            let y = 10;
            // let y = 20; // エラー！y は既に宣言されています
            console.log(y); // 10 と出力される
            </script>

まとめ

var と let はどちらも変数を宣言するために使用されますが、スコープや巻き上げの挙動が異なります。

関数全体でアクセス可能な変数を宣言する場合は var を使用します。
ブロック内でのみアクセス可能な変数を宣言する場合は let を使用します。

一般的に、新しい JavaScript コードでは let を使用することが推奨されます。let を使用することで、コードの可読性が向上し、予期せぬエラーを防ぐことができます。

参考資料

よくある質問

Q1: `var` はもう使わないほうが良いですか？

A1: 可能な限り let や const を使用することが推奨されます。var は古い仕様であり、スコープの広さが予期せぬエラーを引き起こす可能性があります。

Q2: `let` と `const` の違いは何ですか？

A2: let は再代入可能な変数を宣言するために使用し、 const は再代入不可能な定数を宣言するために使用します。

Q3: ブロックスコープを使うメリットは何ですか？

A3: ブロックスコープを使用することで、変数のスコープを限定し、コードの可読性と保守性を向上させることができます。また、変数の意図しない変更を防ぐことにも役立ちます。

その他の参考記事:JavaScriptのletとconst