JavaScriptのletは、学習を始めたばかりの方が必ず触れる変数です。

JavaScriptで保守性の高いシステムをプログラムするには、同じ変数であるvarや定数のconstと使い分ける必要があります。

今回は、JavaScriptのlet、var、constを場面に合わせて使い分ける方法について解説します。

JavaScriptのletとは

letはJavaScriptで宣言できるローカル変数のことで、2015年6月にES6が標準化されたときにconstと一緒に登場しました。
ローカル変数とは、宣言されたブロック（ { } ）内でのみ利用できる変数のことです。

letはvarやconstと同じく、文字列や値を代入できます。具体的な使い方は下記の通りです。

function test(hoge) {
  let word = "Hello ";
  word = word + hoge;

  return word
}

console.log(test("World"));

let、var、constの違い

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

JavaScriptの変数を使い分けるには、let、var、constの違いを理解する必要があります。それぞれの違いについて3つの役割に分けて解説します。

再宣言、再代入

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

varは再宣言と再代入のどちらも可能で、constはどちらも不可能。letは再代入できるものの、再宣言できないという違いがあります。

// 再宣言
var hoge1 = 1;
var hoge1 = 2;
console.log(hoge1);  // 2
 
let hoge2 = 1;
let hoge2 = 2; // ここでエラーが発生
 
const hoge3 = 1;
const hoge3 = 2; // ここでエラーが発生

// 再代入
var hoge1 = 1;
hoge1 = 2;
console.log(hoge1);  // 2

let hoge2 = 1;
hoge2 = 2;
console.log(hoge2);  // 2
 
const hoge3 = 1;
hoge3 = 2; // ここでエラーが発生

スコープ

スコープとは、宣言した変数を利用できる範囲のことです。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を利用できます。

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ブロック内で再代入するような使い方ができないのが特徴です。

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の使い分け方法

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の利用が適しています。

JavaScriptのletが使えないときにチェックすべきこと

letで変数宣言しても動作しなかったり、エラーが表示されたりするときは、下記項目をチェックしましょう。

• エラー文の内容をチェック
• 誤字脱字がないか
• ブロックの外から再代入していないか

たとえば、変数であるlet、var、constの頭文字を大文字で表記するとエラーになります。

let hoge = 1;
let Fuga = 2;
Let piyo = 3; // ここでエラーになる

上記の例も含めて、まずはエラー文のチェックと誤字脱字を確認します。それでも解決しない場合は、letの利用条件を満たしてコーディングできているか確認しましょう。