概要
JavaScriptのスコープについてまとめる
JavaScript勉強シリーズ
- JavaScriptのthisについてメモ
- JavaScriptのコンストラクタについて
- JavaScriptのwindowについてのメモ
- JavaScriptのプロトタイプ継承について
- JavaScriptのプロトタイプチェーンについてメモ
- JavaScriptのスコープについてメモ
- JavaScriptの論理演算による存在チェックについて
- 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 (書籍)
コメントを書く
コメント一覧