javascriptを書く上で絶対に外せない「スコープ問題」
今回は初学者やスコープという言葉は知っていても詳しく紹介はできない方に向けてjavascriptにおけるスコープについて説明していきます。
javascriptのスコープとはなんぞや
javascriptのスコープは一言でまとめると変数が使える範囲です。
変数って何、、?
という方はググってください!!
さて本題ですがjavascriptを書く時に同じ変数名を複数回使うと思わぬバグを生み出す原因になります。
そこで同じ変数名でも使う場所を指定してあげることで使いやすくしてあげようぜ!!
という時に出てくるその「場所」がスコープです。
まとめ
スコープ=変数が使える範囲
スコープを考えないと問題が起きる
スコープを使わずに同じ変数名を使うとバグなどの原因になります。
イメージだと、名前しかわからない学校で佐藤くんが3人いるとします。
佐藤くんと呼んだときに3人に返事されたら先生は混乱しちゃいますよね。
こんな感じで機械も混乱しちゃいます。
この問題を解決してくれるのがスコープという考え方です。
今回の佐藤くんのケースの置き換えてあげると
各佐藤くんが存在する範囲を指定してあげるイメージなります。
例えばふじ組の佐藤くん、もも組の佐藤くん、ひまわり組の佐藤くん
こんな感じですね。
これで先生も混乱しません!!
javascriptのスコープの種類
javascriptには
グローバルスコープ
ローカルスコープ
の二種類あります。
グローバルスコープ
関数の外で宣言された変数の範囲です。
プログラムのどこからでも参照できます。
グローバルスコープで変数を作りまくると機械が混乱する元ですので、時と場合に分けて使いましょう。
グローバルスコープを使う時
グローバルスコープはどこで使うの?
と思われる方がいるかもしれません。
基本的にグローバルスコープは一回しか使わない変数を作る時に使います。
初期化時の変数などですね。
ローカルスコープ
特定の範囲内で宣言する変数の範囲です。
指定した範囲の中でのみ使えます。
ローカルスコープを使う時
特定の処理を行う際に、他の場所で既に使ってしまった変数名を使いたい時などに使います。
基本的に決まった処理は別にして変数もローカルスコープを指定しましょう。
ローカルスコープは2種類
ローカルスコープは
・関数スコープ
・ブロックスコープ
の2種類に分けることができます。
関数スコープを使うとき
関数ごとで処理を行う際に、他の場所で既に使った変数名を使いたい時などに使います。
基本的に決まった処理は関数別にして変数も関数スコープを使いましょう。
ブロックスコープを使う時
関数以外にブロックごとで処理を行う際に、他の場所で既に使った変数名を使いたい時などに使います。
まとめ
・ローカルスコープはさらに関数スコープとブロックスコープに分けることができる
・状況によって使い分けること