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

    JavaScript

    シンプルで使い勝手がとてもいいツールチップを実装できるjQueryプラグイン「Tooltipster…

    シンプルで使い勝手がとてもいいツールチップを実装できるjQueryプラ…

  2. Product Builder

    JavaScript

    カスタマイズ性に優れたオンラインストアに役立つ「Product Builder」

    Product Builderは、カスタマイズ性に優れたオンラインスト…

  3. jQuery Modal

    JavaScript

    シンプルでレスポンシブなモーダルボックス「jQuery Modal」

    jQuery Modalはシンプルでレスポンシブに対応したモーダルボッ…

  4. CardTabs

    JavaScript

    ミニマルで超軽量・シンプルなタブを実装できるjQueryプラグイン「CardTabs」

    CardTabsは超軽量でシンプルなタブを実装できるjQueryプラグ…

  5. Quill

    JavaScript

    高機能なWYSIWYGエディタを実装できる「Quill」

    Quillは豊富なAPIとカスタマイズ性に優れた高機能なWYSIWYG…

  6. JavaScript

    アイコンをクリックすると周りにメニューが表示されるjQueryプラグイン「FerroMenu」

    FerroMenuというjQueryプラグインを使えばアイコンをクリッ…

コメント

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

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

最近の記事

  1. クッキー&クリーム ポップコーン
  2. マウイチップス マウイオニオン味
  3. グリーンビーントゥーバー
  4. VS-543AS

アーカイブ

PAGE TOP