2020/09/14

JavaScriptのスコープ【現役エンジニアが解説】

PROGRAM

今回は、JavaScriptのスコープについて、グローバルスコープとローカルスコープに分け、簡単に解説していきます。

グローバルスコープ

トップレベルで宣言された変数(定数)は、グローバルスコープを持つことになります。

varだけでなく、letやconstを使って宣言したものも、トップレベルであればグローバルスコープを持ちます。

var hoge = 'hoge';

console.log(hoge); // hogeと出力

(function(){
    console.log(hoge); // hogeと出力
})();

上記のコードのように、トップレベルで宣言した変数は、トップレベル以外に、関数内からもアクセスが可能になります。

ローカルスコープ

グローバルスコープを持つ変数(定数)以外は全てローカルスコープを持つ変数(定数)になります。

function fn(arg) {
    var hoge = 'local';
    console.log(hoge); // hogeと出力
    console.log(arg); // hogeと出力
}
fn('hoge');

console.log(hoge); // 出力されない
console.log(arg); // 出力されない

上記のコードのように、関数内で定義された変数(定数)は引数を含め、関数スコープを持ち、関数の外からはアクセスできません。

for (let i = 0; i < 3; i++) {
    console.log(i); // 0～2まで出力
}
console.log(i); // 出力されない

また、ES2015からは上記のコードのように、”{}”のブロック内でlet(const)を使って宣言された変数(定数)も外からはアクセスできません。

変数(定数)宣言

var hoge = 'hoge'; // 関数内で定義されたもの以外はどこからでもアクセス可能

最もありふれた変数宣言はvarを使った宣言ですが、これは関数内で定義されたもの以外はどこからでもアクセス可能です。

let hoge = 'hoge'; // 関数内とブロック内で定義されたものは外からアクセス不可

ES2015より追加されたletを使った変数宣言は、関数内と”{}”のブロック内で定義されたものは外からアクセスすることができなくなります。

const hoge = 'hoge'; // 定数。関数内とブロック内で定義されたものは外からアクセス不可

同じくES2015より追加されたconstを使った定数宣言は、let同様、関数内と”{}”のブロック内で定義されたものは外からアクセスすることができません。

• facebook
• Tweet
• Read Later