今回はES6（正式名称はES2015）における変数宣言var/let/constについて解説をしたいと思います。結局どの変数宣言を使えば良いの？となっている方の参考になればと思います。
ES6とは
ES6（正式名称ES2015）とは、ECMASCriptの6th Editionです。言い換えれば、これまでECMASCriptは6回アップデートが行われており、ES6はその最新バージョンになります。
ECMASCriptの6th Editionのこと。ECMAScript 6th editionの6を取ってES6と呼ばれていたが、2015年に標準化されたため正式名称はES2015になった。
上記で出てくるECMASCriptとは、簡単に言うとJavaScriptがどのブラウザでも動かせるようにとある団体がJavaScriptのコア部分を標準化したものになります。
ECMAScriptはJavaScriptの中核仕様を抜き出して標準化したもの。
開発当初のJavascriptは、ブラウザによる独自の拡張が多く、互換性が低かったため、Ecma Internationalが中心となりECMAScriptが開発された。
【結論】結局どれを使うべきか
結論、constを使用しましょう。
もしくはlet。
varに関しては絶対に使わないようにしましょう。
constが第一選択肢で、どうしても再代入が必要な時のみletを使用するという方針が良いでしょう。
具体例
変数宣言ではconst/letを使用し、varは絶対に使用してはいけないことを前述しました。
ではなぜvarを使用してはいけないのでしょうか？
理由は3つです。
- 再宣言が可能であるため値が変わってしまいやすい
- 変数宣言前に代入が可能である（巻き上げが起きてしまう）
- スコープが関数単位である
それぞれ具体的に見ていきましょう。
再宣言が可能であるため値が変わってしまいやすい
varは再代入と再宣言が可能であるため、バグを生み出しやすくなってしまいます。
> var x = 1;
> x = 2;
> x
> 2 // 再代入
> var x = 3;
> x
> 3 // 再宣言
ちなみに、letは再代入は可能ですが再宣言はできません。
> let x = 1;
> x = 2;
> x
> 2 // 再代入
> let x = 3;
Uncaught SyntaxError: Identifier 'x' has already been declared変数宣言前に代入が可能である（巻き上げが起きてしまう）
varは変数宣言前にも代入が可能であり、これは他の言語では見られないため思わぬバグを生み出しかねません。
変数宣言前にも代入が可能な現象は「巻き上げ（Hoisting）」と呼ばれています。
x = 1;
console.log(x);
var x;
jsを実行
> 1スコープが関数単位である
varのスコープは関数単位のためif文といった制御構文をすり抜けてしまいます。
早速例を見ていきましょう。
var x = 1;
if (true) {
var x = 2;
var y = 3:
console.log(x);
}
console.log(x);
console.log(y);
JSを実行
> 2
> 2
> 3
上記のように、varを使用するとif文の中に含まれている変数を参照できてしまいます。
一方で、letやconstを使用することで皆さんが想像した通りのReference Errorが出力されるはずです。
まとめ
- ES6（正式名称ES2015）とは、ECMASCriptの6th Editionである
- ECMASCriptとは、JavaScriptがどのブラウザでも動かせるようにとある団体がJavaScriptのコア部分を標準化したものである
- constもしくはletを使用し、varは絶対に使わないようにする
参考
ES2015(ES6)入門：
https://qiita.com/soarflat/items/b251caf9cb59b72beb9b
ES6(ES2015)チートシート：
https://qiita.com/morrr/items/883cb902ccda37e840bc
今回はES6（正式名称はES2015）における変数宣言var/let/constについて解説しました。今後、無意識にvarを使うことのないよう注意しましょう。
