[Javascript]자바스크립트 Immutable Object 완벽 가이드: 성능 향상과 불변성 유지 비법

자바스크립트에서 Immutable Object(불변 객체)는 성능 향상과 예측 가능한 코드 작성을 위해 중요한 개념입니다. 이 글에서는 불변 객체의 정의와 필요성, 생성 방법 등을 상세히 다룹니다.
Object.freeze(), Object.seal(), Object.preventExtensions() 등의 방법을 사용하여 불변 객체를 만드는 방법을 실제 예제와 함께 알아보세요. 이 글을 통해 불변 객체의 장점을 이해하고, 코드의 안정성과 유지보수성을 높이는 데 도움이 되길 바랍니다.

≣ 목차

• Immutable Object란 무엇인가?🤔
• 왜 Immutable Object를 사용해야 하는가?💡
• Immutable Object 만드는 방법🚀
• 불변 객체와 가변 객체의 차이점🔄
• 실제 예제 코드로 배우는 Immutable Object💻
• 성능 테스트: 불변 객체 vs 가변 객체⚖️
  

자바스크립트 객체에 관한 내용은 아래 포스팅을 참고해 주세요😁

[Javascript]자바스크립트 객체 완벽 가이드: 선언, 사용법, 복사

---

01. Immutable Object란 무엇인가?🤔

Immutable Object(불변 객체)는 생성 후에 그 상태를 변경할 수 없는 객체를 의미합니다. 이러한 객체는 데이터가 변경되지 않으므로, 복잡한 상태 관리가 필요한 애플리케이션에서 매우 유용합니다. 변하지 않는 객체를 사용하면 코드의 예측 가능성이 높아지고, 여러 가지 부작용(side effects)을 방지할 수 있습니다.

---

02. 왜 Immutable Object를 사용해야 하는가?💡

성능 향상: 불변 객체는 복사본을 생성하는 방식으로 변경을 처리하기 때문에, 데이터 변경 시에 성능 문제가 발생할 가능성이 적습니다.

예측 가능성: 불변 객체는 그 상태가 변경되지 않으므로, 상태 변화를 추적하기가 쉽습니다. 이는 디버깅과 유지 보수를 더 쉽게 만듭니다.

디버깅 용이성: 불변 객체를 사용하면 데이터 변경이 발생하지 않기 때문에, 상태 변화로 인한 버그를 줄일 수 있습니다.

---

03. Immutable Object 만드는 방법🚀

Object.freeze() 사용하기

자바스크립트 내장 함수인 Object.freeze()를 사용하면 객체를 동결(freeze)시킬 수 있습니다. 이렇게 동결된 객체는 변경이 불가능합니다.

const student = {
  name: "Alice",
  year: 2002,

  get age() {
    return new Date().getFullYear() - this.year;
  },

  set age(age) {
    this.year = new Date().getFullYear() - age;
  },
};

Object.freeze(student);

student.name = "Bob"; // 변경되지 않음
console.log(student.name); // "Alice"

---

Immutable.js 라이브러리 활용

Facebook에서 개발한 Immutable.js 라이브러리는 자바스크립트에서 불변 데이터를 쉽게 다룰 수 있도록 도와줍니다. Immutable.js를 사용하면 더욱 강력한 불변성 기능을 활용할 수 있습니다.

const { Map } = require('immutable');

let map1 = Map({ name: "John" });
let map2 = map1.set("name", "Doe");

console.log(map1.get("name")); // "John"
console.log(map2.get("name")); // "Doe"

---

04. 불변 객체와 가변 객체의 차이점🔄

불변 객체의 특징

• 생성 이후 상태 변경 불가
• 데이터를 변경할 때는 항상 새로운 객체 생성

가변 객체의 문제점

• 상태 변화 추적 어려움
• 디버깅 시 혼란 발생 가능
• 여러 곳에서 동일한 객체를 참조하면 의도치 않은 부작용 발생 가능

---

05. 실제 예제 코드로 배우는 Immutable Object💻

