[JS] JavaScript 객체와 불변성

기본형 데이터와 참조형 데이터

데이터 타입

데이터 타입의 종류

자바스크립트 데이터 타입은 기본형, 참조형 이렇게 크게 두가지로 볼 수 있습니다.
기본형은 할당이나 연산시 복제되고 참조형은 참조됩니다.
엄밀히 말하면 둘 모두 복제를 하긴 하지만, 다만 기본형은 값이 담긴 주솟값을 바로 복제하는 반면 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한다는 점이 다릅니다.

불변값(Immutable Value)

기본형 데이터들은 모두 불변값(immutability을 띕니다.

기본형이 궁금하시다면,

[JS] 모던자바스크립트 Deep Dive - 데이터 타입

let a = 'abc'; // 변수 a에 문자열 'abc' 할당
a = a + 'def'; // 변수 a에 문자열 'def' 추가 할당
// 기존의 a값이 'abc' 에서 'abcdef'로 변하는 것이 아닌, 문자열 'abcdef' 새로이 메모리에 적재되고 그 주솟값이 a에 할당됩니다.
// 즉 'abc'와 'abcdef'는 전혀 다른 주솟값을 각자 지니고 있습니다.

let b = 5; // 변수 b에 숫자 5 할당. 일단 컴퓨터는 데이터 영역에서 5의 값을 찾고, 없으면 그제서야 새로 공간을 할당해 저장시킵니다.
let c = 5; // 변수 b와 마찬가지로 숫자 5를 할당하려고 하면 컴퓨터는 기존 데이터 영역에서 숫자 값을 먼저 찾기에 그 주솟값을 재활용합니다.
b = 7;

컴퓨터는 변수에 값을 저장할 때 해당 변수에 값을 직접 저장하지 않습니다. 값은 다른 메모리 주소, 일종의 데이터 영역에 저장이 됩니다.
그럼 변수엔 무엇이 저장될까요?
값이 저장된 메모리의 주솟값이 저장됩니다. 즉, 변수엔 실제 데이터의 주솟값이 저장되어있고, 실제 데이터의 값은 메모리의 또 다른 주소에 저장이 되어있습니다. 변수에 직접 값을 입력하면 되지 왜 귀찮게 두 과정으로 나눠서 변수 값을 저장할까요?
데이터 변환과, 메모리의 효율 때문에 그렇습니다.
사용자가 언제든 데이터를 변환할 수 있기에 컴퓨터는 메모리에 값들을 저장해서 쌓아놓다가 변수값이 변환되면 해당 변수의 데이터 주솟값만 바꿔주는 것이죠.
또한 변수에 데이터 값이 '직접' 저장되어 있다면 해당 값을 삭제한 후 다시 새로운 값을 저장하는 일련의 작업들이 필요하기에 컴퓨터에게 더 부담이 갈 것입니다.
그럼 변수에 주솟값이 할당되지 않은, 즉 쓰이지 않는 데이터 값들은 어떻게 될까요? JavaScript는 '가비지 컬렉터(garbage collector)'를 내장하고 있어 더 이상 사용하지 않는 더미 데이터들을 알아서 포집해서 삭제해주어 메모리 용량을 확보합니다.
이처럼 한번 만들어진 값이 변하지도 않고, 가비지 컬렉팅을 당하지 않는 한 삭제되지않는 값이 불변값입니다.

가변값(mutable value)

불변값과 반대로 가변값은 원시 데이터 타입(Primitive Type)이 아닌 참조 테이터 타입(Reference Type)에서 찾아볼 수 있습니다. 참조 타입의 경우 원시타입과 다르게 메모리 상에서는 아래의 코드를 다음과 같은 구조로 저장을 하고 있습니다.

let obj1 = {
  a: 1,
  b: 'bbb'
};

obj1 은 Object 타입으로 참조 타입입니다. 해당 변수는 1002 주소의 변수 영역에 저장되고 데이터 영역에는 원시타입과 다르게 Object가 가지고 있는 객체의 변수(프로퍼티)의 길이만큼 프로퍼티 변수 메모리 할당 영역의 정보가 저장되어 있습니다. 이 프로퍼티는 다시 각 값을 데이터 영역에서 값을 할당하고 주소 값을 저장하는데 여기서 프로퍼티의 값을 변경하고자 했을 때 obj1 의 데이터 참조 5001 번지의 주소값은 불변하지만 객체 변수의 a 프로퍼티의 값이나 b 의 값은 변경시 데이터 주소가 변경이 되기 때문에 가변하다해서 가변값이라 불립니다.

불변 객체를 만드는 방법

참조형 데이터는 기본형 데이터와 마찬가지로 데이터 자체를 변경하려고 한다면 데이터는 변하지 않습니다.
하지만 참조형 데이터가 가변적이다라고 말하는 것은, 내부 프로퍼티(객체의 변수)를 변경할 때를 말합니다.

만약 객체를 복사해서, 내부 프로퍼티를 변경하고 싶을 때, 복사한 객체를 변경하더라도, 원본 객체가 변하지 않아야 하는 경우가 생길 것입니다.
복사 값만 변경하면되지 원본 값을 건드린다면, 데이터의 무결성도 어긋나기 때문입니다. 이런 때 '불변 객체'가 필요합니다.
불변 객체를 만들기 위해서는 다양한 방법을 활용할 수 있습니다.

내부 프로퍼티를 변경할 필요가 있을 때마다 매번 새로운 객체를 만들어 재할당하기로 규칙을 정하거나 자동으로 새로운 객체를 만드는 도구를 활용한다면 불변성을 확보할 수 있습니다. 혹은 불변성을 확보할 필요가 있을 경우에는 불변 객체로 취급하고, 그렇지 않은 경우에는 기존 방식대로 사용하는 식으로 상황에 따라 대처해도 됩니다. 그렇다면 불변 객체를 어떻게 만들 수 있는지 살펴보겠습니다.

let user = {
  name: "Eun",
  gender: "male"
};

function changeName(user, newName) {
  let newUser = user;
  newUser.name = newName;
  return newUser;
}

let user2 = changeName(user, "Namgung");

if (user !== user2) {
  console.log("유저 정보가 변경되었습니다.");
}

console.log(user.name, user2.name); // Numgung, Namgung
console.log(user === user2); // true

불변 객체를 만들기 전, 객체의 가변성으로 인해 어떤 문제가 나타날 수 있을지 알아보겠습니다.
첫 번째 줄에서 user 객체를 생성하고 user 객체의 name 프로퍼티를 'Namgung'으로 바꿔주는 함수를 호출해서, 그 결과를 user2 변수에 할당했습니다.

이때 user, user2 변수 모두 name 프로퍼티가 'Namgung'으로 출력되는 것을 볼 수 있습니다. 마지막 줄에서는 user와 user2가 서로 동일하다고 나옵니다. 만약 user2와 user가 프로퍼티가 바뀌더라도, 다른 객체가 되려면 어떻게 해야 할까요?

let user = {
  name: "Eun",
  gender: "male"
};

function changeName(user, newName) {
  return {
    name: newName,
    gender: user.gender
  };
}

let user2 = changeName(user, "Namgung");

if (user !== user2) {
  console.log("유저 정보가 변경되었습니다.");
}

console.log(user.name, user2.name); // Eun Namgung
console.log(user === user2); // false

첫 번째는 changeName 함수가 정말 새로운 객체를 반환하도록 수정했습니다. 이렇게 된다면, user와 user2는 서로 다른 객체이므로 안전하게 변경 전과 후를 비교할 수 있습니다. 하지만 문제점이 있습니다. changeName 함수는 새로운 객체를 만들면서 변경할 필요가 없는 기존 객체의 프로퍼티(gender)를 하드코딩으로 입력했습니다. 지금은 gender 프로퍼티가 하나 있어서 쉬웠을 수 있지만, 만약 프로퍼티가 많은 객체였다면, 하드코딩의 양이 더욱 많아질 것입니다. 이런 방식보다는 대상 객체의 프로퍼티 개수와 상관없이 모든 프로퍼티를 복사하는 함수를 만드는 편이 더 좋을 것입니다.

let user = {
  name: "Eun",
  gender: "male"
};

function copyObject(target) {
  let result = {};
  for(let prop in target) {
    result[prop] = target[prop];
  }
  return result;
}

let user2 = copyObject(user);
user2.name = 'Namgung';

if (user !== user2) {
  console.log("유저 정보가 변경되었습니다.");
}

console.log(user.name, user2.name); // Eun Namgung
console.log(user === user2); // false

위에서 copyObject 함수를 만들었습니다. copyObject 함수는 for in 문법을 이용해 result 객체에 target 객체의 프로퍼티들을 복사하는 함수입니다. copyObject 함수를 활용해서 간단하게 객체를 복사하고 내용을 수정하는 데 성공했습니다.
copyObject 함수는 프로토타입 체이닝 상의 모든 프로퍼티를 복사하는 점, getter/setter는 복사하지 않는 점, 얕은 복사만을 수행한다는 점에서 아쉽지만, 문제를 모두 보완하려면 함수가 무거워질 수밖에 없습니다. user 객체에 대해서는 문제가 되지 않으므로 일단 진행해보겠습니다.
copyObject 함수를 활용해서 객체를 만들었을 때, 가장 아쉬운 점은 이 함수는 '얕은 복사만을 수행한다'는 점입니다.

얕은 복사와 깊은 복사

얕은 복사

얕은 복사는 참조형 데이터가 저장된 프로퍼티를 복사할 때 그 주솟값만 복사하는 방법입니다. 위에서 copyObject 함수는 얕은 복사만 수행했습니다. copyObject는 해당 프로퍼티에 대해 원본과 사본이 모두 동일한 참조형 데이터의 주소를 가리키게 됩니다.

얕은 복사에 대해 예를 들어 살펴보겠습니다.

const obj = { vaule: 1 }
const newObj = obj;

newObj.vaule = 2;

console.log(obj.vaule); // 2
console.log(obj === newObj); // true

obj 변수에 object를 할당하고, newObj 변수에 obj 변수의 값을 할당했습니다. 그리고 newObj 프로퍼티인 value 값을 2로 설정하고, obj.value를 콘솔에 출력하면, 2로 변경된 것을 볼 수 있습니다. 왜냐면, 얕은 복사 때문에, 사본의 데이터를 변경하더라도, 동일한 참조형 데이터 주소를 가리키고 있기에, 원본의 데이터도 변경되는 것입니다. 그렇다면, 깊은 복사를 사용하려면 어떻게 해야 할까요? 이에 대해 알아보겠습니다.

깊은 복사

깊은 복사는 내부의 모든 값들을 하나하나 찾아서 전부 복사하는 방법입니다. 깊은 복사에 대해 예를 들어 살펴보겠습니다.

let a = 1;
let b = a;

b = 2;

console.log(a); // 1
console.log(b); // 2
console.log(a === b); // false

만약 변수 a의 값으로 1을 할당하고, 변수 b에 a를 할당했습니다. 그리고 변수 b에 2를 재할당하고, a와 b를 출력해보면, a는 1, b는 2가 출력됩니다. 자바스크립트에서 원시 타입은 깊은 복사가 진행됩니다. 그렇다면, 원시 타입이 아닌, 객체에서 깊은 복사는 어떻게 이뤄지는지 알아보겠습니다. 객체의 깊은 복사에는 다양한 방법이 있습니다.

Reference

좋은 책 써주신 정재남 개발자님께 항상 감사드리며..