JavaScriptの変数宣言var、let、constの違いと使い分け

JavaScriptの変数宣言、`var`、`let`、`const`の違い、もう迷わない！これでスコープと再代入の謎を解き明かそう。

JavaScriptの変数宣言：var、let、constの基本

JavaScriptで変数を宣言する際には、var、let、constという3つのキーワードを使用します。これらの違いを理解することは、より安全で保守性の高いコードを書く上で非常に重要です。この記事では、それぞれの特性と使い分けについて詳しく解説します。

それぞれの宣言方法は、変数のスコープ、再宣言、再代入の可否といった点で異なります。これらの違いを理解することで、エラーを未然に防ぎ、コードの可読性を向上させることができます。

特にletとconstは、ES6（ECMAScript 2015）で導入された比較的新しい構文であり、varに比べてより厳格なルールを持っています。モダンなJavaScript開発では、letとconstの使用が推奨されることが多いです。

var：古き良き時代の変数宣言

varは、JavaScriptが誕生した当初から存在する変数宣言の方法です。関数スコープまたはグローバルスコープを持ちます。

関数スコープとは、varで宣言された変数が、それが宣言された関数内でのみ有効であることを意味します。関数の外からはアクセスできません。グローバルスコープとは、関数外で宣言されたvar変数が、スクリプト全体で有効であることを意味します。


function exampleVar() {
  var x = 10;
  if (true) {
    var x = 20; // 同じ変数xを上書き
    console.log(x); // 20
  }
  console.log(x); // 20
}

重要な点として、varは同じスコープ内で再宣言が可能です。上記の例では、if文の中でxを再宣言することで、外側のxの値も上書きされています。これは、意図しないバグの原因となることがあります。

また、varで宣言された変数は、宣言する前に使用してもエラーにはなりません。これは「巻き上げ（hoisting）」と呼ばれる現象で、JavaScriptエンジンが内部的に変数の宣言をスコープの先頭に移動させるために起こります。ただし、巻き上げられた変数はundefinedとして扱われます。


console.log(y); // undefined
var y = 5;

let：より安全な変数宣言

letは、ES6で導入された新しい変数宣言の方法です。ブロックスコープを持ちます。

ブロックスコープとは、letで宣言された変数が、それが宣言されたブロック（{}で囲まれた範囲）内でのみ有効であることを意味します。関数の内部だけでなく、if文やfor文などのブロック内でも有効範囲が限定されます。


function exampleLet() {
  let z = 10;
  if (true) {
    let z = 20; // 新しい変数zを宣言
    console.log(z); // 20
  }
  console.log(z); // 10
}

letは、同じスコープ内での再宣言を許可しません。これにより、varのように意図せずに変数を上書きしてしまうことを防ぐことができます。


let a = 10;
// let a = 20; // SyntaxError: Identifier 'a' has already been declared

letもvarと同様に巻き上げられますが、varとは異なり、宣言前にアクセスするとReferenceErrorが発生します。これは、let変数が「一時的な死角（Temporal Dead Zone, TDZ）」に入っているためです。TDZにある変数は、宣言されるまでアクセスできません。


console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 5;

const：定数の宣言

constも、ES6で導入された変数宣言の方法です。letと同様にブロックスコープを持ちますが、一度値を代入すると再代入できなくなるという特徴があります。定数（constant）を宣言するために使用されます。


const PI = 3.14159;
// PI = 3.14; // TypeError: Assignment to constant variable.

constで宣言された変数は、宣言時に必ず初期値を設定する必要があります。


// const c; // SyntaxError: Missing initializer in const declaration
const c = 10;

ただし、constで宣言されたオブジェクトや配列の中身は変更可能です。constは、変数自体が指すメモリ上のアドレスを変更できないだけで、そのアドレスにあるデータの内容を変更することを禁止するものではありません。


const myArray = [1, 2, 3];
myArray.push(4); // これは有効
console.log(myArray); // [1, 2, 3, 4]

// myArray = [5, 6, 7]; // TypeError: Assignment to constant variable.

var、let、constの使い分け

モダンなJavaScript開発では、原則としてvarの使用は避け、letとconstを使い分けることが推奨されます。

具体的には、以下のように使い分けるのが一般的です。

– 値を再代入する必要がない場合は、constを使用する。

– 値を再代入する必要がある場合は、letを使用する。

– グローバルスコープで変数を宣言する必要がある場合は、名前空間を意識して、意図しない上書きを防ぐように注意する。可能であれば、モジュールシステムを利用してグローバルスコープを避けることが望ましいです。

これらのルールに従うことで、より安全で可読性の高いコードを書くことができます。

参考リンク

まとめ

var、let、constはそれぞれ異なる特性を持つ変数宣言の方法です。varは関数スコープ、letとconstはブロックスコープを持ちます。constは再代入不可であり、定数を宣言する際に使用します。

モダンなJavaScript開発では、原則としてvarの使用を避け、letとconstを適切に使い分けることが推奨されます。これにより、より安全で保守性の高いコードを書くことができます。

それぞれのスコープ、再宣言、再代入の可否を理解し、適切な変数宣言を選択することで、JavaScriptプログラミングのスキルを向上させることができます。