javascriptのvarとletの復習

はじめに

javascriptにおけるvarとletの違いでも重要なのは以下の点でと考えています。

• var・・・スコープは関数
• let・・・スコープはブロック

これは再宣言などにも影響しますが、イベントfunction内でvar変数を利用する場合に困った動作を起こします。

varの場合・・・困った動作

function test1(n,count) {
    for (var i = 0; i < count; i++) {
        setTimeout(() => {
            console.log(n,i);
        }, i * 1000);
    }
}

test1("var3",3);
test1("var5",5);

実行結果

# node test.js
var3 3
var5 5
var3 3
var5 5
var3 3
var5 5
var5 5
var5 5

letの場合・・・意図した動作

function test1(count) {
    for (let i = 0; i < count; i++) {
        setTimeout(() => {
            console.log(i);
        }, i * 1000);
    }
}

test1(3);
test1(5);

実行結果

# node test.js
let3 0
let5 0
let3 1
let5 1
let3 2
let5 2
let5 3
let5 4

まとめ

イベント用の無名functionを利用しない場合はあまり意識しませんが、イベント駆動の処理を記述する場合は基本はletとconstを利用するのがよさそうです。

注意

グローバル変数はvarの有無でglobal配下になるかの違いがある。