ITエンジニア日記 ~NO SKILL, NO LIFE~

学んだ技術や、気になることをアウトプットしていきます。プログラミング, インフラ, etc...

【JavaScript】変数宣言時の var, let, const

Reactでは従来(ES2015(ES6)より前)のJavaScriptでも書けるらしいのですが、標準はES2015(ES6)だそうです。そして、JavaScriptの現在の最新はES2019(ES10) だそうです。
でも、Reactで調べると出てくるのはES2015(ES6)(以降、ES6)。最低限、ES6に則った形で作りなさいよってっことかな?

Reactを勉強するにあたってJavaScrip知識必須なので、JavaScriptの基本を押さえつつ、ES6で追加された機能や構文についても勉強していきます。

今回は letconstvarについて。

1. let , const, var

従来(ES6よりまえ)であれば変数宣言時には var を使っていました。
ES6以降では、変数・関数の宣言に letconst というのが追加されました。
(関数についてはまた次回)

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と並行して勉強していきます。