JavaScriptの「let」と「var」を使いこなして、コードをもっと読みやすく！

2024-04-02

JavaScriptにおける「let」と「var」の違い

スコープ

var: 関数スコープを持ちます。つまり、関数内で宣言された変数は、その関数内でのみアクセス可能です。
let: ブロックスコープを持ちます。つまり、ブロック内（if文やforループなど）で宣言された変数は、そのブロック内でのみアクセス可能です。

例:

// varの場合
function example() {
  var x = 1;
  if (true) {
    var y = 2;
    console.log(x, y); // 1, 2
  }
  console.log(x); // 1
  console.log(y); // エラー: yは参照できません
}

example();

// letの場合
function example() {
  let x = 1;
  if (true) {
    let y = 2;
    console.log(x, y); // 1, 2
  }
  console.log(x); // 1
  console.log(y); // エラー: yは参照できません
}

example();

上記の例では、「var」と「let」を使用してそれぞれ変数を宣言しています。

「var」の場合、「x」と「y」は関数スコープを持つため、関数内のどこからでもアクセスできます。
「let」の場合、「x」は関数スコープを持ちますが、「y」はブロックスコープを持つため、if文内でのみアクセスできます。

再宣言

var: 同じスコープ内で変数を再宣言することができます。

// varの場合
function example() {
  var x = 1;
  console.log(x); // 1
  x = 2;
  console.log(x); // 2
}

example();

// letの場合
function example() {
  let x = 1;
  console.log(x); // 1
  let x = 2; // エラー: xはすでに宣言されています
}

example();

「var」の場合、「x」を再宣言しても問題ありません。
「let」の場合、「x」を再宣言しようとするとエラーが発生します。

「let」と「var」は、スコープと再宣言の挙動において違いがあります。

スコープ:
- var: 関数スコープ
- let: ブロックスコープ
再宣言:
- var: 可能
- let: 不可能

コードの読みやすさや保守性を向上させるために、なるべく「let」を使用することを推奨します。

補足

ECMAScript 6で導入された「let」は、より現代的なJavaScriptの書き方を可能にするキーワードです。
varは古いバージョンのJavaScriptで使用されていたキーワードであり、互換性のために残されています。

サンプルコード1: スコープの違い

// varの場合
function example() {
  var x = 1;
  if (true) {
    console.log(x); // 1
    var y = 2;
    console.log(y); // 2
  }
  console.log(x); // 1
  console.log(y); // 2
}

example();

// letの場合
function example() {
  let x = 1;
  if (true) {
    console.log(x); // 1
    let y = 2;
    console.log(y); // 2
  }
  console.log(x); // 1
  console.log(y); // エラー: yは参照できません
}

example();

// varの場合
function example() {
  var x = 1;
  console.log(x); // 1
  x = 2;
  console.log(x); // 2
}

example();

// letの場合
function example() {
  let x = 1;
  console.log(x); // 1
  let x = 2; // エラー: xはすでに宣言されています
}

example();