【jQuery】const, let, varの違い

constとは

constは定数を宣言するために使用されます。一度値が代入されると、その値は変更できません。また、再代入ができないため、定数としての値が変更されないことを保証します。

letとは

letは変数を宣言するために使用されます。再代入が可能です。変数のスコープが宣言されたブロック内に制限されます。これにより、グローバルスコープでの変数の汚染を防ぎます。

varとは

varは古いバージョンのJavaScriptで変数を宣言するために使用されますが、ES6以降では let と const が推奨されています。ブロックスコープを持たず、関数スコープであるため、ブロック内で宣言されても関数の先頭に巻き上げられます。

それぞれの違い

	const	let	var
再宣言	不可能	不可能	可能
再代入	不可能	可能	可能
スコープ	ブロックスコープ	ブロックスコープ	関数スコープ
繰り返し構文	不可能	可能	可能

再宣言、再代入

再宣言は一度宣言した変数名で再度宣言すること。再代入は値が入っている変数に上書きで代入することです。

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は関数のブロック内でのみ利用できる関数スコープや、全てのスコープからアクセスできるグローバルスコープに該当します。

繰り返し処理

繰り返し処理は指定した条件と回数に該当する間、決められた処理を繰り返すことです。JavaScriptではfor文やwhile文が該当します。

繰り返し処理は宣言した変数に数字の再代入を繰り返すことで反復処理するため、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を利用できます。

使い分け方

基本はconstで定義する

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

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

繰り返し構文では、ブロックスコープなので管理がしやすいletの利用が適しています。letは再代入ができて再宣言できないため、varに比べて変数宣言でエラーする可能性を減らせるのが特徴です。

varは使わない方がよい

varはJavaScriptで使える変数の中で最も影響範囲が広いのが特徴です。さまざまな場面で利用できる反面、意図しない再宣言や再代入によってエラーにつながる可能性があります。

また、varを使うと変数名や再代入をチェックする範囲が広くなります。ブロックスコープであるletやconstであれば、ブロック内のみチェックすれば良いので見る範囲を短縮できます。