UXPに備えてモダンなJSの書き方に慣れる（const、let 定数、変数）
ECMA2015以降から定数、変数の定義はvarからconst、letを使用するのが主流となりvarはもはや使われなくなりつつあります。しかしAdobe jsxのECMA3準拠の環境下だとvarがずっと主流でありました。しかしこのただの定数、変数宣言がなぜ新しい形式で行われるようになったのか。
そもそも const、letって？
constは定数の宣言、一度定義して中身が変わらないことが前提の値を宣言します。letは変数の宣言、文字通り宣言後に値が再度変わりうる値を宣言します。しかしvarも変数の宣言であったはず、今回この二つの違いを掘り下げます。
varの仕様について
varは変数の宣言となります。何かしらの変数を定義する際に最初のこのvarを使用して宣言をする必要があります。例え値が変わることがあってもこの宣言は必須になります。
参考書によくある書き方で言うとこの場合nという箱に0というnumber型の値を代入しています。もちろん宣言後に値の内容を再代入することも可能です。
それではこれはどうでしょうか？
驚きです。宣言前に代入ができています。これは変数の巻き上げといって変数自体どこでも宣言されれば宣言されたスコープ内の頭で宣言のみされた状態とみなされます。コード自体は動くのですがMDNでもスコープの先頭で宣言することを勧めています。
なんなら再宣言もできてしまいます。
どうでしょうか。varとは自由度がかなり高い（今までvarしか使わなかった方はconst letの厳しさに驚くかもしれません。）宣言内容なので。ちなみにuse strict環境下ではさすがに宣言のない変数の代入は禁止されています。
しかしuse strict宣言のない環境下では動きます。ただし宣言のない変数定義は強制的にグローバルスコープを持ちます。関数内で定義されようが変数はグローバルスコープを持つためグローバル汚染が発生、参考書でもこれは禁止された方法でもあります。
以上がおおよそのvarの説明です。僕はこのvarですがECMA3を使用していた時はこのvarの役割についてよくわかっていませんした。再宣言までできて宣言の位置の関係なく再代入を何度もできるvar。何のための宣言なのか。後々jsにおける宣言の役割をECMA2015でこのconst,letの役割を通じて初めて理解できました。
const letによる定数、変数の宣言
前も述べた通りconstは定数の宣言。letは変数の宣言となります。varは変数の宣言でしたがコード実際に何度も書くとおおよそ変数の内容が変わる事自体あまり無いでしょう。というわけで基本はconstを使用した定数の宣言を使用します。
このconst,letですが宣言前の定数、変数のアクセスは禁じられています。
つまりこのconstによる定数の宣言は宣言されたスコープにおいて定数の値が常に一定であるという約束が宣言の時点で決まります。この後再代入、再宣言が行われるとエラーを返しますので開発者に規則に従ったコードを示す役割もありますが第三者がコードを見た時も宣言時に定数が変わらない値であるとすぐに理解できます。しかも定数が使われるのスコープ内の宣言以降の場所で使われるという事でその点においても可読性を上げてくれます。letは変数の宣言という事でconstと違い値の再代入が許されますがvarと違って再宣言は禁じられています。
const,letとも宣言前の変数、定数のアクセスができなくなった、再宣言が禁止されたことにより宣言時に変数なのか定数なのか明示して尚且つ宣言後に変数、定数へのアクセスが予想できます。つまり宣言を通じてコードの内容をより明示できるようになるというわけです。だからこそ再代入のない変数はconstで宣言して定数にすべきであり極力constのみ使用すべきなのです。というわけで僕の経験で語るとconst,letを使用すると宣言の理解が深まると思います。
ブロックスコープの違い
varはブロックスコープにとる制約を受けません。なのでtry.catch文の中でのスコープやfor文のスコープで宣言されてもスコープの外からアクセスできます。
これを解決するためには即時関数で囲む、もしくはブロックスコープの外で宣言することによりブロックスコープの外からアクセスできます。
ものすごく厳しいイメージのあるconstですがconstで宣言されたオブジェクトのプロパティや中身をさわることは可能です。
letの場合はすでに宣言されたオブジェクトに対して全く別のオブジェクトが代入可能、といってもこんな変な再代入は滅多にやらないとは思いますが。
なのでconstによる宣言の場合でもオブジェクト、配列の内容は問題無く変えらます。