JavaScriptのスコープについてメモ

■ 目次

  1. 概要
  2. スコープについて
  3. スコープについて例
  4. ブロックスコープについて
  5. 参考

■ 概要

JavaScriptのスコープについてまとめる

JavaScript勉強シリーズ

■ スコープについて

スコープとは変数名や関数名の有効範囲のこと
JavaScriptのスコープはたった2つだけ

グローバルスコープ 関数外で宣言したスコープ
関数スコープ 関数内で宣言したスコープ

関数スコープはグローバルスコープとの対比でローカルスコープとも呼ばれる
JavaScriptにはブロックスコープがないことに注意

■ スコープについて例

グローバルスコープと関数スコープを示す例

var x = 1;

function test() {
  print('x = ' + x);
  var x = 2;
  print('x = ' + x);
}

test();
// x = undefined
// x = 2

print('x = ' + x);
// x = 1

ローカル変数xのスコープは関数test内の全域になる
従って5行目でxを宣言しているのでxはローカル変数となり
4行目の時にはxに値を代入していないのでundefinedが出力されて
6行目の時には5行目で代入した2が出力される

関数testの中でxを宣言していない場合はグローバル変数のxが使われる

var x = 1;

function test() {
  print('x = ' + x);
}

test();
// x = 1

従ってローカル変数は関数の先頭で宣言するのが推奨されている

■ ブロックスコープについて

JavaScriptにはブロックスコープがない

var x = 1;
{
  // 関数と違ってundefinedにならない
  print('x = ' + x); // x = 1
  var x = 2;
  print('x = ' + x); // x = 2
}

// ブロックスコープがないためxには2が入ったまま
print('x = ' + x); // x = 2

letというものを使ってブロックスコープを実現することができるがECMAScript6で対応されているみたいなので何も考えずletを使おうとするとエラーになるので注意
【JavaScript 】【Chrome】let変数。chromeの”extended mode”

※ 3/19追記
letはすでにデフォルトで有効になっているためextended modeである必要はないみたいでした
試したところchromeだと「chrome://flags/」で「JavaScript の試験運用機能を有効にする」を行うとletが使えました
ご指摘ありがとうございます

■ 参考

  • パーフェクトJavaScript (書籍)

2 Comments

  1. 通りすがり said:

    letはもうすでにデフォルトで有効になっています。
    ”extended mode”である必要はありません。

    2016年3月18日
    Reply
    • tomsato said:

      @通りすがり さん
      そうだったんですね!独学なためご指摘大変嬉しいです!
      ありがとうございます!

      2016年3月19日
      Reply

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です