JavaScript

JavaScriptの【変数の宣言】を解説

JavaScriptの変数の宣言について詳しく解説します。JavaScriptでは、変数の宣言に以下の3つのキーワードを使用します：var、let、const。これらのキーワードにはそれぞれ異なる特徴と用途があります。

1. var

varは、JavaScriptで最も古くからある変数宣言の方法です。varで宣言された変数は、関数スコープまたはグローバルスコープを持ちます。

特徴:

  • 関数スコープ: varで宣言された変数は、関数内でのみ有効です。
  • 再宣言可能: 同じスコープ内で同じ名前の変数を再宣言できます。
  • 巻き上げ（ホイスティング）: 変数宣言がスコープの先頭に巻き上げられますが、初期化はその位置に留まります。

例:

function exampleVar() {
    if (true) {
        var message = "Hello, World!";
    }
    console.log(message);  // "Hello, World!"（関数スコープのためアクセス可能）
}

exampleVar();

var x = 10;
var x = 20;  // 再宣言可能
console.log(x);  // 20

console.log(y);  // undefined（巻き上げのためエラーではないが、初期化はされていない）
var y = 10;

2. let

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

特徴:

  • ブロックスコープ: letで宣言された変数は、そのブロック内でのみ有効です。
  • 再宣言不可: 同じスコープ内で同じ名前の変数を再宣言できません。
  • 巻き上げ（ホイスティング）: 変数宣言が巻き上げられますが、初期化される前にアクセスするとエラーになります。

例:

function exampleLet() {
    if (true) {
        let message = "Hello, Block!";
        console.log(message);  // "Hello, Block!"
    }
    // console.log(message);  // ReferenceError: message is not defined（ブロックスコープのためアクセス不可）
}

exampleLet();

let x = 10;
// let x = 20;  // SyntaxError: Identifier 'x' has already been declared（再宣言不可）

console.log(y);  // ReferenceError: Cannot access 'y' before initialization（巻き上げのためエラー）
let y = 10;

3. const

constもES6（2015年）で導入され、定数を宣言するための方法です。定数は宣言時に初期化する必要があり、その後は値を変更できません。

特徴:

  • ブロックスコープ: constで宣言された定数は、そのブロック内でのみ有効です。
  • 再宣言不可: 同じスコープ内で同じ名前の定数を再宣言できません。
  • 再代入不可: 一度値を設定すると、その値を変更できません。
  • 巻き上げ（ホイスティング）: 変数宣言が巻き上げられますが、初期化される前にアクセスするとエラーになります。

例:

function exampleConst() {
    if (true) {
        const message = "Hello, Constant!";
        console.log(message);  // "Hello, Constant!"
    }
    // console.log(message);  // ReferenceError: message is not defined（ブロックスコープのためアクセス不可）
}

exampleConst();

const x = 10;
// x = 20;  // TypeError: Assignment to constant variable.（再代入不可）

// const y;  // SyntaxError: Missing initializer in const declaration（初期化が必要）

console.log(z);  // ReferenceError: Cannot access 'z' before initialization（巻き上げのためエラー）
const z = 10;

まとめ

  • var: 関数スコープを持ち、再宣言可能で巻き上げが発生します。古いコードやレガシーコードでよく見られます。
  • let: ブロックスコープを持ち、再宣言不可で巻き上げが発生しますが、初期化前にアクセスするとエラーになります。モダンなJavaScript開発で推奨されます。
  • const: ブロックスコープを持ち、再宣言不可で再代入も不可、巻き上げが発生しますが、初期化前にアクセスするとエラーになります。定数の宣言に使用されます。

JavaScriptで変数を宣言する際は、スコープの違いや再代入の必要性を考慮して適切なキーワードを選択することが重要です。

スポンサーリンク

-JavaScript