【JavaScript】変数定義についてまとめ
JavaScriptで定義できる変数はconst、let、varの全部で3種類あります。
定義方法
var 変数名;
let 変数名;
const 変数名=初期値;
const のみ、変数の宣言時に必ず初期値を設定しなければいけません。そして再代入ができません。再代入しようとするとエラーになり、それ以降の処理が行われなくなるので注意が必要。基本的に、変数の再定義は参照透明性と呼ばれるルールを壊すため、バグを発生させやすい要因とされています。なので、変数に対して値を再代入する必要がない場合はconstで定義することが推奨されています。
スコープの違い
変数にはグローバル変数とローカル変数があります。スコープとはその変数が利用できる範囲のことで、それぞれの変数のスコープをグローバルスコープ、ローカルスコープと呼びます。
グローバルスコープはプログラム全体のどこからでもアクセスできるスコープで、ローカルスコープは変数が宣言された関数の中でのみ有効となるスコープです。さらに、ローカルスコープは、関数スコープとブロックスコープに分類できます。
グローバルスコープ
ローカルスコープ
├─関数スコープ
└─ブロックスコープ
関数スコープとは、関数（function）ごとに作られるスコープのことです。関数スコープ内で宣言された変数はvar、let、constの何れであってもローカル変数となります。
ブロックスコープとは、ブロック（{}）ごとに作られるスコープのことです。ブロックスコープ内でletまたはconstを用いて宣言した変数は、ブロックの内側からのみアクセス可能なローカル変数となります。
変数の優先順位
グローバル変数とローカル変数で同じ変数名が使用された場合、定義の優先順位はどうなるでしょうか？以下の例を参照してください。
var ponzu = 'Global';
console.log(ponzu);
function local(){
var ponzu = 'Local';
console.log(ponzu);
}
local();
console.log(ponzu);
//Global
//Local
//Global
初めにグローバル変数で「ponzu」が定義されています。なので、その次の行のconsole.log(ponzu);では結果がGlobalになりますね。
次に、関数local()内では、ローカル変数として同じ変数名で「ponzu」が定義されています。この時のconsole.log(ponzu);の結果はLocalです。
そして最後の、関数local()外に生成されているconsole.log(ponzu);の結果はGlobalとなります。
つまり、関数の中でグローバル変数と同じ変数名のローカル変数が定義された場合、その変数はローカル変数として扱われるということです。これは上書きをしているわけではなく、それぞれの変数は別物として扱われています。
巻き上げ（ホイスティング）
まだ変数定義がされていない状態で出力しようとすると、未定義の変数とみなされてエラーが起こってしまいます。このような挙動を起こすことを「変数の巻き上げ」と呼びます。JavaScriptでは実行したい処理の前に変数を定義しましょう。
関連記事
