얼어붙어라! - 객체 불변화하기

오늘은 객체에 담긴 값을 불변으로 만드는 방법에 대해 알아보도록 하겠습니다.

const person = {
  name: "chanmin",
  age: 25,
};

먼저 const 키워드로 선언한 변수에 객체 리터럴을 할당한 모습입니다.

이러면 객체가 불변 상태가 된 걸까요?

 

물론 아닙니다. 이렇게 const 변수에 객체를 할당하면 해당 객체의 참조 만이 불변값이 되어 새로운 객체를 할당하는 것이 불가능하고, 내부 프로퍼티를 변경하는 것은 여전히 자유롭게 가능합니다.

const person = {
  name: "chanmin",
  age: 25,
};

person.age = 100;
person.school = "KAU";
console.log(person);

// age 프로퍼티의 값은 변경이 가능합니다.
// school 이라는 프로퍼티를 새로 추가할 수도 있습니다.
// { name: 'chanmin', age: 100, school: "KAU" }

이번 글에서는 Object.preventExtensions(), Object.seal(), Object.freeze() 메서드를 통해 객체의 확장 및 수정을 변경하는 방법을 소개하도록 하겠습니다.

Object.preventExtensions()

Object.preventExtensions() 는 객체에 새로운 프로퍼티를 추가하는 것을 방지하는 메서드입니다.

const person = {
  name: "chanmin",
  age: 25,
};

// 1. 이제 person 객체는 확장 불가능 객체가 됩니다.
Object.preventExtensions(person);

// 2. 확장 가능 객체의 여부는 Object.isExtensible() 메서드로 확인합니다.
Object.isExtensible(person); // false

// 3. 확장 불가능 객체이므로 school 프로퍼티는 추가되지 않습니다.
person.school = "KAU";

console.log(person);
// { name: 'chanmin', age: 25 }

위 코드에서는 person 객체에 school 이라는 프로퍼티를 동적으로 추가하려고 시도했지만, Object.preventExtensions()에 의해 객체를 확장하지 못한 모습입니다.

수행 가능한 동작들

• 객체를 읽고 쓰기
• 객체의 프로퍼티 수정하기
• 객체의 프로퍼티 삭제하기

Object.seal()

Object.seal() 은 객체를 읽고 쓰기(프로퍼티 값 갱신)만 가능하도록 만드는 메서드입니다.

const person = {
  name: "chanmin",
  age: 25,
};

// 1. 이제 person 객체는 프로퍼티를 읽고 쓰거나 삭제만 가능합니다.
Object.seal(person);

// 2. 확장 가능 객체의 여부는 Object.isSealed() 메서드로 확인합니다.
Object.isSealed(person); // true

// 3. 확장 불가능 객체이므로 school 프로퍼티는 추가되지 않습니다.
person.school = "KAU";

// 4. 읽고 쓰기만 가능하므로 프로퍼티의 삭제는 불가합니다.
delete person.name;

console.log(person);
// { name: 'chanmin', age: 25 }

수행 가능한 동작들

• 객체를 읽고 쓰기
• 객체의 프로퍼티 수정하기

Object.freeze()

Object.freeze() 는 객체를 읽기만 가능하도록 하는 메서드입니다.

const person = {
  name: "chanmin",
  age: 25,
};

// 1. 이제 person 객체는 프로퍼티를 읽고 쓰거나 삭제만 가능합니다.
Object.freeze(person);

// 2. 확장 가능 객체의 여부는 Object.isSealed() 메서드로 확인합니다.
Object.isFrozen(person); // true

// 3. 객체를 읽기만 가능하므로 school 프로퍼티는 추가되지 않습니다.
person.school = "KAU";

// 4. 읽기만 가능하므로 프로퍼티의 삭제는 불가합니다.
delete person.name;

// 5. 읽기만 가능하므로 프로퍼티의 추가도 불가능합니다.
person.name = "heejin"

console.log(person);
// { name: 'chanmin', age: 25 }

수행 가능한 동작들

• 객체의 프로퍼티 값 읽기

마치며

지금까지 객체 내부의 값을 불변(상수)화하는 방법을 알아봤습니다.

올해 실시된 자바스크립트 코딩테스트 중에서도 "객체를 읽기만 가능하도록 수정하시오" 라는 조건을 만난 적이 있었는데요, 오늘 다룬 불변화 메서드들에 대해 알아두시면 좋을 것 같습니다!