変数

値の記憶。変数にはlet、var、constの3種類がある。
※変数名は予約語以外の英数字（数字は先頭文字に付けることができない。数字のみの変数名も使用不可）、アンダースコア、$マークを付けることができる。大文字と小文字は区別される。

let、var、constの違い

再宣言、再代入

再宣言は一度宣言した変数名で再度宣言すること。再代入は値が入っている変数に上書きで代入すること。varは再宣言と再代入のどちらも可能で、constはどちらも不可能。letは再代入できるものの、再宣言できないという違いがある。

スコープ

スコープとは、宣言した変数を利用できる範囲のこと。letとconstはブロックスコープという、ブロックごとに作られるスコープ内で利用できる。

var hoge = 1

if (hoge === 1) {
  var num1 = 'varの値は1です';
  let num2 = 'letの値は2です';
  console.log(num1);
  console.log(num2);
}
console.log(num1);
console.log(num2); // ここでエラーが発生

letに代入した値をif関数のブロック内で出力した内容は反映されるが、ブロックで出力した内容はエラーになる。varはブロックスコープではないので、if文の外で出力しても反映される。
varは関数のブロック内でのみ利用できる関数スコープや、全てのスコープからアクセスできるグローバルスコープに該当する。

繰り返し処理

繰り返し処理は宣言した変数に数字の再代入を繰り返すことで反復処理するため、letとvarでは利用できる。反対に、再代入できないconstは利用できない。

for (let i = 0; i < 5; i++) {
  console.log(i);
}
console.log("--end--");

for (const j = 0; j < 5; j++) { // ここでエラーが発生
  console.log(j);
}

letを指定したfor文は正常に動作するが、constでは変数への代入に関するエラー文が表示される。constは再代入できないため、最初に代入した0のみ正常に表示される。
例外として、for…inやfor…ofのように配列の内容をループするたびにブロックスコープが作られる場合、constを利用することができる。

/* for...in構文 */
const color = {red: "赤", blue: "青", yellow: "黄"};
for (const key in color) {
  console.log(color[key]);
}
// 以下の内容が出力される
// 赤
// 青
// 黄

/* for...of構文 */
const array = ['赤', '青', '黄'];
for (const value of array) {
  console.log(value);
}
// 以下の内容が出力される
// 赤
// 青
// 黄

while文に関しては、ブロック内でwhileブロック内で再代入するような使い方ができないのが特徴である。

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

console.log("--end--");

const j = 0;
while (j < 5) {
  console.log(j);
  j++; // ここでエラーが発生
}

let、var、constの使い分け方法

基本はconstで定義する

JavaScriptの変数宣言は、letやvarに比べてconstがおすすめ。constは再宣言と再代入ができないため、意図せず値を書き換えることによるエラーを未然に防ぐことができる。

繰り返し構文のみletを定義する

繰り返し構文では、ブロックスコープなので管理がしやすいletの利用が適している。letは再代入ができて再宣言できないため、varに比べて変数宣言でエラーする可能性を減らせるのが特徴。
varも繰り返し構文で指定できるが、意図せず変数名が被るとエラーにつながる可能性がある。constは代入した値をブロック別に出力して利用できるが、頻繁に利用するfor文やwhile文の繰り返し条件として利用できないところが欠点である。

varは使わない方がよい

varはJavaScriptで使える変数の中で最も影響範囲が広いのが特徴である。さまざまな場面で利用できる反面、意図しない再宣言や再代入によってエラーにつながる可能性がある。
また、varを使うと変数名や再代入をチェックする範囲が広くなる。ブロックスコープであるletやconstであれば、ブロック内のみチェックすれば良いので見る範囲を短縮できる。
上記の理由からJavaScriptで変数を定義するときは、値の再代入が不要な場合はconst、そうではない場合はletの利用が適している。