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. JavaScript

    jQueryプラグイン・2014年上半期56選まとめ

    気づいたら2014年も上半期が終わってしまいましたね。そんなわけで、2…

  2. Image Figure Caption effects
  3. uploadHBR

    JavaScript

    複数の画像選択に対応したjQueryファイルアップローダー「uploadHBR」

    uploadHBRは複数の画像選択に対応したファイルアップローダーを実…

  4. ad-datepicker

    JavaScript

    アクセシブルなデートピッカーを実装できる「ad-datepicker」

    ad-datepickerはアクセシブルなデートピッカーを実装できるj…

  5. PopSelect

    JavaScript

    タグ形式のセレクトボックスをポップオーバーで表示させる「PopSelect」

    PopSelectはタグ付けするような感覚のセレクトボックスをポップオ…

  6. textwriteout

    JavaScript

    テキストの書き出し・削減ができるjQueryプラグイン「textwriteout」

    textwriteoutは指定したテキストを書き出したり削減したりでき…

コメント

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

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

最近の記事

  1. Anker PowerCore Lite 20000
  2. ネクスタイム
  3. フォールドオーバーポーチ
  4. 田沢湖
  5. ハクバ シリコンクロス

Instagram始めました

Facebookページ

アーカイブ

PAGE TOP