概要

javascriptにおける変数の宣言を詳しく調べてみます。

本ブログでも以前の投稿(http://propansystem.net/blog/2018/06/20/post-6640/)で、変数の宣言について触れていますが、そもそもjavascriptには歴史的な話としてECMAScript(https://ja.wikipedia.org/wiki/ECMAScript)という名称で標準化されており、ECMAScriptにはバージョンが策定されています。

正式にリリースされているECMAScript2015(2015年に策定)になり、バージョンを省略してES6と呼ぶこともあります。

ES6の前までのバージョンでは、主にvarで宣言していましたが、ES6からはletで宣言することも可能です。

var と letについて

両者の違いは変数スコープの違いがあります。

varの宣言は
以下のような挙動になります。

[js]
var test = 10;
console.log(test);

{
var test = 20;
console.log(test);
}

console.log(test);
[/js]

出力結果は
[js]
10
20
20
[/js]
となります。
varで宣言された変数はブラケットで囲んだ後の変数testが20に置き換わっています。

続いて、letでの宣言を試します。
[js]
let test2 = 30;
console.log(test2);

{
let test2 = 40;
console.log(test2);
}

console.log(test2);
[/js]

出力結果は
[js]
30
40
30
[/js]
になります。
letで宣言された変数はブラケットの後、変数testの値のが30に置き換わっていません。
このようにletでの宣言は厳密にブラケット内で使うことができ、コーディングの際の不具合の低減につながります。

実装上の留意点

ECMAScriptの策定については、2009年に策定されたEdition5から、2015年以降にEdition6に変わりました。

言語仕様が変わると、ブラウザがそれに対応しているかどうか、といった問題も出てくるので、
一概にjavascript(ECMAScript)のバージョンだけを意識してコーディングができるとも言い切れません。
開発環境や利用環境、全体を見てのコーディングが必要です。