코어 자바스크립트 책의 1장 데이터 타입 내용을 정리한 글이다.

불변 객체

불변 객체(immutable object)는 최근의 React, Vue, Angular 등의 라이브러리나 프레임워크에서뿐만 아니라 함수형 프로그래밍, 디자인 패턴 등에서도 매우 중요한 기초가 되는 개념이다.
참조형 데이터의 가변은 데이터 자체가 아닌 내부 프로퍼티를 변경할 때만 성립한다. 데이터 자체를 변경하고자 하면(새로운 데이터를 할당하고자 하면) 기본형 데이터와 마찬가지로 기존 데이터는 변하지 않는다.

그럼 어떤 상황에서 불변 객체가 필요할까? 값으로 전달받은 객체에 변경을 가하더라도 원본 객체는 변하지 않아야 하는 경우가 종종 발생한다. 바로 이럴 때 불변 객체가 필요하다.

객체의 가변성에 따른 문제점

var user = {
  name: 'yejin',
  gender: 'female'
};

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

var user2 = changeName(user, 'John');

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

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

위의 예제는 객체의 가변성으로 인한 문제점을 보여주는 예시이다. if문에서 조건이 성립하면 유저 정보가 바꼈다는 내용이 출력되겠지만 실제로는 출력없이 통과한다.

만약 if문에서처럼 정보가 바뀐 시점에 알림을 보내야 한다거나, 바뀌기 전의 정보와 바뀐 후의 정보의 차이를 가시적으로 보여줘야 하는 등의 기능을 구현하려면 객체를 불변하게 만드는 코드를 작성해야 한다.

얕은 복사와 깊은 복사

얕은 복사는 바로 아래 단계의 값만 복사하는 방법이고, 깊은 복사는 내부의 모든 값들을 하나하나 찾아서 전부 복사하는 방법이다. 얕은 복사만 수행하게 되면 중첩된 객체에서 참조형 데이터가 저장된 프로퍼티를 복사할 때 그 주솟값만 복사한다는 의미이다. 그러면 해당 프로퍼티에 대해 원본과 사본이 모두 동일한 참조형 데이터의 주소를 가리키게 된다. 즉, 사본을 바꾸면 원본도 바뀌고, 원본을 바꾸면 사본도 바뀐다.

어떤 객체를 복사할 때 객체 내부의 모든 값을 복사해서 완전히 새로운 데이터를 만들고자 한다면, 객체의 프로퍼티 중에서 그 값이 기본형 데이터일 경우에는 그대로 복사하면 되지만 참조형 데이터는 다시 그 내부의 프로퍼티들을 복사해야 한다. 이 과정을 참조형 데이터가 있을 때마다 재귀적으로 수행해야만 비로소 깊은 복사가 되는 것이다.

깊은 복사를 처리할 수 있는 간단한 방법

객체를 JSON 문법으로 표현된 문자열로 전환했다가 다시 JSON 객체로 바꾸는 것이다. 문제는 메서드나 숨겨진 프로퍼티인 __proto__나 getter/setter 등과 같이 JSON으로 변경할 수 없는 프로퍼티들은 모두 무시한다. httpRequest로 받은 데이터를 저장한 객체를 복사할 때 등 순수한 정보를 다룰 때 활용하기 좋은 방법이다.

var copyObject = (target) => {
  return JSON.parse(JSON.stringify(target));
};

var obj = {
  a: 1,
  b: {
    c: null,
    d: [1,2],
    func1: function () {}
  }
};

var obj2 = copyObject(obj);

obj2.a = 3;
obj2.b.c = 4;
obj.b.d[1] = 3;

console.log(obj);  // { a: 1, b: { c: null, d: [1,3], func1: f() }}
console.log(obj2); // { a: 3, b: { c: 4, d: [1,2] }}

이번 편에서는 불변 객체와 얕은 복사, 깊은 복사에 대해 알아봤다. 다음 편에서는 undefined와 null에 대해 알아볼 것이다.