JavaScriptでオブジェクトの編集を不可能にするObject.freeze()メソッドの使い方

JavaScriptではオブジェクトを定義して、あらゆるデータを一括で管理、まとめておくことが可能です。

JavaScriptで一度定義したオブジェクトがあり、もう変更させたくない場合が多々あります。(予測しないオブジェクトの変更を防ぐため)

そんな時はfreeze()メソッドで、すでに定義済みのオブジェクトの編集を不可能にすることが可能です。

構文

構文意味返り値
Object.freeze()オブジェクトを変更不可能にするオブジェクト
Object.freeze()構文

サンプルコード

Output
デフォルト Hello World
Object.freeze(sampleObjects);を適用する前
Object.freeze(sampleObjects);を適用した後
Pug
.container.my-5
	div
		table.table
			tbody
				tr
						th デフォルト
						td Hello World
				tr
					th Object.freeze(sampleObjects);を適用する前
					td#targetText
				tr
					th Object.freeze(sampleObjects);を適用した後
					td#targetText1
JavaScript
const targetText = document.getElementById( 'targetText' );
const targetText1 = document.getElementById( 'targetText1' );

const sampleObjects = {
  post_id: 1,
  author_id: 10,
  title: 'Hello World',
  published_date: '20191223',
  subObject: { password: 123456, author_name: '佐藤'},
  sampleArray: ['りんご', 'レモン', 'みかん'],
}
sampleObjects.title = '変更可能';
targetText.textContent = sampleObjects.title;

Object.freeze(sampleObjects);

sampleObjects.title = 'Hello Today'; //編集できないので処理が弾かれる
targetText1.textContent = sampleObjects.title;

[補足]類似メソッド

オブジェクトの変更を禁止するメソッド

Object.seal()メソッド

プロパティの追加・削除のみ禁止で、変更は可能

Object.preventExtensions()メソッド

プロパティーの追加のみ禁止で、削除と変更は可能

インストラクター
コメント

コメントを残す