【React入門】letとvarとconstの違いや使い分けを徹底解説！（変数宣言）

JavaScriptでは、変数を宣言するために以下の命令を要する。

• let
• const
• var

今回はそれぞれの使い命令の使い方、Reactにおいて最適な変数宣言を紹介します。

各変数宣言の使い分けは以下の通りです。

letとvarの違い

letとvarの違いについては、letは比較的新しい命令になります。

letはvarの上位互換のような位置づけのため、letの使用が推奨されています。

letには以下のような特徴があります。

ブロックスコープに対応

ブロックスコープとは、変数の有効範囲を｛・・｝に限定することです。

以下のコードは、エラーが発生します。

letがブロックスコープに対応しているため、エラーとなります。

letの部分をvarに置き換えるとエラーが発生しない、それはvarがブロックスコープに対応していないためです。

そのため、varで宣言された変数は｛・・｝を外れても存在 してしまいます。

一般的に、変数の有効範囲は狭くあるべきだといわれているので、より限定したスコープをもつ、letが推奨されている。

同名の変数を監視する

上記コードは、同名の変数宣言チェックにより、エラーとなります。

varに置き換えるとエラーになりません、varの場合は再宣言された変数として認識するためです。

意図しない変数宣言の変更により、バグの原因となることが多いため、

変数の衝突を監視するletが推奨されている。

constは定数を宣言するための命令です。

上記コードは、定数に代入できないようなエラーが発生する。

ただし、constは再代入できないではなく、変更できないが正しいです。

例えば、以下のコードはエラーは発生しません。

配列そのものは変更せず、中身の要素だけを入れ替えることはconstの規約に反していないので、
使用することが可能です。

letとconstの使い分け

letとconstの説明したところで、letとconstどっち使えばいいのかという疑問があるでしょう。

一般的にはconstを推奨されています。

実際のアプリを記述する際に、元の値を上書きしなければならない状況はさほどありません。

演算を施した結果は元の変数に書き戻すより、新たな変数に代入したほうが可用性が高くなります。

再代入される可能性のない変数にletを宣言することは、どこかで値が変更されるかもしれない可能性を
考慮しなければならない分扱いにくい。

Reactにおいて、扱う対象がほとんどオブジェクト型なので、constであっても中身の変更が可能です。

Reactにおいて、変数宣言する際はconstが最適であるといえます。