JavaScriptにおける変数のスコープ

投稿者: | 2016-04-27

お久しぶりです

前回更新から、かなりの間が空いてしまいました。その間はFiddlerのプラグインを作ってみたり、Spring Bootを触ってみたりしてブログネタはあったはずなのですが、生来の筆不精のせいか、なかなかブログ執筆にまで至りませんでした。

そんな私ですが、最近はフロントエンド技術の一つであるPolymerに興味深々です。チュートリアルを読んで、さあカスタムエレメントを作ってみよう、と意気込みながらも、JavaScriptについての知識が断片的かつあやふやなので、はやる気持ちを抑え基礎から見直すことにしました。

これからは勉強した内容をできるだけブログに残しておこうと思います。今回は何度勉強しても混乱してしまうスコープについてまとめてみました。

JavaScriptにおけるスコープの基本

JavaScriptにおいて、グローバル変数のスコープはプログラム全体に、ローカル変数は宣言された関数の中だけに限定されます。

var value = "global";     // グローバル変数の宣言
function scopeTest1() {
    var value = "local";  // ローカル変数の宣言
    return value;
}
console.log(scopeTest1());    // localと表示
console.log(value);       // globalと表示

なお、ローカル変数はvar文で宣言する必要があります。var文を使用しない場合は、グローバル変数を指定、もしくは暗黙的に宣言することとなります。

var value = "global";
function scopeTest2() {
    value = "local";      // valueは上で宣言したグローバル変数を指している
    alt_value = "alt";    // 暗黙的にグローバル変数を宣言することになる
    var err_value = "err";
    return value;
}
console.log(scopeTest2());    // localと表示
console.log(value);       // localと表示
console.log(alt_value);   // altと表示
console.log(err_value);   // スコープ外なのでエラー

関数スコープ

JavaやCにおける変数のスコープではif文やfor文ごとにスコープを持つ、すなわち中括弧で囲まれたブロックごとにスコープをもつブロックスコープが実装されています。しかしJavaScriptではブロックスコープは実装されておらず、関数スコープが実装されています。関数スコープにおける変数は、その変数が定義された関数と、その関数に入れ子にされている関数からアクセスすることができます。

function scopeTest3() {
    var val1 = "scopeTest3"
    var val2 = "outer_value";
    function subScopeTest() {
        var val1 = "subScopeTest"
        console.log(val2);          // scopeTest3で宣言された変数は入れ子の関数からでもアクセスできる
        return val1;                // subScopeTestで宣言された変数
    }
    return subScopeTest();
}
console.log(scopeTest3());          // outer_value,subScopeTestの順に表示される

仮引数のスコープ

仮引数もローカル変数と同じスコープを持ちます。

var val = "global";
function scopeTest4(param) {
    param = "local";
    return param;
}
console.log(scopeTest4(val));   // localが表示される
console.log(val);               // globalが表示される
console.log(param);             // paramのスコープは関数内に限定されるのでエラー

今後の予定

スコープチェーン、クロージャあたりを勉強したいです。

参考文献

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です