5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Object.freezeの使い方

Last updated at Posted at 2021-12-30

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

こちらの記事↓を見たら分かりやすいのですが、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なし

.js
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あり

.js
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

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?