JavaScriptで変数を定義するには「let」「var」「const」の３種類があります。
特に、letとvarはどちらも値を書き換えることができるなど似たところがあり、どちらを使えばいいのか？と迷う人もいるかと思います。
ここでは、letとvarの違いやどちらを使うべきか？、またconstの違いを解説しています。
JavaScriptで使える３つの変数定義
JavaScriptで使える変数定義は以下の３つです。
- const: 再定義・再代入ができない（ブロックスコープ）
- let: 再定義はできない。再代入はできる（ブロックスコープ）
- var: 再定義・再代入ができる（関数スコープ）
それぞれについて以下で実例を用いて解説します。
letとvarどちらを使うべきか？
最初に結論ですが、letとvarどちらを使うべきかというと、「let」一択です。
varはずっと昔からある定義方法で使い勝手がよくありません。コードのどこでも再定義ができてしまうため、誤ってデータが置き換わってしまうリスクがあります。
特にコード量が多くなってくると、上の方でvarで変数を定義したことを忘れて、また同じ変数名で上書きしてしまうといったことが発生します。エラーが発生したり、デバッグが大変になります。
- letを使う。
- varは古いコードで使うこともあるが、基本的には避ける。
letとvarの違い
letとvarの一番の違いはなんといってもスコープです。
「スコープ」とはプログラム内で変数が有効（アクセス可能）な範囲のことを指します。
関連した用語に「ブロック」があります。ブロックとはif文などの { } で囲まれた範囲のことです。ブロックも限られた空間であり、スコープの１つです。
スコープの違い
varのスコープ（関数スコープ）
varはその関数全体で有効になります（関数スコープといいます）
このため、関数の中でvarで変数を定義した後に、再度同じ変数名でvarを定義することができます。
var x = "aaa";
var x = "bbb";
console.log(x);上記のように同じ変数を定義してもエラーになりません。このため、予期せぬ変数の書き換えなどが発生するリスクが非常に高いです。
また、以下のように、より小さなスコープ（if文など）の中で定義した変数を、スコープ外で呼び出すこともできます。
if( true ){
var y = "ccc";
}
console.log(y);- 関数内のどこでも再定義・再代入が可能。
letのスコープ（ブロックスコープ）
letはブロック（ {} で囲まれた範囲）内でのみ有効な変数定義です。（ブロックスコープといいます）
再定義を防ぐ
letを使うと、同じ変数名を定義したときに上書きを防ぐことができます。（エラーが発生して教えてくれます）
let x = "aaa";
let x = "bbb";SyntaxError: Identifier ‘x’ has already been declared
スコープ外では呼び出せない
letはスコープの外で呼び出すことができません。このため、特定のスコープ（限られた空間）の中でのみ変数を定義することができます。
if( true ){
let y = "ccc";
}
console.log(y);ReferenceError: y is not defined
スコープ内・外で別物になる
let x ="aaa";
if( true ){
let x = "ccc";
console.log(x);
}
console.log(x);この実行結果は、ccc、aaaとなります。（エラーは発生しません）
letはスコープの中でのみ機能するため、スコープ内で定義したものと、スコープ外で定義したものは同じ関数名でも全く別物となります。
- 同じスコープ内で再定義はできない（値の代入は可能）
- 誤って変数を上書きしてしまうことを防げる
letの使い方のポイント
letはスコープの外で呼び出すことができません（ないものとして扱われます）
このため、letで定義した変数を関数内で使いまわしたいときは、if文やforeachなどのブロックの中ではなく、ブロックの外で定義しておきます。
let x ="aaa";
if( true ){
x = "ccc";
}
console.log(x);constとは何か？
再定義・再代入を防ぐ
constは再定義や再代入を防ぐことができる変数の定義です。値が変わることがない（置き換わってはいけない）ときに使用します。
再定義を防ぐ
constで定義した変数はスコープ内で再定義することができなくなります。（再定義するとエラーで教えてくれます。）
const x = "aaa";
const x = "bbb";
const y = ccc";
let y = "ddd";SyntaxError: Identifier ‘x’ has already been declared
再代入を防ぐ
constで定義した変数はスコープ内で再代入する（他の値にする）ことができなくなります。
const x = "aaa";
x = "bbb";TypeError: Assignment to constant variable.
スコープ（ブロックスコープ）
constのスコープは定義されたブロック（例えば {} で囲まれた範囲）内でのみ有効です。（letと同じ）
スコープ内の場合
スコープ内の場合は再定義・再代入ができません。
const x = "aaa"
if( true ){
x = "ccc";
}TypeError: Assignment to constant variable.
スコープ外の場合
スコープ外の場合は全く別物になるため、定義することができます。
if( true ){
const x = "aaa";
}
const x = "ccc";
console.log(x);出力結果： ccc
