JavaScript

JavaScriptの関数のスコープについてちょっと確認してみる

JavaScriptの関数のスコープを確認、整理する意味で記事にしてみました。なんか、思わぬところでハマっちゃいそうな感じがしたので。。知ってる人は何を今更といった感じですが。ということで以下ちょっとしたメモ書きです。
[ads_center]

スコープ

関数内で定義された変数はローカル変数、関数外で定義された変数はグローバル変数といいます。で、ローカル変数はその関数内だけで使うことができ、グローバル変数はその関数の中では使うことができません。ローカルかグローバルかで使える有効範囲が変わってきます。

var sample1 = "サンプル1";
function sampleText(){
    var sample1 = "サンプル2";
    document.writeln(sample1);
}
document.writeln(sample1); // 実行結果 サンプル1
sampleText(); // 実行結果 サンプル2

上記では、sampleTextという関数内で定義されているsample1という変数がローカル変数、関数外で定義されているsample1がグローバル変数です。スコープが違うので出力も違いますね。

varをつけるかつけないで変わる

varをつけずに変数に値を代入するとその変数はグローバル変数になります。

【varをつけた時】

function sampleText(){
    var sample1 = "サンプル1";
    document.writeln(sample1);
}
sampleText(); // 実行結果 サンプル1
document.writeln(sample1); // 実行結果 なし

関数内でvarをつけて変数に代入した時はローカル変数なので、関数外でその変数を呼び出そうとしてもできません。これをvarをつけずに変数に代入するとグローバル変数になります。

以下がそれです。

【varをつけない時】

function sampleText(){
    sample1 = "サンプル1";
    document.writeln(sample1);
}
sampleText(); // 実行結果 サンプル1
document.writeln(sample1); // 実行結果 サンプル1

こんな感じで、関数内でvarをつけずに定義すると関数外からでも呼び出せるようになります。意図的なこと以外ではつけ忘れないように気をつけないといけないですね。

ということで、ちょっとしたスコープの確認の記事でした。

関連記事

  1. no-image

    JavaScript

    チェックボックスをアニメーショントグルにする「jquery-simpletoggler」

    jquery-simpletogglerは、デフォルトのチェックボック…

  2. no-image

    JavaScript

    フラットでシンプルなカラーピッカー実装「Pickr」

    Pickrはフラットでシンプルなカラーピッカーを実装できるのが特徴です…

  3. jQlouds

    JavaScript

    ふわふわと流れるアニメーション付きの雲を実装できるjQueryプラグイン「jQlouds」

    jQloudsというjQueryプラグインを使えば、ふわふわした雲を実…

  4. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで紹介したjQueryプラグイン12選のまとめ 2012/08 – 2012/0…

    2012年8月〜2012月9月までの当ブログで紹介したjQueryプラ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. cheero Smart USB Charger 48W CHE-320
  2. ブエノカフェ CM-200

アーカイブ

PAGE TOP