本記事では、JavaScriptでオブジェクトや配列でconstを使っても再代入や追加ができてしまう原因と解決方法について解説しています。
JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
メリット
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 （2023/07/23 02:48時点 | Amazon調べ）
ポチップ
目次
オブジェクトと配列で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 extensibleconst 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
