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をつけずに定義すると関数外からでも呼び出せるようになります。意図的なこと以外ではつけ忘れないように気をつけないといけないですね。

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

JavaScriptで連想配列(ハッシュ)から1つずつ値を取り出して配列に入れてランダムで取得する前のページ

jQueryでオブジェクトの型を取得して判定などをしたい場合はjQuery.type()を使う次のページjQueryでウィンドウサイズによって処理を変える

関連記事

  1. BIDEO.JS

    JavaScript

    背景動画をフルスクリーンで表示させるJSライブラリ「BIDEO.JS」

    BIDEO.JSは、webページの背景にフルスクリーンで動画を表示させ…

  2. Emergence.js

    JavaScript

    ブラウザで要素の可視性を検出する「Emergence.js」

    Emergence.jsは、ブラウザで要素の可視性を検出することができ…

  3. jQuery TextFill

    JavaScript

    テキストをリサイズしてコンテナにフィットさせる「jQuery TextFill」

    jQuery TextFillはテキストをリサイズしてコンテナにフィッ…

  4. simple-calendar

    JavaScript

    イベント設定もできるシンプルなカレンダー実装「simple-calendar」

    simple-calendarは、イベント設定も可能なシンプルなカレン…

  5. Simply Modal Box
  6. ReadRemaining.js

    JavaScript

    記事を読むのにかかる時間を教えてくれるjQueryプラグイン「ReadRemaining.js」

    ReadRemaining.jsは記事を読むのにどのくらい時間がかかる…

コメント

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

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

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP