고전적인 얕은 복사와 깊은 복사 방법

왜?

얕은 복사와 깊은 복사를 알아야하는 이유는 불변객체를 만들기 위함이다.

 

우리는 참조형 데이터인 객체의 기본적 성질이 가변성인걸 알고 있다.(이전글 참고)

 

때문에 그 객체 자체를 생성해 불변객체를 만들 필요가 있다.

 

여기서 사용되는게 얕은복사, 깊은복사이다.

 

얕은 복사는 객체 안에 또 객체가 있을때는 우리가 마주한 문제에서 벗어날 수 없다.

 

하지만 깊은 복사는 객체 안에 있는 객체까지 그 객체 자체를 복사 시키기 때문에 완전한 불변 객체를 만들 수 있다.

 

불변객체를 만드는 방법에는 여러가지 도구, 프레임워크가 있다고 한다.

 

이번 포스팅에선 고전적으로 함수를 만들어 불변객체를 만들어 보려고한다.

---

얕은 복사

얕은 복사는 바로 아래 단계의 값만 복사하는 방법이다

코드는 다음과 같다.

var  = shallowCopy = (target) => {
	var result = {};
  	for(var prop in target){
    	result[prop] = target[prop];
    }
  	return result;
}

for in 문법을 활용해 result 객체에 target객체의 프로퍼티를 복사하는 함수다.

코드가 잘 작동되는지 보자.

var student1 = {
  name: "jaeyun",
  info: {
    age: 24,
    height: 174,
  },
};

객체가 다음과 같을때 name과 age를 각각 변경한 결과다

중첩된 객체에선 참조형 데이터가 저장된 프로퍼티를 복사할 때 그 주솟값만 복사하기 때문에 age가 student1, student2모두 변경된걸 볼 수 있다.

이런 문제를 해결하기 위해 깊은 복사가 필요하다.

---

깊은 복사

어떻게 깊은 복사를 구현할지 고민하다가 재귀함수를 생각했는데 아니나 다를까 책에서도 재귀함수를 통해 깊은 복사를 구현했다!

코드는 다음과 같다.

var deepCopy = (target) => {
  var result = {};
  if (typeof target === "object" && target !== null) {
    for (var prop in target) {
      result[prop] = deepCopy(target[prop]);
    }
  } else {
    result = target;
  }
};

똑같은 예제로 확인해 보겠다.

길동이의 나이만 바뀐걸 보니 깊은 복사가 잘 이루어진걸 알 수 있다.

JSON을 이용한 깊은 복사 방법

객체를 JSON문법으로 표현된 문자열로 변환 전환했다가 다시 JSON 객체로 바꾸는 것이다.

코드는 다음과 같다.

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

다만 이는 메서드(함수)나 숨겨진 프로퍼티(프로토타입) 혹은 getter/setter등 과 같이 JSON으로 변경 불가능한 객체는 복사히지 못하기 때문에 순수 중첩객체에서 사용시 용이하다.

---

참고자료: [도서] 코어 자바스크립트