上級

constへの再代入エラーの原因と直し方

constで宣言した変数に再代入しようとしたときに出るエラーです。letやvarと違い、constは一度代入した値を別の値に差し替えることを許しません。

エラーメッセージの読み方

main.js:2

main.js

ファイル名

2

行番号 — 実際にクラッシュした行

TypeError

例外クラス — 何が起きたか。ここを検索するのが最短です

Assignment to constant variable.

内容 — 期待していたもの、または受け付けられなかったもの

このエラーが出る典型パターン

 1  const total = 10;
      ^
 2  total = 20;
 3  console.log(total);

 1  const MAX_RETRIES = 3;
      ^
 2  MAX_RETRIES = 5;
 3  console.log(MAX_RETRIES);

 1  function createCounter() {
 2    const count = 0;
        ^
 3    count = count + 1;
 4    return count;
 5  }
 6  console.log(createCounter());

 1  const price = 50;
      ^
 2  price = 75;
 3  console.log(price);

 1  function accumulate() {
 2    const sum = 0;
        ^
 3    sum = sum + 10;
 4    return sum;
 5  }
 6  console.log(accumulate());

よくある誤解

constは「値そのものを不変にする」という意味だと誤解されがちですが、正しくは「変数への再代入を禁止する」という意味です。オブジェクトや配列の中身を変えることとは別の話です。

実務での勘所

for (const item of items)のように、ループの中でconstを使っても問題なく動くのは、再代入しているわけではなく、繰り返しのたびに新しいitemという束縛がゼロから作られているためです。同じ変数に代入し直しているのではなく、周回ごとに使い捨ての新しいconstを作っていると考えると、なぜエラーにならないかが腑に落ちます。一方、ループの外で宣言したconst変数の中身をループの中で書き換えようとすると、これは正真正銘の再代入なのでエラーになります。

演習をはじめる

関連するエラー

• sort()やreverse()は新しい配列を返さず元の配列を書き換えるArray.prototype.sortやreverseは呼び出した配列自体を並べ替える破壊的（ミューテーティング）メソッドです。
• Object.freeze()は1階層しか凍結しない（浅い凍結）Object.freeze()はオブジェクト自身の直下のプロパティの再代入・追加・削除だけを禁止します。