Object.freeze（）とconstの違いを理解する

ES6がリリースされて以来、ES6はJavaScriptにいくつかの新しい機能とメソッドをもたらしました。JavaScript開発者にとって、これらの機能はワークフローと作業効率を大幅に向上させることができます。その中には、Object.freeze（）メソッドと constがあります。

一部の開発者、特に初心者は、これら2つの機能は同じように機能すると考えていますが、そうではありません。Object.freeze（）がconstとどのように違うのかをお話ししましょう。

概要

constとObject.freeze（）は完全に異なります。

constはletのように動作します。それらの唯一の違いは、constが再割り当てできない変数を定義していることです。constによって宣言された変数にはブロックレベルのスコープがあり、varによって宣言された変数には関数スコープがありません。
Object.freeze（）は、オブジェクトをパラメーターとして受け入れ、同じ不変オブジェクトを返します。これは、オブジェクトのプロパティを追加、削除、または変更できないことを意味します。

可変オブジェクトのプロパティは変更できますが、不変オブジェクトのプロパティは、オブジェクトの作成後に変更することはできません。

例

const

const user = 'Bolaji Ayodeji'
user = 'Joe Nash'

この例では、constキーワードで宣言された変数userを再割り当てしようとしているため、UncaughtTypeErrorがスローされます。これは無効です。

この例では、letまたは var 宣言を使用できますが、constを使用しても機能しません。

const問題

constで宣言されたオブジェクトは、その再割り当てを防ぐことはできますが、宣言されたオブジェクトを不変にすることはできません（プロパティが変更されるのを防ぐことができます）。

次のコードを参照して、constキーワードを使用して変数を宣言し、userという名前のオブジェクトをそれに割り当てます。

const user = {
  first_name: 'bolaji',
  last_name: 'ayodeji',
  email: '[email protected]',
  net_worth: 2000
}
user.last_name = 'Samson';
// this would work, user is still mutable!
user.net_worth = 983265975975950;
// this would work too, user is still mutable and getting rich :)!
console.log(user);  // user is mutated

userという名前のこの変数を再割り当てすることはできませんが、オブジェクト自体を変更することはできます。

const user = {
  user_name: 'bolajiayodeji'
}
// won't work

オブジェクトには、変更または削除できないプロパティが必要です。constはそのような機能を実現できませんが、Object.freezeは実現できます。

Object.freeze（）

オブジェクトへの変更を無効にするには、Object.freeze（）を使用する必要があります。

const user = {
  first_name: 'bolaji',
  last_name: 'ayodeji',
  email: '[email protected]',
  net_worth: 2000
}
Object.freeze(user);
user.last_name = 'Samson';
// this won't work, user is still immutable!
user.net_worth = 983265975975950;
// this won't work too, user is still immutable and still broke :(!
console.log(user);  // user is immutated

ネストされたプロパティを持つオブジェクトは実際にはフリーズされません

Object.freezeは単なる浅いフリーズです。ネストされたプロパティを持つオブジェクトに遭遇した場合、ネストされたプロパティを持つオブジェクトをフリーズするには、Object.freezeを再帰的に実行する必要があります。

const user = {
  first_name: 'bolaji',
  last_name: 'ayodeji',
  contact: {
    email: '[email protected]',
    telephone: 08109445504,
  }
}
 
Object.freeze(user);
user.last_name = 'Samson';
// this won't work, user is still immutable!
user.contact.telephone = 07054394926;
// this will work because the nested object is not frozen
console.log(user);

したがって、オブジェクトにネストされたプロパティがある場合、Object.freeze（）はオブジェクトを完全にフリーズしません。

ネストされたプロパティを持つオブジェクトを完全にフリーズするには、独自のライブラリを作成するか、既存のライブラリを使用してDeepfreezeやimmutable- jsなどのオブジェクトをフリーズします。

結論として

constとObject.freeze（）は同じではなく、constは変数が再割り当てされないようにするためのものであり、Object.freeze（）はオブジェクトを不変にするためのものです。