【Prevent Object Mutation】フリーコードキャンプを日本語で解説!

フリーコードキャンプ

おいーす、もりたけです。

フリーコードキャンプを日本語で解説!の第114弾です。

JavaScript Algorithms and Data Structures Certification (300 hours)の中の、

Introduction to the ES6 Challengesの中の、

Prevent Object Mutation

です。

さっそく見ていきましょう。

まずは本文から。

As seen in the previous challenge, const declaration alone doesn’t really protect your data from mutation. To ensure your data doesn’t change, JavaScript provides a function Object.freeze to prevent data mutation.

Once the object is frozen, you can no longer add, update, or delete properties from it. Any attempt at changing the object will be rejected without an error.

let obj = {
  name:”FreeCodeCamp”,
  review:”Awesome”
};
Object.freeze(obj);
obj.review = “bad”; // will be ignored. Mutation not allowed
obj.newProp = “Test”; // will be ignored. Mutation not allowed
console.log(obj);
// { name: “FreeCodeCamp”, review:”Awesome”}

 


In this challenge you are going to use Object.freeze to prevent mathematical constants from changing. You need to freeze the MATH_CONSTANTS object so that no one is able to alter the value of PI, add, or delete properties.


 

 

解説していきます。

今回はオブジェクトの値を変更させなくする方法についてです。

前回constを使ってもデータの変更をする方法がある事を学びました。データの変更を全くさせたくない場合はObject.freezeという関数を使います。

この関数を使うとオブジェクトのデータを追加、更新(上書き)、削除のいずれもできなくなります。オブジェクトを変更しようとしてもエラーなしで拒否されます。

例を見てみましょう。

let obj = {
  name:”FreeCodeCamp”,
  review:”Awesome”
};
Object.freeze(obj);
obj.review = “bad”; // will be ignored. Mutation not allowed
obj.newProp = “Test”; // will be ignored. Mutation not allowed
console.log(obj);
// { name: “FreeCodeCamp”, review:”Awesome”}
上記のようにデータを上書きしようとしたり追加しようとしてもできません。
では課題を見てみましょう。
Object.freezeを使用して、PIの値を変更したりプロパティを追加または削除したりできないように、MATH_CONSTANTSオブジェクトをフリーズしろ。という課題です。
今回学んだ関数使うだけですね。
答えはこうです。
function freezeObj() {
  ‘use strict’;
  const MATH_CONSTANTS = {
    PI: 3.14
  };
  // change code below this line
 Object.freeze(MATH_CONSTANTS);
  // change code above this line
  try {
    MATH_CONSTANTS.PI = 99;
  } catch(ex) {
    console.log(ex);
  }
  return MATH_CONSTANTS.PI;
}
const PI = freezeObj();
これで正解で次に進めるのですが、なぜか下記のエラーもでています。
[TypeError: Cannot assign to read only property ‘PI’ of object ‘#<Object>’]
原因がわかる人がいれば何か教えてくださいー
では次回!
タイトルとURLをコピーしました