【js】グローバルスコープとローカルスコープ
スコープとは
プログラミングでのスコープとは、ある変数や関数が特定の名前で参照される範囲のこと。
ある範囲の外に置いた変数等は、通常、その名前だけでは参照できない。このときこれらの変数はスコープ外である、「見えない」といわれる。
スコープの種類
・グローバルスコープ → ページ全体でどこからでも参照できる。
・ローカルスコープ → ページ内の部分的な範囲のみ参照できる。
グローバルスコープ
特徴：
ページ全体のどこからでも参照できる（scriptタグで2か所に分けてもグローバル変数は共通する）
関数内でも使用、再代入できる
書き方：
〇：JavaScriptのトップの位置に記述（例：global = 'hoge';）※宣言はどちらでもOKだが、宣言した方がわかりやすいかも
△：関数内で宣言なしに定義された変数（関数）（例：global = 'hoge';）
<script> //グローバル変数を定義 let gloval1 = 1000; let gloval2 = 5000; //priceで再代入されて、別の関数のsumで再代入された値で処理される window.onload = function () { function price(){ console.log('商品Aの値段は'+ gloval1 + 'です。'); //関数内でグローバル変数を再代入 gloval2 = 7000; console.log('商品Bの値段は値上げして、'+ gloval2 + 'になりました。'); //7000 } function sum(){ //別の関数で再代入されたグローバル変数を、他の関数でも使用 let total = parseInt(gloval1) + parseInt(gloval2) ; console.log('商品Aと商品Bの合計金額は、' + total + 'です。'); //1000+7000 = 8000 } price(); sum(); } </script>
【解説】
グローバル変数は、ローカル変数内で使用、再代入できる。
そして、関数内ではそれが優先される「 gloval2 = 7000;」の記述の後は7000円で処理が進む。
ただし、誤解しやすいのはこの処理の後、グローバル変数の値をどうするかである。
①関数処理によって、動的にグローバル変数値を変えたい：再代入
②グローバル変数は、関数処理の結果に影響されたくない：再宣言
今回は、合計（sum関数）で再代入されたグローバル変数の値で処理する必要があったので”①再代入”を選択した。
②の時はグローバル変数と全く同じ変数名を使用しても問題ないが、紛らわしいので、関数内で宣言する変数名はふつうに別の名称が良い。
※再代入の際、変数名をタイポすると意図しないグローバル変数になるので注意
ローカルスコープ
特徴：
変数や関数が、ある特定のスコープの範囲でしか参照されない。
メリット：
・コードの他の箇所に影響を与えない（予期せぬバグも起こりにくいので、メンテナンス性もgood）
・異なるスコープ範囲であれば名称がかぶっても干渉しない（便利）
書き方：
関数内で宣言する。
★letやconstなどで宣言しないと、グローバル変数扱いになるので注意!（バグの原因）
