JavaScript

JavaScriptでは「変数のスコープ」を正しく理解してエラーを減らそう!

scope

変数の「スコープ」は正しく理解しないと、エラーにならないエラーが起きて相当こまることになっちゃいます。
実際、デバッグしてエラーはないのに期待している効果が得られず、原因を見つけるのに予想以上に時間を消費してしまったことがあるんです。

そんなわけでおさらい。

JavaScriptのスコープは大きく分けて2つです。

  1. グローバルスコープ
  2. その名の通り関数の外、トップレベルコードのスコープです。
    これは分かりやすいですね。
    関数の外で変数を宣言しておけば、どこでも使えちゃうってわけです。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    
    //グローバル変数
    var x = 0;
     
    function f(){
        x = 2;
        print(x);
    }
     
    function f2(){
        print(x);
        x = 3;
        print(x);
    }

    結果はこんな感じ。

    1
    2
    3
    
    2
    2
    3
  3. 関数スコープ(ローカルスコープ)
  4. こちらも名前の通り関数の中で宣言した変数ですね。
    注意点は、関数内の変数は宣言した行とは関係なく、その関数内で有効ってこと。
    だから関数内の変数は関数の冒頭にまとめておくようにしています。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    
    function f(){
        //関数変数
        var x = 2;
        print(x);
    }
     
    function f2(){
        //関数変数
        print(x);
        //関数変数
        var x = 3;
        print(x);
    }

    結果はこんな感じ。

    1
    2
    3
    
    2
    undefined
    3

注意点として、ブロックスコープはありません。
例えば、以下。

1
2
3
4
5
6
7
8
9
10
11
//グローバル変数
var X = 5;
 
//ブロックスコープを期待してこう書く
{
var X = 3; 
print(x);
}
 
//これに5が入ってることを期待すると間違う
print(x);

結果はどちらも3が入ってます。

1
2
3
3

ブロックスコープがないので、
実際はグローバル変数を使い回しているんです。

実はJavaScriptの独自拡張にブロックスコープが使える「let」というのがあるらしいのですが、私は使っていません。なんかややこしくなりそうで^^;

もうひとつオマケ。
JavaScriptの関数は入れ子に宣言できます。
そのとき、内側の関数内で参照している変数が見つからなければ、
そのひとつ外側の関数に向かって変数名を探しにいきます♪
でもって、最終的にグローバル変数を参照することになりますね〜。

関連記事

  1. style_backgroundImage.jpg

    JavaScript

    背景画像をJavaScriptで入れ替える2種類の方法

    ものごとには「正解」というものがひとつではない、ってことが多いもん…

  2. js_style.jpg

    JavaScript

    CSSのプロパティをJavaScriptで指定する

    Elementオブジェクトのstyleプロパティでその要素に対し…

  3. oncomplete_function.jpg

    JavaScript

    【TweenMax】「onComplete」で引数を使う方法

    TweenMaxの「onComplete」で引数を使いたい場合って…

  4. chrome_touchevents.jpg

    JavaScript

    WebアプリのデバッグをChromeでやるために「touch events」を有効化する方法

    Webアプリのデバッグは「Chrome」をいつも使ってます。その…

  5. obj_clear.jpg

    JavaScript

    配列に入れた無名オブジェクトの値をクリアする

    オブジェクトの値を配列にいれて管理することってけっこうあります。…

  6. about_debug-4.jpg

    JavaScript

    Android端末のデフォルト・ブラウザでJavaScriptのデバッグをする方法

    Webアプリをデザインするときに必須となるのがJavaScript…

最近の記事

  1. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  2. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」
  3. コミックのイラストが新鮮だった!『MARVEL展』
  4. ジム用に購入♪ リバーサル・オッシュマンズ別注「ドライスウェットショーツ」
  5. 暮しの手帖社とのコラボ作品!大きい面積が使いやすい!「日東紡の新しいふきん」

アーカイブ

  1. 日常

    ニュースにゾクッ
  2. 日常

    「失敗」じゃ終わらせない
  3. 日常

    避暑
  4. Gravatar01.jpg

    WordPress

    WordPressにアバターが表示されるように「Gravatar」に登録してみた…
  5. 日常

    『昼の学校 夜の学校』
PAGE TOP