Javascriptの変数スコープをきちんと理解する

こんにちは!ぐちです。

僕はWebエンジニアでもないので、きちんと言語仕様を理解しているわけではなく、ふわっとした知識でJavascriptを書いていました。

で、改めて知った内容をメモレベルですが、ご紹介したいと思います。

変数定義

関数ブロック内でvar宣言された変数は、その関数内のスコープとなり、varを付けない場合はグローバルスコープになります。

実際のコードを見て頂いたほうが早いですよね。笑

varをつけて宣言

var val = 'foo';

var func1 = function() {
    return val;
}

var func2 = function() {
    var val = 'bar';
    return val;
}

console.log(func1());
console.log(func2());
console.log(func1());
  • 結果
foo
bar
foo

func2の変数valvarをつけて宣言しているので、func2のスコープに閉じられたローカル変数として扱われます。

varをつけずに宣言

var val = 'foo';

var func1 = function() {
    return val;
}

var func2 = function() {
    val = 'bar';
    return val;
}

console.log(func1());
console.log(func2());
console.log(func1());
  • 結果
foo
bar
bar

func2の変数valvarをつけないで宣言しているので、func2のスコープに閉じられず、グローバル変数として扱われます。

まとめ

普段何気なく使っていることも、ちゃんと理解して人に説明するのは大変ですね。もっと色々な言語を学習してグローバルなエンジニアになっていきたいです。(※グローバル変数にかけてないですよ。笑)

では今回はこの辺で。