JavaScript const: ES6での定数の宣言

概要：このチュートリアルでは、JavaScriptのconstキーワードを使って定数を定義する方法を学びます。

JavaScript const キーワード入門

ES6では、constキーワードを使って定数を宣言する新しい方法が提供されています。constキーワードは、値への読み取り専用の参照を作成します。

const CONSTANT_NAME = value;Code language: JavaScript (javascript)

慣例として、定数識別子はすべて大文字で記述します。

letキーワードと同様に、constキーワードはブロックスコープの変数を宣言します。ただし、constキーワードで宣言されたブロックスコープの変数は、再代入できません。

letキーワードで宣言された変数は可変です。つまり、次の例に示すように、いつでも値を変更できます。

let a = 10;
a = 20;
a = a + 5;
console.log(a); // 25Code language: JavaScript (javascript)

しかし、constキーワードで作成された変数は「不変」です。言い換えれば、異なる値を再代入することはできません。

constキーワードで宣言された変数に再代入しようとすると、次のようなTypeErrorが発生します。

const RATE = 0.1;
RATE = 0.2; // TypeErrorCode language: JavaScript (javascript)

letキーワードとは異なり、constキーワードで宣言された変数には値を初期化する必要があります。

次の例では、const変数の宣言で初期化子が欠落しているため、SyntaxErrorが発生します。

const RED; // SyntaxErrorCode language: JavaScript (javascript)

JavaScript const とオブジェクト

constキーワードは、作成する変数が読み取り専用であることを保証します。ただし、const変数が参照する実際の値が不変であることを意味するわけではありません。例えば

const person = { age: 20 };
person.age = 30; // OK
console.log(person.age); // 30Code language: JavaScript (javascript)

person変数が定数であっても、そのプロパティの値を変更できます。

ただし、次のように、person定数に異なる値を再代入することはできません。

person = { age: 40 }; // TypeError
Code language: JavaScript (javascript)

personオブジェクトの値を不変にする場合は、Object.freeze()メソッドを使用して凍結する必要があります。

const person = Object.freeze({age: 20});
person.age = 30; // TypeErrorCode language: JavaScript (javascript)

Object.freeze()は浅い凍結であることに注意してください。つまり、オブジェクトのプロパティを凍結できますが、プロパティが参照するオブジェクトを凍結することはできません。

たとえば、companyオブジェクトは定数であり、凍結されています。

const company = Object.freeze({
    name: 'ABC corp',
    address: {
        street: 'North 1st street',
        city: 'San Jose',
        state: 'CA',
        zipcode: 95134
    }
});Code language: JavaScript (javascript)

ただし、company.addressオブジェクトは不変ではなく、次のようにcompany.addressオブジェクトに新しいプロパティを追加できます。

company.address.country = 'USA'; // OKCode language: JavaScript (javascript)

JavaScript const と配列

次の例を考えてみましょう。

const colors = ['red'];
colors.push('green');
console.log(colors); // ["red", "green"]

colors.pop();
colors.pop();
console.log(colors); // []

colors = []; // TypeErrorCode language: JavaScript (javascript)

この例では、constキーワードを使用して、要素が1つしかない配列colorsを宣言します。次に、green色を追加して、配列の要素を変更できます。ただし、配列colorsを別の配列に再代入することはできません。

forループでのJavaScript const

ES6には、for...ofと呼ばれる新しい構文が用意されており、配列、マップ、セットなどの反復可能なオブジェクトを反復処理するループを作成できます。

let scores = [75, 80, 95];

for (let score of scores) {
	console.log(score);
}Code language: JavaScript (javascript)

ループ内でscore変数を変更する予定がない場合は、代わりにconstキーワードを使用できます。

let scores = [75, 80, 95];
for (const score of scores) {
    console.log(score);
}Code language: JavaScript (javascript)

この例では、for...ofは各ループ反復でconstキーワードの新しいバインディングを作成します。言い換えれば、各反復で新しいscore定数が作成されます。

constは命令型forループでは機能しないことに注意してください。命令型forループで変数を宣言するためにconstキーワードを使用しようとすると、TypeErrorが発生します。

for (const i = 0; i < scores.length; i++) { // TypeError
    console.log(scores[i]);
}Code language: JavaScript (javascript)

その理由は、宣言はループ本体が開始される前に一度だけ評価されるためです。

まとめ

• constキーワードは、値への読み取り専用の参照を作成します。読み取り専用の参照は再代入できませんが、値を変更することはできます。
• constキーワードで宣言された変数はブロックスコープであり、再宣言することはできません。