スコープの種類と宣言キーワード
スコープの種類
グローバルスコープ
ドキュメント内のどこからでも参照可能。
関数スコープ
宣言された関数内でのみ参照可能。関数内の入れ子の関数・ブロックからは参照可能。
ブロックスコープ
宣言されたブロック内でのみ参照可能。ブロック内の入れ子の関数・ブロックからは参照可能。
宣言キーワードとスコープ
キーワードなしの宣言
ドキュメント内のどこからでも参照可能なグローバルスコープ。
var
宣言された関数内の関数スコープ。
- ドキュメント直下で宣言した場合、グローバルスコープ
- 関数で宣言した場合、その関数内のスコープ
- ブロック内で宣言した場合、そのすぐ外側の関数のスコープ（ブロックがドキュメント直下にあればグローバルスコープ）
let, const
宣言されたブロック内のブロックスコープ。
- ドキュメント直下で宣言した場合、グローバルスコープ
- 関数で宣言した場合、その関数内のスコープ
確認
グローバルスコープ
JSコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
function func() { console.log('--- in function ---') console.log(global_none); console.log(global_var); console.log(global_let); console.log(global_const); global_none = 'global_none: rev in func'; global_var = 'global_var: rev in func'; global_let = 'global_let: rev in func'; //global_const = 'global_const: rev in func'; // -> Uncaught TypeError: Assignment to constant variable console.log('global_const: CANNOT assign') } global_none = 'global_none: init in global'; var global_var = 'global_var: init in global'; let global_let = 'global_let: init in global'; const global_const = 'global_const: init in global'; console.log('--- global ---') console.log(global_none); console.log(global_var); console.log(global_let); console.log(global_const); func(); console.log('--- after function call ---') console.log(global_none); console.log(global_var); console.log(global_let); console.log(global_const); { console.log('--- in block ---') console.log(global_none); console.log(global_var); console.log(global_let); console.log(global_const); global_none = 'global_none: rev in block'; global_var = 'global_var: rev in block'; global_let = 'global_let: rev in block'; //global_const = 'global_const: rev in func'; // -> Uncaught TypeError: Assignment to constant variable console.log('global_const: CANNOT assign') } console.log('--- after block ---') console.log(global_none); console.log(global_var); console.log(global_let); console.log(global_const); |
実行結果
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
--- global --- global_none: init in global global_var: init in global global_let: init in global global_const: init in global --- in function --- global_none: init in global global_var: init in global global_let: init in global global_const: init in global global_const: CANNOT assign --- after function call --- global_none: rev in func global_var: rev in func global_let: rev in func global_const: init in global --- in block --- global_none: rev in func global_var: rev in func global_let: rev in func global_const: init in global global_const: CANNOT assign --- after block --- global_none: rev in block global_var: rev in block global_let: rev in block global_const: init in global |
関数スコープ
var, let, constとも関数内で宣言された場合はその関数内のみのスコープ- 宣言された関数の中に入れ子で宣言された関数からは参照可能
- 入れ子の内側の関数内で宣言された
var, let, constは、外側の関数からは参照できない
JSコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
function func() { console.log('--- in function ---') var func_var = 'func_var: init in function'; let func_let = 'func_let: init in function'; const func_const = 'func_const init in function'; console.log(func_var); console.log(func_let); console.log(func_const); (function() { var nested_func_var = 'nested_func_var: init in nested function'; let nested_func_let = 'nested_func_var: init in nested function'; const nested_func_const = 'nested_func_const: init in nested function'; console.log('--- in nested function ---') func_var = 'func_var: rev in nested function' func_let = 'func_let: rev in nested function' console.log(func_const); })() console.log('--- after nested function ---') console.log(func_var); console.log(func_let); console.log(func_const); //console.log(nested_func_var); console.log('nested_func_var: NOT defined'); //console.log(nested_func_let); console.log('nested_func_let: NOT defined'); //console.log(nested_func_const); console.log('nested_func_const: NOT defined'); } func(); console.log('--- after function call ---') //console.log(func_let); // -> Uncaught ReferenceError: func_let is not defined console.log('func_var: NOT defined'); //console.log(func_let); // -> Uncaught ReferenceError: func_let is not defined console.log('func_let: NOT defined'); //console.log(func_const); // -> Uncaught ReferenceError: func_cost is not defined console.log('func_cost: NOT defined'); |
実行結果
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
--- global --- --- in function --- func_var: init in function func_let: init in function func_const init in function --- in nested function --- func_const init in function --- after nested function --- func_var: rev in nested function func_let: rev in nested function func_const init in function nested_func_var: NOT defined nested_func_let: NOT defined nested_func_const: NOT defined --- after function call --- func_var: NOT defined func_let: NOT defined func_cost: NOT defined |
ブロックスコープ
var宣言はブロック内外に関わらず参照可能let, constは宣言されたブロック内のみのスコープ- 宣言されたブロックの中の入れ子のブロックからは参照可能
- 入れ子の内側のブロック内で宣言された
var, let, constは、外側のブロックからは参照できない
JSコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
console.log('--- global ---') { console.log('--- in block ---'); var block_var = 'block_var: init in block'; let block_let = 'block_let: init in block'; const block_const = 'block_const: init in block'; console.log(block_var); console.log(block_let); console.log(block_const); { console.log('--- in nested block ---'); var nested_block_var = 'nested_block_var: init in nested block'; let nested_block_let = 'nested_block_let: init in nested block'; const nested_block_const = 'nested_block_const: init in nested block'; block_var = 'block_var: rev in nested block'; block_let = 'block_let: rev in nested block'; console.log(block_const); } console.log('--- after nested block ---'); console.log(block_var); console.log(block_let); console.log(block_const); console.log(nested_block_var); //console.log(nested_block_let); console.log('nested_block_let: NOT defined'); //console.log(nested_block_const); console.log('nested_block_const: NOT defined'); } console.log('--- after block ---'); console.log(block_var); //console.log(block_let); // -> Uncaught ReferenceError: block_let is not defined console.log('block_let: NOT defined'); //console.log(block_const); // -> Uncaught ReferenceError: func_var is not defined console.log('block_const: NOT defined'); |
実行結果
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
--- global --- --- in block --- block_var: init in block block_let: init in block block_const: init in block --- in nested block --- block_const: init in block --- after nested block --- block_var: rev in nested block block_let: rev in nested block block_const: init in block nested_block_var: init in nested block nested_block_let: NOT defined nested_block_const: NOT defined --- after block --- block_var: rev in nested block block_let: NOT defined block_const: NOT defined |