Warning: Parameter 1 to multibyte_patch::wplink_js() expected to be a reference, value given in /home/voidgraphics/www/crunchlog/wp-includes/plugin.php on line 579

Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/voidgraphics/www/crunchlog/wp-includes/plugin.php on line 579
JavaScriptでは「変数のスコープ」を正しく理解してエラーを減らそう! | Crunchlog
Warning: Parameter 1 to wp_default_styles() expected to be a reference, value given in /home/voidgraphics/www/crunchlog/wp-includes/plugin.php on line 579

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. chrome_touchevents.jpg

    JavaScript

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

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

  2. style_backgroundImage.jpg

    JavaScript

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

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

  3. js_comment.jpg

    JavaScript

    JavaScriptでコメントは「/* */」をなるべく使わないようにしたい

    コメントには囲った部分をすべてコメントにする「/* */」と、1…

  4. obj_clear.jpg

    JavaScript

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

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

  5. css_sprite.jpg
  6. offset_style_data.jpg

    JavaScript

    「offset」と「style」で取得する値が違う

    ちょっとはまったのでメモ。以下のように「offset」と「sty…

最近の記事

  1. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  2. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  3. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  4. 【コレクション】カードダス:SDガンダム外伝シリーズ
  5. 懐かしい!!カードダスSD戦国伝!!
  6. 【無印良品】作り置きに欠かせない!バルブ付き密閉保存容器
  7. 【UNIQLO】冬のジム通いにブロックテックフリースパーカをお得に購入!!
  8. 【UNIQLO】冬のジム通いにブロックテックフリースパンツをお得に購入!!
  9. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  10. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」

アーカイブ

  1. パックマンからマインクラフトまで! 日本初のゲーム展覧会「GAME ON」

    展覧会

    パックマンからマインクラフトまで! 日本初のゲーム展覧会「GAME ON」
  2. hm_brick_lane_bikes-1.jpg

    プロダクト

    H&Mのコラボコレクション「H&M for BRICK LA…
  3. D&DEPARTMENT

    講演会

    「ロングライフデザインについて 深澤直人×ナガオカケンメイ」 3
  4. 日常

    また撮影
  5. 新作公開記念に1回だけ挑戦!一番くじのSTAR WARS

    プロダクト

    新作公開記念に1回だけ挑戦!一番くじのSTAR WARS
PAGE TOP