2021.9.14

【JavaScript】変数定義についてまとめ

【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では実行したい処理の前に変数を定義しましょう。

Share Please

Read this too