javascriptでletとvarの違いを簡単に解説

javascriptのletとvar違いはなんだろうか、いつどっちを使えばよいのかわからない。 ということがあると思います。そこで、letとvarの違いを簡単にわかりやすく説明しようと思います。

そもそもletはES6で導入された記法で、下に記述してあるとおり、 大きな違いは、スコープの範囲がブロックの中だけにあるのがletで、 定義したらグローバルにアクセス可能なものがvarになります。

let allows you to declare variables that are limited to the scope of a block statement, or expression on >which it is used, unlike the var keyword, which declares a variable globally, or locally to an entire function > regardless of block scope.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

実際に見てみましょう。

{
 var usingVarGreetings = "hi"
 let usingLetGreetings = "hi"
console.log(`inside of block var: ${usingVarGreetings}`) // inside of block var: hi
console.log(`inside of block let: ${usingLetGreetings}`) // inside of block let: hi
}
console.log(`outside of block var: ${usingVarGreetings}`) // outside of block var: hi
console.log(`outside of block let: ${usingLetGreetings}`)
 // Uncaught ReferenceError: usingLetGreetings is not defined

letは定義したブロック内でしかアクセスできないので、 このようにブロックの中でletで定義したusingLetGreetingsはブロック内でしかアクセスができません。対して、varで定義するとグローバルスコープになるので、ブロックの外でも使うことができます。

このようにスコープの範囲がletとvarとの大きな違いになります。 そのため、ブロック外で、グローバルな環境下でletを使った場合は、それはvarと同じ働きになります。

// グローバルで定義しているのでvarと同じ働き方をする
let usingLetHi = 'hi'
{
    console.log(usingLetHi) // hiを表示
}
usingLetHi = 'こんにちは'
function dispalyGreeting() {
    console.log(usingLetHi) 
}
dispalyGreeting() // こんにちは

またletに定数の要素を加えたものがconstになります。

参考: What's the difference between using "let" and "var"?

参考: JavaScript/Reference/Statements/let