求職者支援訓練Webサイト制作科 4月18日開講クラス 漂泊

初心者がプロになるための勉強 フェリカテクニカルアカデミーWebサイト制作科 4月18日開講クラス授業補足ブログ

★ 変数のスコープ

変数のスコープ

  • 変数の使える範囲
  • 関数内で定義された変数は、関数内の一番上で定義されたものとして処理されます
グローバル変数
  • 関数の外部で宣言した変数
  • プログラム全体で利用できます

グローバル汚染の悪影響

  • グローバル空間を特に理由のない変数定義で汚染してしまうと、サードパーティプラグインを読み込んだ時の変数の衝突・チームメンバーが書いたコードとの名前衝突・昔書いた自分のコードで使った変数との衝突が起こってしまうことがあります
  • したがって、グローバル変数を使わないための工夫をする必要があります
ローカル変数
  • 関数内で宣言した変数のスコープは、関数の内部だけです
  • その変数は、関数の内部だけでしか使うことができません

javascriptにおける変数の巻き上げ

もうひとつ、JavaScript の変数にまつわる独特な点として、例外を発生させることなく後に宣言した変数を参照できる点が挙げられます。この考え方は巻き上げとして知られています。JavaScript の変数は関数や文の先頭まで、ある意味「巻き上げられ」、持ち上げられます。一方、巻き上げられない変数は undefined 値を返します。そのため、その変数を使用したり参照した後に宣言や初期化を行っても、依然として undefined が返されます。

  • 関数内で宣言したローカル変数は全部関数内の一番最初に持って行く
  • その時は変数名だけ宣言するからundefinedになる


f:id:pbhfq:20171231145735p:plain

  • 関数外のグローバル変数の値を表示するはずが、「undefined」と表示されています
  • 実際の処理は、以下のようになります

f:id:pbhfq:20171231150703p:plain

ベストプラクティス:単独varパターン
  • 必ず関数の先頭でvar文を書くことによって、誤ってローカル変数をvarを付け忘れて宣言してしまうことを避ける事ができます
  • 習慣付けによってローカル変数のvarつけ忘れを防ぎやすい
  • ローカル変数や関数自体の全体的な可読性があがる
  • コード量が少なくて済む

求職者支援訓練 フェリカテクニカルアカデミー