가변 객체와 불변 객체

가변 객체

말 그대로 변할 수 있는 객체입니다.

let obj1 = { c: 10, d: 20 };

let obj2 = obj1;
obj2.c = 5;

console.log(obj1);  // { c: 5, d: 20 };
console.log(obj2);  // { c: 5, d: 20 };

arr1는 값을 가지고 있는게 아니라 값이 담긴 주소값을 가지고 있습니다.

따라서 arr2는 arr1이 가리키는 주소값을 복제한거고 그래서 둘이 같이 변하는 것입니다.

 

하지만 우리는 개발할 때 원본값이 변하면 안되는 경우가 있습니다. 예를 들자면

1. 쇼핑몰 목록에서 필터를 적용한 후 해제 했을 때

등등이 있습니다. 그럼 이제 불변 객체를 만드는 방법에 대해서 알아봅시다.

 

불변 객체

자바스크립트에서 복제된 객체의 값을 변경했을 때 원본의 값도 변경되는 경우는 프로퍼티로 변경했을 때입니다.

프로퍼티로 변경은 위 가변 객체에서 한 방법을 말 합니다.

 

불변 객체로 만드는 방법은 아예 새로운 객체를 생성하는 것입니다.

원본의 객체의 값을 가져와서 새로운 객체를 생성하면 불변 객체를 만들 수 있습니다.

let obj1 = { c: 10, d: 20 };

const copyObject = (target) => {
  let result = {};
  for(let prop in target) {
    result[prop] = target[prop];
    // object도 배열처럼 변수명['프로퍼티명'] 하면 해당 값이 출력된다.
  }
  
  return result;
};

let obj2 = copyObject(obj1);

obj2.c = 40;
console.log(obj1);  //{ c: 10, d: 20 }
console.log(obj2);  //{ c: 40, d: 20 }

 

이렇게 하면 보기엔 같은 값을 가지고 있어서 똑같아 보이지만, 메모리 상에선 obj2는 다른 객체의 주소값을 가지고 있다.

객체를 새로 생성했기 때문이다.

 

---

 

개인적으로 궁금해서 객체 말고도 배열도 불변 배열을 만들 수 있는지 코드를 만들어 보았다.

// 배열의 얕은 복사
let arr1 = [1, 2, 3];
let arr2 = arr1;
arr2[0] = 5;

console.log(arr1);  //[5, 2, 3]
console.log(arr2);  //[5, 2, 3]


// 배열의 깊은 복사
let arr3 = [6, 7, 8];
let arr4 = [...arr3];
arr4[0] = 9;

console.log(arr3);  //[6, 7, 8]
console.log(arr4);  //[9, 7, 8]

... 문법으로 값은 같지만 새로운 배열을 만들어서 원본 배열이 변경되지 않게 만들 수 있다는 걸 알게 되었다.

(... 문법은 배열의 값만 출력할 수 있는 문법이다.)