【JavaScript】関数スコープとブロックスコープ

ES6以前は、JavaScriptの変数はvarで宣言することのみが可能でした。ES6以降はletとconstを加えて、3種類で変数を宣言することが可能となりました。
本記事では、これらを使って宣言した変数が関数スコープとブロックスコープでどのような違いがあるかを記載します。

関数内でvarを使用して宣言した変数は、関数外で使用するとエラーとなります。

function myFunc() {
    var name = 'Luke';
    console.log(name); // 'Luke'
}
myFunc();
console.log(name); // name is not defined

ifやfor等のブロック内でvarを使用して宣言した変数は、ブロック外で使用してもエラーとならず、そのまま使用することができてしまいます。

if(true) {
    var name = 'Luke';
}
console.log(name); // 'Luke'

ES6以降で登場したletやconstを使用することで上記のような関数スコープとブロックスコープの差をなくすことができます。
※ 本記事ではletとconstの違いは触れません。簡単にいうと上書きできるかできないかです。

関数スコープ

function myFunc() {
    let name = 'Luke';
    console.log(name); // 'Luke'
}
myFunc(); 
console.log(name); // name is not defined

ブロックスコープ

if(true) {
    let name = 'Luke';
}
console.log(name); // name is not defined