JavaScriptでは、変数を宣言するために以下の命令を要する。
- let
- const
- var
今回はそれぞれの使い命令の使い方、Reactにおいて最適な変数宣言を紹介します。
各変数宣言の使い分けは以下の通りです。
- let, var:変数の宣言に用いる(letが推奨)
- const:定数の宣言に用いる
本文で詳しく解説していきます!
letとvarの違い
letとvarの違いについては、letは比較的新しい命令になります。
letはvarの上位互換のような位置づけのため、letの使用が推奨されています。
letには以下のような特徴があります。
ブロックスコープに対応
ブロックスコープとは、変数の有効範囲を{・・}に限定することです。
以下のコードは、エラーが発生します。
1 2 3 4 |
if (true) { let x = 13; } console.log(x); |
letがブロックスコープに対応しているため、エラーとなります。
letの部分をvarに置き換えるとエラーが発生しない、それはvarがブロックスコープに対応していないためです。
そのため、varで宣言された変数は{・・}を外れても存在 してしまいます。
一般的に、変数の有効範囲は狭くあるべきだといわれているので、より限定したスコープをもつ、letが推奨されている。
同名の変数を監視する
1 2 3 |
let x ='A' let x ='B' console.log(x); |
上記コードは、同名の変数宣言チェックにより、エラーとなります。
varに置き換えるとエラーになりません、varの場合は再宣言された変数として認識するためです。
意図しない変数宣言の変更により、バグの原因となることが多いため、
変数の衝突を監視するletが推奨されている。
const
constは定数を宣言するための命令です。
1 2 3 |
const author = 'YAMADA'; author = 'YAMANE'; console.log(author); |
上記コードは、定数に代入できないようなエラーが発生する。
ただし、constは再代入できないではなく、変更できないが正しいです。
例えば、以下のコードはエラーは発生しません。
1 2 |
const list =['A','B','C']; list[0] = 'X'; |
配列そのものは変更せず、中身の要素だけを入れ替えることはconstの規約に反していないので、
使用することが可能です。
letとconstの使い分け
letとconstの説明したところで、letとconstどっち使えばいいのかという疑問があるでしょう。
一般的にはconstを推奨されています。
実際のアプリを記述する際に、元の値を上書きしなければならない状況はさほどありません。
演算を施した結果は元の変数に書き戻すより、新たな変数に代入したほうが可用性が高くなります。
再代入される可能性のない変数にletを宣言することは、どこかで値が変更されるかもしれない可能性を
考慮しなければならない分扱いにくい。
Reactにおいて、扱う対象がほとんどオブジェクト型なので、constであっても中身の変更が可能です。
Reactにおいて、変数宣言する際はconstが最適であるといえます。