変数宣言: letとconst

JavaScriptの変数宣言(variable declaration)には、letとconstがあります。

letの変数宣言

letを用いた変数宣言の書き方は次のようにします。

ts
let x = 1;

ts
let x = 1;

letは再代入が可能です。

ts
let x = 1;
x = 2; // 再代入ができる

ts
let x = 1;
x = 2; // 再代入ができる

letは変数の初期値なしで変数定義できます。初期値なしの変数の値はundefinedになります。

js
let x; // 初期値なし
x = 1; // 後で代入

js
let x; // 初期値なし
x = 1; // 後で代入

constの変数宣言

constを用いた変数宣言の書き方は次のようになります。初期値は必須です。

js
const y = 2;

js
const y = 2;

constは変数への再代入が禁止されています。

js
const y = 1;
y = 1;
TypeError: Assignment to constant variable.

js
const y = 1;
y = 1;
TypeError: Assignment to constant variable.

letとconstの使い分け

初めて JavaScript を書く場合に、letとconstのどちらの変数宣言を使えばよいか悩む場合があるかもしれません。基本はconstで変数宣言をして必要な場合にのみ、letを使うのがオススメです。constで変数宣言することで再代入を禁止して、意図せず変数が書き換えられることを予防できるので、より安全なコードになります。

学びをシェアする

・JavaScriptの変数宣言はletとconstがある
・letは再代入OK、constは再代入NG
・基本的にconstを使うとよい

『サバイバルTypeScript』より

この内容をXにポストする

constは可変オブジェクトを保護しない

constは再代入不可な変数名を宣言するだけです。constには、可変(ミュータブル)なオブジェクトのプロパティを不変にする保護効果はありません。この点は誤解されがちです。

たとえば、constでオブジェクトを宣言した場合、変数自体への再代入はできません。ところが、オブジェクトプロパティは変更できます。

ts
const obj = { a: 1 };
obj = { a: 2 }; // 再代入は不可
Cannot assign to 'obj' because it is a constant.2588Cannot assign to 'obj' because it is a constant.
obj.a = 2; // プロパティの変更はできる

ts
const obj = { a: 1 };
obj = { a: 2 }; // 再代入は不可
Cannot assign to 'obj' because it is a constant.2588Cannot assign to 'obj' because it is a constant.
obj.a = 2; // プロパティの変更はできる

TypeScriptでオブジェクトを不変にするには、プロパティを読み取り専用にする必要があります。

📄️ オブジェクト型のreadonlyプロパティ

TypeScriptでは、オブジェクトのプロパティを読み取り専用にすることができます。読み取り専用にしたいプロパティにはreadonly修飾子をつけます。読み取り専用のプロパティに値を代入しようとすると、TypeScriptコンパイラーが代入不可の旨を警告するようになります。

配列もオブジェクトの一種なので同様です。変数自体の再代入はできません。しかし、配列要素は変更できます。

ts
const arr = [1, 2];
arr = [3, 4]; // 再代入は不可
Cannot assign to 'arr' because it is a constant.2588Cannot assign to 'arr' because it is a constant.
arr.push(3); // 要素の変更はできる

ts
const arr = [1, 2];
arr = [3, 4]; // 再代入は不可
Cannot assign to 'arr' because it is a constant.2588Cannot assign to 'arr' because it is a constant.
arr.push(3); // 要素の変更はできる

TypeScriptで配列を不変にするには読み取り専用配列を使う必要があります。

📄️ 読み取り専用の配列

TypeScriptでは配列を読み取り専用(readonly)として型注釈できます。型注釈の方法は2通りあります。1つ目はreadonlyキーワードを使う方法です。2つ目はReadonlyArrayを使う方法です。

constアサーションを使ってオブジェクトや配列を不変にする方法もあります。

📄️ constアサーション「as const」

オブジェクトリテラルの末尾にas constを記述すればプロパティがreadonlyでリテラルタイプで指定した物と同等の扱いになります。