JavaScript의 객체 속성 설정에서 Extensible, Seal, Freeze는 객체의 변경 가능성을 제어하는 데 사용됩니다. 이들은 각각 다른 수준의 제한을 제공합니다.

Extensible 속성

 

객체의 확장 가능 여부를 결정합니다. 기본적으로 모든 객체는 확장 가능합니다. 확장 가능한 객체는 새로운 속성을 추가할 수 있습니다.

• Object.isExtensible(obj): 객체가 확장 가능한지 여부를 반환합니다.
• Object.preventExtensions(obj): 객체를 확장 불가능하게 만듭니다. 새로운 속성을 추가할 수 없지만 기존 속성은 변경할 수 있습니다.

let obj = { a: 1 };
console.log(Object.isExtensible(obj)); // true

Object.preventExtensions(obj);
console.log(Object.isExtensible(obj)); // false

obj.b = 2; // 추가 불가능
console.log(obj.b); // undefined

---

Seal 속성

객체를 밀봉하면 새로운 속성을 추가하거나 기존 속성을 삭제할 수 없습니다. 그러나 기존 속성의 값은 변경할 수 있습니다.

• Object.isSealed(obj): 객체가 밀봉되었는지 여부를 반환합니다.
• Object.seal(obj): 객체를 밀봉합니다. 객체의 속성을 추가하거나 삭제할 수 없게 되며, 객체는 자동으로 확장 불가능 상태가 됩니다.

let obj = { a: 1 };
console.log(Object.isSealed(obj)); // false

Object.seal(obj);
console.log(Object.isSealed(obj)); // true

obj.b = 2; // 추가 불가능
delete obj.a; // 삭제 불가능
console.log(obj); // { a: 1 }

obj.a = 3; // 변경 가능
console.log(obj); // { a: 3 }

---

Freeze 속성

객체를 동결하면 새로운 속성을 추가하거나 기존 속성을 삭제할 수 없고, 속성의 값도 변경할 수 없습니다.

• Object.isFrozen(obj): 객체가 동결되었는지 여부를 반환합니다.
• Object.freeze(obj): 객체를 동결합니다. 객체는 자동으로 밀봉 상태가 되며, 속성 값도 변경할 수 없습니다.

let obj = { a: 1 };
console.log(Object.isFrozen(obj)); // false

Object.freeze(obj);
console.log(Object.isFrozen(obj)); // true

obj.b = 2; // 추가 불가능
delete obj.a; // 삭제 불가능
obj.a = 3; // 변경 불가능
console.log(obj); // { a: 1 }

---

하위 객체 처리

객체의 하위 객체에 대해서는 seal이나 freeze 메서드를 호출해도 자동으로 영향을 받지 않습니다. 하위 객체에 대해서도 동일한 메서드를 호출해야 합니다.

let obj = {
  a: 1,
  b: {
    c: 2
  }
};

Object.freeze(obj);
console.log(Object.isFrozen(obj)); // true
console.log(Object.isFrozen(obj.b)); // false

Object.freeze(obj.b);
console.log(Object.isFrozen(obj.b)); // true

이와 같이, 객체의 확장 가능성, 밀봉 및 동결 상태는 해당 객체의 직접적인 속성에만 영향을 미치며, 하위 객체에 대해서는 별도로 처리해야 합니다.

---

06. 성능 테스트: 불변 객체 vs 가변 객체⚖️

성능 비교

불변 객체는 상태를 복사하여 새로운 객체를 생성하므로, 대용량 데이터에서는 성능 저하가 발생할 수 있습니다. 하지만, 이러한 성능 저하는 데이터 변경 빈도가 낮은 경우에는 무시할 수 있는 수준입니다.

메모리 사용량 비교

 가변 객체는 참조를 공유하므로 메모리 사용량이 적습니다. 반면, 불변 객체는 변경 시마다 새로운 객체를 생성하므로 메모리 사용량이 증가할 수 있습니다. 그러나 최신 자바스크립트 엔진은 이를 효율적으로 처리하는 다양한 최적화 기법을 사용합니다.