JavaScript

【JavaScript】オブジェクトや配列でconstを使っても代入できてしまう

本記事では、JavaScriptでオブジェクトや配列でconstを使っても再代入や追加ができてしまう原因と解決方法について解説しています。

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

オブジェクトと配列でconstを使う

変数宣言をする時に使われるconstですが、本来であれば再代入不可のためオブジェクトにプロパティを追加したり配列に新しく値を追加した時にエラーが出力されると思いますが、実はエラーは出力されず追加することが出来てしまいます。

const arr = ["A","B","C"];

arr[0] = "D";
console.log(arr); // -> ["D","B","C"]

arr.push("E");
console.log(arr); // -> ["D","B","C","E"]
const obj = {
  id:1
}

obj.str = "A";
console.log(obj); // -> {id:1, str:"A"}

obj.str = "B";
console.log(obj); // -> {id:1, str:"B"}

追加できる原因については、下記の引用が参考になります。

const 宣言は、値への読み取り専用の参照を作ります。これは、定数に保持されている値は不変ではなく、その変数の識別子が再代入できないということです。たとえば、定数の中身がオブジェクトの場合、オブジェクトの内容(プロパティなど)は変更可能です。

引用元:MDN

オブジェクトや配列で再代入を不可にするには、Object.freeze()を使います。

Object.freeze(再代入不可にするオブジェクトや配列)

Object.freeze()をオブジェクトと配列で使ったサンプルコードは以下のとおりです。

const nameArr = [];

nameArr.push("John");
console.log(nameArr); // -> ["John"]

Object.freeze(nameArr)
nameArr.push("Michael"); // -> Uncaught TypeError: Cannot add property 1, object is not extensible
const person = {
  id:1,
  name:"Alice"
}

person.age = 20;
console.log(person); // -> {id:1, name:"Alice", age:20}

Object.freeze(person);
person.age = 25;
console.log(person.age); // -> 20

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村