JavaScript 速習チュートリアル

JavaScript const

1. JavaScript const の基本

const キーワードは、ES6 (2015) で導入されました。

  • const で定義されたバリアブル（定数）は再宣言できません。
  • const で定義されたバリアブルは**再代入（リアサイン）**できません。
  • const で定義されたバリアブルはブロックスコープを持ちます。

2. 再代入の禁止 (Cannot be Reassigned)

const キーワードで定義されたバリアブルは、後から値を書き換えることができません。

コード例

const PI = 3.141592653589793;
PI = 3.14;      // これはエラーになります
PI = PI + 10;   // これもエラーになります

3. 値の代入が必須 (Must be Assigned)

JavaScriptの const バリアブルは、宣言と同時に値を代入する必要があります。

正しい例

const PI = 3.14159265359;

誤った例

const PI;
PI = 3.14159265359; // 宣言時に値を代入していないためエラーになります

4. JavaScript const をいつ使うべきか？

値が変更されないことが分かっている場合は、常に const で宣言するようにしましょう。

以下を宣言する際は、一般的に const を使用します：

  • 新しい 配列（アレイ）
  • 新しい オブジェクト
  • 新しい 関数（ファンクション）
  • 新しい 正規表現（RegExp）

5. 定数としてのオブジェクトと配列

const というキーワードは、少し誤解を招く可能性があります。
これは「値が一定」であることを定義するのではなく、「値への**リファレンス（参照）**が一定」であることを定義します。

そのため、以下の操作は不可能です：

  • 定数に値を再代入すること
  • 定数にアレイを再代入すること
  • 定数にオブジェクトを再代入すること

しかし、以下の操作は可能です：

  • 定数アレイの要素（エレメント）を変更すること
  • 定数オブジェクトのプロパティを変更すること

5.1 定数配列 (Constant Arrays)

定数として宣言したアレイであっても、その中身を変更することはできます。

コード例

// 定数アレイを作成
const cars = ["Saab", "Volvo", "BMW"];

// 要素を変更
cars[0] = "Toyota";

// 要素を追加
cars.push("Audi");

ただし、アレイそのものを再代入することはできません。

NGなコード例

const cars = ["Saab", "Volvo", "BMW"];

cars = ["Toyota", "Volvo", "Audi"];    // エラー：再代入は不可

5.2 定数オブジェクト (Constant Objects)

定数として宣言したオブジェクトのプロパティも変更可能です。

コード例

// 定数オブジェクトを作成
const car = {type:"Fiat", model:"500", color:"white"};

// プロパティを変更
car.color = "red";

// プロパティを追加
car.owner = "Johnson";

ただし、オブジェクトそのものを再代入することはできません。

NGなコード例

const car = {type:"Fiat", model:"500", color:"white"};

car = {type:"Volvo", model:"EX60", color:"red"};    // エラー：再代入は不可

6. var, let, const の違い

特徴varletconst
スコープ関数スコープブロックスコープブロックスコープ
再宣言可能不可不可
再代入可能可能不可
ホイスティングありあり (未初期化)あり (未初期化)
this へのバインドありなしなし

7. ブロックスコープ (Block Scope)

const による宣言は、ブロックスコープの観点では let と同様の挙動を示します。
ブロック内で宣言された x は、ブロックの外側で宣言された x とは別物として扱われます。

コード例

const x = 10;
// ここで x は 10

{
const x = 2;
// ここで x は 2
}

// ここで x は依然として 10

8. 再宣言のルール (Redeclaring)

同じスコープ内で既存のバリアブルを const として再宣言することは許可されていません。

コード例

var x = 2;     // 許容される
const x = 2;   // 許可されない（同じスコープ内）

{
let x = 2;     // 許容される
const x = 2;   // 許可されない（同じスコープ内）
}

{
const x = 2;   // 許容される
const x = 2;   // 許可されない（二重宣言）
}

同様に、既存の const バリアブルに対する再代入や再宣言も不可能です。

コード例

const x = 2;     // 許容される
x = 2;           // 許可されない
var x = 2;       // 許可されない
let x = 2;       // 許可されない
const x = 2;     // 許可されない

ただし、異なるスコープやブロックであれば、同じ名前のバリアブルを const で宣言することが可能です。

コード例

const x = 2;       // グローバルスコープで許容される

{
  const x = 3;     // 別のブロック内なので許容される
}

{
  const x = 4;     // さらに別のブロック内なので許容される
}

9. ホイスティング (Hoisting)

var で定義されたバリアブルはスコープの先頭にホイスティング（巻き上げ）されるため、宣言前でも使用可能です。

コード例（var の場合）

carName = "Volvo";
var carName; // これは正常に動作します

一方、const で定義されたバリアブルも先頭にホイスティングはされますが、初期化はされません。
そのため、宣言前にアクセスしようとすると ReferenceError が発生します。

NGなコード例

alert(carName);
const carName = "Volvo"; // エラー：宣言前にアクセス不可