Immutability (불변성) 에 대한 정리 - 4

Immutability (불변성) 포스팅 리스트

- Immutability (불변성) 에 대한 정리 - 1

- Immutability (불변성) 에 대한 정리 - 2

- Immutability (불변성) 에 대한 정리 - 3

- Immutability (불변성) 에 대한 정리 - 4

 

서두

지난 포스팅 에서는 객체와 함수가 만났을때 발생하는 문제점에 대해 다뤄보았습니다.

이번 포스팅에선 Object.freeze 에 대해서 알아보겠습니다.

 

Object.freeze

Object.freeze 는 객체를 동결하는 역할을 합니다.

 

Object.freeze 구문

Object.freeze(obj)

const f1 = { name : "Kim" }

Object.freeze(f1)

f2.name = "Poo"

const f1 = { name: "Kim" };
const f2 = f1;

Object.freeze(f1);

f1.name = "Lee";
f1.city = "seoul";
f2.name = "Poo";

console.log(f1); // { name: "Kim" }
console.log(f2); // { name: "Kim" }

f1 객체를 만들어주고 데이터가 변하지 않게 Object.freeze 함수를 사용해서 얼려줍니다.

그럼 f1의 속성을 추가, 삭제 불가하며 데이터의 내용또한 바꾸지 못합니다.

 

그래서 f1의 name에 "Lee" 문자열을 주고 city 속성을 추가 했지만 console.log 를 통하여 출력을 했을때 변한것이 없다는것을 확인할수 있습니다.

 

f2 변수를 만들어주며 f1 객체를 대입해줍니다.

f2 변수가 가리키는 객체에서 name 속성에 "Poo" 문자열을 대입해줬지만 Object.freeze 함수로 객체를 동결했기 때문에 데이터 값을 변화 시킬수 없습니다.

 

객체 자체를 동결 시켰기 때문에 객체를 immutability (불변성) 을 지킬수 있습니다.

const f1 = {  name: "kim",  score: [1, 2]}

Object.freeze(f1)

f1.score.push(3)

const f1 = {
  name: "kim",
  score: [1, 2],
};

Object.freeze(f1);

f1.score.push(3);

console.log(f1); // { name: 'kim', score: [1, 2, 3] }

f1이 가라키는 객체 Object.freeze 함수를 통하여 동결을 시켰지만 f1객체의 score 속성은 다른 주소에 있는 객체를 가리키고 있기 때문에 score 배열에 push를 하게 되어 데이터를 추가를 할수있게 됩니다.

 

이를 해결하기 위해선 f1.score 속성을 Object.freeze 함수로 동결시켜줘야합니다.

Object.freeze(f1.score)

const f1 = {
  name: "kim",
  score: [1, 2],
};

Object.freeze(f1);
Object.freeze(f1.score);

f1.score.push(3);

console.log(f1); // { name: 'kim', score: [1, 2] }

 

f1.score 에도 Object.freeze 를 해줌으로써 데이터가 변하지 않고 유지될수 있었습니다.

 

이번 포스팅에서는 Object.freeze 함수를 사용하여 데이터를 유지하는 방법에 대해 알아보았습니다.

 

4편까지 쓰게 되었는데 긴 글 읽어주셔서 감사합니당