[개발일기] js 깊은복사/얕은복사

(2023.05.17)

자바스크립트에서 객체를 잘 다루는 건 중요하다.

특히 복사.

 

1. 참조할당

'=' 연산자를 이용해 어떤 객체를 다른 객체에 할당하면

'참조 할당'이다.

참조할당은 객체의 주소값을 복사해서 넣는것이기 때문에

한 객체의 프로퍼티가 바뀌면 다른 객체의 프로퍼티도 바뀐다.

 

2. 얕은 복사

메소드 Object.assign(타겟 객체, 원본 객체) 와

연산자 ... 를 쓰면 된다.

(Object.assign에서 유의할 점은 이 메소드는 타겟 객체를 return한다는 것. 그러니 메소드의 결과물을 다시 타겟 객체에 할당하든지 아니면 새로운 변수를 만들어 할당하든지 하면 된다. 새로운 변수를 만들어 할당하면 이것은 참조할당이기에 새로운 변수와 타겟 객체는 주소값을 공유한다)

 

그럼 참조할당과는 다르게 복사한 객체의 프로퍼티를 바꿔도 원본 객체의 프로퍼티가 바뀌지 않는다(반대의 경우도 마찬가지).

하지만 문제점이 한가지 있다. 원본 객체 안에 또 객체가 있는 경우엔 완벽한 복사가 안된다는 것.

즉, 객체 안의 객체에 있는 프로퍼티를 바꾸면 다른 객체도 그 프로퍼티가 바뀐다. 참조할당처럼 값을 공유하게 된다.

 

3. 깊은 복사

객체가 어떤 프로퍼티를 갖고 있던 완벽하게 복사할 수 있다.

방법은 두가지다.

JSON 객체의 메소드(stringify, parse)를 사용하든지

Lodash 라이브러리의 clonedeep 함수를 사용하든지.

 

다만 JSON 메소드를 사용하면 객체 안에 있는 함수를 복사하지 못한다. 또한 성능이 떨어진다.

그러니 웬만하면 Lodash를 쓰도록 하자.