Object.freezeの使い方

4862 ワード
JavaScript メソッド Object JavaScript テキストリンク

はじめに

先輩から「オブジェクトフリーズしておいて」と言われハテナ過ぎたので調べました。

こちらの記事↓を見たら分かりやすいのですが、constでオブジェクトを定義してもオブジェクトの子要素は追加・削除したりできちゃうのって、罠ですよね。。
それを'Object.freeze'メソッドが解決してくれるようです！

https://qiita.com/hosomichi/items/093aadcd8891c86e9dda#%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E5%A4%89%E6%9B%B4

Object.freezeとは

Object.freeze() メソッドはオブジェクトを凍結します。凍結されたオブジェクトは変更できなくなります。オブジェクトを凍結すると、新しいプロパティを追加したり、既存のプロパティを削除したりすることができなくなり、既存のプロパティに対する列挙可否、構成可否、書き込み可否の変更ができなくなり、既存のプロパティの値が変更できなくなります。

なるほどつまり、定数みたいな以降値を変更したくないものは凍結しておくと良いのかな。
とりあえず、使ってみよう。

◆Object.freezeなし

const FRUITS = {
    FIRST: 'banana',
    SECOND: 'apple',
};
console.log(FRUITS.FIRST); // => banana
// 変更する
FRUITS.FIRST = 'minion';
console.log(FRUITS.FIRST); // => minion
// 追加する
FRUITS.THIRD = 'grape';
console.log(FRUITS.THIRD); // => grape

◆Object.freezeあり

const FRUITS_FREEZE = Object.freeze({
    FIRST: 'banana',
    SECOND: 'apple',
});
// 変更する
FRUITS_FREEZE.FIRST = 'minion';
console.log(FRUITS_FREEZE.FIRST); // => banana
// 追加する
FRUITS_FREEZE.THIRD = 'grape';
console.log(FRUITS_FREEZE.THIRD); // => undefind

おー！Object.freezeメソッドを使うことで
一度constで定義した定数の変更ができなくなりました！

参考: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze