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

Posted by

概要

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'  

letやconstを使用した場合

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  

参考

The Difference Between Function and Block Scope in JavaScript
https://medium.com/@josephcardillo/the-difference-between-function-and-block-scope-in-javascript-4296b2322abe