Javascript의 Object.freeze 대 Object.seal

Object.freeze

Object.freeze를 사용하는 방법은 다음과 같습니다.

let objectToFreeze = {
  age: 28,
  name: "Damien",
  pets: ["Symba", "Hades", "Kiwi"],
  sibling: {
    age: 25,
    name: "Corentin",
  },
};

Object.freeze(objectToFreeze);

Object.freeze는 객체를 인수로 사용합니다. 인수로 전달하는 개체를 수정합니다. 개체를 복사하지 않고 새 개체를 만듭니다.

그렇다면 개체의 의미는 무엇입니까?

객체에 새 속성을 추가할 수 없습니다

.

속성이 개체 또는 배열 자체가 아닌 경우 속성을 수정할 수 없습니다. (나중에 자세히 설명)

개체에서 속성을 삭제할 수 없습니다.

let objectToFreeze = {
  age: 28,
  name: "Damien",
  pets: ["Symba", "Hades", "Kiwi"],
  sibling: {
    age: 25,
    name: "Corentin",
  },
};

Object.freeze(objectToFreeze);

delete objectToFreeze.age;
objectToFreeze.name = "Ben";
objectToFreeze.pets.push("Grenade");
objectToFreeze.sibling.age = 26;
objectToFreeze.lastName = "Cosset";

방금 제공한 설명으로 개체가 이제 어떻게 생겼는지 추측해야 합니다.

console.log(objectToFreeze)

// objectToFreeze :
{ age: 28,
  name: 'Damien',
  pets: [ 'Symba', 'Hades', 'Kiwi', 'Grenade' ],
  sibling: {
    age: 26,
    name: 'Corentin'
  }
}

삭제 실패, 이름 속성 수정 실패, lastName 속성 추가 실패. 그러나 배열과 중첩된 형제 개체를 수정하면 작동했습니다.

참고: 엄격 모드가 아니면 자동으로 실패합니다. 엄격 모드에서는 TypeErrors가 발생합니다.

"use strict";

let objectToFreeze = {
  age: 28,
  name: "Damien",
  pets: ["Symba", "Hades", "Kiwi"],
  sibling: {
    age: 25,
    name: "Corentin",
  },
};

Object.freeze(objectToFreeze);

delete objectToFreeze.age;

다음을 던집니다.

얕은 동결

Object.freeze를 호출할 때 갖게 되는 것은 얕은 동결입니다. 객체에 직접 부착된 것만 동결합니다. 개체 및 배열 내부의 속성은 관련이 없습니다.

전체 객체와 내부의 모든 것을 불변으로 만들려면 모든 요소에서 Object.freeze()를 호출해야 합니다. 다음은 이를 수행할 수 있는 한 가지 방법입니다.

let allYouCanFreeze = (obj) => {
  // Retrieve the properties names
  let propNames = Object.getOwnPropertyNames(obj);

  // Loop through the properties
  // If typeof is "object", meaning an array or object, use recursion to freeze its contents.
  for (let name of propNames) {
    let value = obj[name];
    obj[name] =
      value && typeof value === "object" ? allYouCanFreeze(value) : value;
  }

  // Finally, freeze the main object
  return Object.freeze(obj);
};

첫 번째 개체에 사용하겠습니다.

let objectToFreeze = {
  age: 28,
  name: "Damien",
  pets: ["Symba", "Hades", "Kiwi"],
  sibling: {
    age: 25,
    name: "Corentin",
  },
};

allYouCanFreeze(objectToFreeze);

// Now we can't touch the pets array and the sibling object

objectToFreeze.age = 26; // Now, fails.
objectToFreeze.pets.push("Grenade"); // Now, fails

엄청난! 이제 형제 개체와 애완 동물 배열을 수정할 수 없습니다.

Object.isFrozen

객체가 고정되었는지 확인하려면 Object.isFrozen()을 사용할 수 있습니다.

Object.isFrozen(objectToFreeze); // === true

let unfrozenObj = { a: 42 };
Object.isFrozen(unfrozenObj); // === false

개체.봉인

Object.seal()은 frozen 메서드와 마찬가지로 객체를 인수로 사용합니다. Object.seal은 Object.freeze의 소프트 버전입니다.

개체에서 요소를 제거하거나 추가할 수 없습니다.

기존 속성을 수정할 수 있습니다.

let objectToSeal = {
  name: "Damien",
  age: 28,
  pets: ["Symba", "Hades", "Kiwi"],
  sibling: {
    age: 25,
    name: "Corentin",
  },
};

Object.seal(objectToSeal);

꽤 간단하죠? 이제 이 개체를 수정해 보겠습니다.

delete objectToSeal.name;
objectToSeal.age = 56;
objectToSeal.lastName = "Cosset";
objectToSeal.sibling.age = 45;
objectToSeal.pets.push("Grenade");

아마도 당신은 이미 무슨 일이 일어날지 짐작했을 것입니다 😉

//objectToSeal new contents

{
  name: 'Damien',
  age: 56, //modifying worked
  pets: ['Symba', 'Hades', 'Kiwi', 'Grenade'], // push worked
  sibling: {
    age: 45, // Modifying worked
    name: 'Corentin'
  }
}

// adding and deleting failed!

Object.freeze와 마찬가지로 Object.seal은 엄격하지 않은 모드에서 자동으로 실패하고 엄격 모드에서 TypeError를 발생시킵니다.

Object.isSealed

객체가 봉인되었는지 알 수 있는 방법도 있습니다. 매우 명시적으로 Object.isSealed를 호출하여 다음을 알 수 있습니다.

Object.isSealed(objectToSeal); // === true

let notSealedObj = { a: 54 };
Object.isSealed(notSealedObj); // === false

const는 어떻습니까?

Object.seal과 Object.freeze를 보고 const와 비교하고 싶을 수도 있습니다. 서로 다른 개념임을 기억하세요. Object.freeze 및 Object.seal은 객체의 값에 적용되고 const는 바인딩에 적용됩니다. Object.freeze는 객체를 불변으로 만듭니다. const는 변경할 수 없는 바인딩을 만듭니다. 변수에 값을 할당하면 해당 바인딩에 새 값을 할당할 수 없습니다.

프로토타입은 어떻습니까?

마지막으로 언급해야 할 것은 프로토타입입니다. 익숙하지 않은 경우 Javascript 프로토타입에 대한 기사를 작성했습니다. Object.freeze 및 Object.seal의 경우 프로토타입이 동결되거나 봉인되면 변경할 수 없습니다.

let freezeThat = {
  name: 'Damien'
}

let sealThis = {
  age 28
}

Object.freeze(freezeThat)
Object.seal(sealThis)


// These two lines will fail!
Object.setPrototypeOf(freezeThat, {x: 26})
Object.setPrototypeOf(sealThis, {alive: true})

setPrototypeOf는 객체의 프로토타입을 변경하는 데 사용됩니다. 개체가 봉인되거나 동결되면 그렇게 할 수 없습니다. 항상 그렇듯이 엄격하지 않은 모드에서는 자동으로 실패합니다. 엄격 모드에서는 TypeError: Object is not extensible.가 표시됩니다.

결론

Object.freeze와 Object.seal의 차이점을 아는 것이 중요합니다. 이러한 차이점을 알고 있으면 코드에서 사용할 때 문제가 발생하지 않습니다.

요약하자면: