JavaScriptのletとvarの違いを徹底解説

varとは

基本的な使い方

varは、JavaScriptにおける従来の変数宣言キーワードです。以下のように使用します。

[javascript]

var x = 10;
console.log(x); // 10

varで宣言された変数は、関数スコープを持ちます。これは、変数が関数の中でのみ有効であることを意味します。例えば、以下のコードでは、関数内で宣言された変数xは、関数の外ではアクセスできません。

[javascript]

function test() {
    var x = 10;
    console.log(x); // 10
}
console.log(x); // エラー: x is not defined

メリットとデメリット

varの主なメリットは、全てのブラウザでサポートされている点です。また、初期のJavaScriptプログラミングに慣れている人にとっては、馴染み深いキーワードです。しかし、varにはいくつかのデメリットもあります。

例えば、同じスコープ内で同じ名前の変数を再宣言できてしまうため、予期しないバグが発生する可能性があります。

[javascript]

var x = 10;
var x = 20; // エラーは発生しないが、意図しない挙動になる可能性がある
console.log(x); // 20

このように、varは便利な反面、使い方によってはエラーを引き起こしやすいキーワードです。

letとは

基本的な使い方

letは、ECMAScript 6（ES6）で導入された変数宣言キーワードです。以下のように使用します。

[javascript]

let y = 20;
console.log(y); // 20

letで宣言された変数は、ブロックスコープを持ちます。これは、変数がブロック（{}で囲まれた部分）の中でのみ有効であることを意味します。例えば、以下のコードでは、ブロック内で宣言された変数yは、ブロックの外ではアクセスできません。

[javascript]

{
    let y = 20;
    console.log(y); // 20
}
console.log(y); // エラー: y is not defined

メリットとデメリット

letの主なメリットは、ブロックスコープを持つため、変数の再宣言が防止される点です。これにより、コードの可読性が向上し、バグの発生が抑えられます。また、letは再代入が可能ですが、同じスコープ内での再宣言はエラーとなります。

[javascript]

let y = 20;
y = 30; // 再代入は可能
console.log(y); // 30

let y = 40; // エラー: Identifier 'y' has already been declared

一方で、letのデメリットとしては、ES6以前の環境ではサポートされていないため、古いブラウザでは使用できないことがあります。しかし、現在ではほとんどのモダンブラウザがES6をサポートしているため、大きな問題ではありません。

letとvarの違い

スコープの違い

letとvarの最大の違いの一つは、スコープの範囲です。varは関数スコープを持ち、letはブロックスコープを持ちます。以下の例でそれぞれの違いを確認しましょう。

[javascript]

function testVar() {
    if (true) {
        var x = 10;
    }
    console.log(x); // 10
}

function testLet() {
    if (true) {
        let y = 20;
    }
    console.log(y); // エラー: y is not defined
}

testVar();
testLet();

この例では、varで宣言された変数xは、ifブロックの外でもアクセス可能ですが、letで宣言された変数yは、ifブロックの外ではアクセスできません。

再宣言と再代入の違い

varは同じスコープ内での再宣言が可能ですが、letは再宣言が許可されていません。しかし、どちらも再代入は可能です。

[javascript]

var x = 10;
var x = 20; // 再宣言可能
console.log(x); // 20

let y = 30;
y = 40; // 再代入可能
console.log(y); // 40

let y = 50; // エラー: Identifier 'y' has already been declared

巻き上げの違い

varは巻き上げ（ホイスティング）されますが、letは巻き上げされません。これは、変数宣言がスコープの先頭に移動されることを意味します。ただし、letもホイスティングされますが、宣言の前にアクセスしようとするとエラーが発生します。

[javascript]

console.log(a); // undefined
var a = 10;

console.log(b); // エラー: Cannot access 'b' before initialization
let b = 20;

varで宣言された変数は、初期化される前にundefinedの値を持ちますが、letで宣言された変数は、初期化される前にアクセスするとエラーが発生します。

まとめ

JavaScriptにおけるletとvarの違いを理解することは、効率的でエラーの少ないコードを書くために非常に重要です。それぞれの違いを以下の表にまとめました。