＃前書き
どうもグッピーです！今日からoreillyのreact ハンズオンラーニングの勉強をしていくので、その備忘録を書いていきたいと思います。役に立たないと思いますがみていただけると嬉しいです！
スコープについて
スコープとは、定義した変数の有効範囲を指定するもののことですね。スコープには次のような役割があります。
・変数名の競合を避ける
JavaScriptでは関数やブロックごとに別々のスコープが作られるので、プログラム内で同じ名前の変数があってもスコープが違えば別物となるそうです。
・メモリの消費を避ける
もしスコープがなければ全ての変数がグローバル(どこでも使えるという意味)になるので、メモリがあり得ないくらい消費されます。
スコープの種類
|--グローバルスコープ
|
|--ローカルスコープ---関数スコープ
| |
|----------ブロックスコープ
グローバルスコープ
プログラム全体のどこからでもアクセス可能にできるスコープです。
ローカルスコープ
グローバル変数以外の全ての変数は、ローカルスコープを持つローカル変数です。
関数スコープ
function(関数)ごとに作られるスコープのこと。var,let,constのいずれかで変数宣言をすると、関数の外部からはアクセスできず、関数の内側からのみ利用可能なローカル変数になります。
例(これからの例はCodeGrid様のサイトから引用)
```
function fn(arg) {
// fn関数の関数スコープを持つローカル変数を定義
var scope = 'local';
// fn関数のスコープ内のためアクセス可能
console.log(scope); // -> local
console.log(arg); // -> argument
}
fn('argument');
// 関数スコープの外側からはローカル変数や仮引数にアクセスできない
console.log(scope); // -> ReferenceError
console.log(arg); // -> ReferenceError
```
ブロックスコープ
ブロック({})ごとに作られるスコープのことを、ブロックスコープという。また、ブロックスコープを生成するのはletとconstのみです。
function fn() {
// for文のブロックスコープを持つローカル変数 i を定義
for (let i = 0; i < 3; i++) {
console.log(i); // -> 0, 1, 2
}
// for文のブロックスコープの外側からはアクセスできない
console.log(i); // -> ReferenceError
}
fn();
テンプレート文字列
文字列に変数を埋め込めるもの。テンプレート文字列は`で囲み、さらに${}のなかに変数を記述できる。