【JavaScript】変数宣言時の var, let, const
Reactでは従来(ES2015(ES6)より前)のJavaScriptでも書けるらしいのですが、標準はES2015(ES6)だそうです。そして、JavaScriptの現在の最新はES2019(ES10) だそうです。
でも、Reactで調べると出てくるのはES2015(ES6)(以降、ES6)。最低限、ES6に則った形で作りなさいよってっことかな?
Reactを勉強するにあたってJavaScrip知識必須なので、JavaScriptの基本を押さえつつ、ES6で追加された機能や構文についても勉強していきます。
今回は let と const 、varについて。
1. let , const, var
従来(ES6よりまえ)であれば変数宣言時には var を使っていました。
ES6以降では、変数・関数の宣言に let と const というのが追加されました。
(関数についてはまた次回)
var, let, const の違いをみていきます。
var での変数宣言
下記ではグローバル変数とローカル変数それぞれ宣言して、console.logで各値を表示させています。
関数fooの外で宣言されている 「var y」と、関数foo内の「var y」は変数名は同じですが、スコープが異なっているので別の変数として扱われます。
また、関数foo内の 「var y」 のように同一スコープ内で同じ変数名を宣言しても、エラーにはなりません。
var x = 10; var y = 20; function foo() { x = 15; var y = 25; console.log('x=' + x); console.log('y=' + y); var y = 1; console.log('y=' + y); } foo(); console.log('x=' + x); console.log('y=' + y); #結果 x=15 y=25 y=1 x=15 y=20
var は変数が制御構文内で宣言されていても、外からアクセスすることが可能です。
下記のようにif文の中で変数を宣言しても、if文のスコープ外からその変数にアクセスができています。
Java言語などではコンパイルエラーになる書き方なので、ちょっと違和感。。。
if(true) { var hello = 'こんにちは'; } console.log(hello); #結果 こんにちわ
let での変数宣言
var のときと同様にグローバル変数とローカル変数それぞれ宣言して、console.logで各値を表示させています。
var とは異なりSyntaxErrorとなります。
これは let で変数を宣言した場合、変数の再宣言が不可能だからです。
そのため、関数fooの中で 「let y = 25;」 と変数 y を宣言したのち、「let y = 1;」 と変数 y を再宣言しているためにエラーとなります。
let x = 10; let y = 20; function foo() { x = 15; let y = 25; console.log('x=' + x); console.log('y=' + y); let y = 1; console.log('y=' + y); } foo(); console.log('x=' + x); console.log('y=' + y); #結果 Uncaught SyntaxError: Identifier 'y' has already been declared
また、有効スコープについても差異があります。
下記のようif文の中で変数宣言した場合、var であればスコープ外からもアクセスできました。しかし、let の場合はReferenceErrorとなり、制御構文のスコープ外から参照することができません。
if(true) { let hello = 'こんにちは'; } console.log(hello); #結果 let_if.html:10 Uncaught ReferenceError: hello is not defined
const での変数宣言
const は、let と同様に変数の再宣言が不可能です。
それに加えて、変数への値の再代入も不可能となっています。
要するに、const は定数の宣言です。
下記の例だと 「const x = 10;」とconst で 変数 x を宣言&初期化したのち、関数foo()の中で変数 x に対して、"15" を再代入しています。
その結果、「定数変数への割り当てしてるからTypeErrorだよ」っていうエラーが出ています。
const x = 10; const y = 20; function foo() { x = 15; } foo(); console.log('x=' + x); console.log('y=' + y); #結果 const.html:10 Uncaught TypeError: Assignment to constant variable.
2. まとめ
変数宣言につかわれる、var, let, const についてまとめてみました。
JavaScriptをまともに書いたのが去年の業務で約3か月ぐらい。まだまだ初心者ですが、Reactと並行して勉強していきます。