JavaScript

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

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

ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】

先輩くん
先輩くん
年収、休日数、労働環境等クラウドリンクが審査し、これらを通過した優良求人情報のみ紹介しているよ!
後輩ちゃん
後輩ちゃん
100%自社内開発の求人だから、SESのように職場環境が変わらないのがいいね!
簡単30秒で無料登録!

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

オブジェクトと配列で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アクセスランキング にほんブログ村