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. 2013年上半期jQueryプラグインまとめ

    JavaScript

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

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

  2. EZ Plus

    JavaScript

    タッチにも対応した画像ズーム機能を実装できるjQueryプラグイン「EZ Plus」

    EZ Plusはタッチにも対応した画像ズーム機能を実装することができる…

  3. Segment

    JavaScript

    SVG pathをアニメーションさせる軽量のスクリプト「Segment」

    SegmentはSVG pathをアニメーションさせる軽量のスクリプト…

  4. Complexify

    JavaScript

    パスワードの強さを視覚的にフィードバックしてくれる「Complexify」

    Complexifyはユーザーが入力したパスワードの強さを視覚的にフィ…

  5. JavaScript

    テキストを中央に向かうにつれて大きくしたりできるjQueryプラグイン「jqIsoText」

    結構おもしろかったのでメモしときます。テキストに簡単なエフェクトをかけ…

  6. Houdini

    JavaScript

    シンプルな折りたたみ・展開やアコーディオンを実装できる「Houdini」

    Houdiniはシンプルな折りたたみ・展開ができる機能やアコーディオン…

コメント

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

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

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP