깊은 복사 vs 얕은 복사 JavaScript

오늘 자바 스크립트에서 깊은 복사와 얕은 복사에 대해서 알게 되었습니다.

일단 깊은 복사와 얕은 복사 모두 참조값이 원본과 다른 객체를 생성합니다.

예를 들어서

var user = {

    name: "john",

    age: 20,

}

가 있다고 하고 이 객체의 값을 바꿔주는 것은 쉽습니다.

하지만 이 객체의 값을 유지한 상태로 데이터를 가지고 있고 또 다른 객체를 생성해서 그 객체 값만 바꾼다고 했을 때의 방법은 새로운 객체를 하나 더 만들어서 똑같은 형태로 데이터를 할당해주는 것 보다 데이터에 할당된 값 즉, 변수를 참조해서 새로운 객체를 만들어 오는 것이 더욱 사용하기 편리하다는 의미 입니다.

위의 객체는 얕은 복사든 깊은 복사든 결국 새로운 객체를 생성해 주고 user 객체안에 또다른 객체 값이 존재 하지 않고 즉, 참조 값이 존재하지 않기 때문에 두개중 어떤 것을 사용해도 상관이 없습니다.

 

하지만 밑에 처럼 작성한다면 이야기가 달라집니다.

var user = {

    name: "john",

    age: 20,

    x: { y: 1},

}

여기서 얕은 복사를 하는 경우 새로 생성된 newUser라는 객체가 있다면 newUser의 name과 user의 name은 === false입니다. 

하지만 newUser의 x와 user의 x는 ===를 했을 때 true가 뜨게 됩니다.

그 이유는 참조한 값 안에 있는 객체 값을 또 참조해서 복사한 것이 아니기 때문입니다.

그럼 이것을 깊은 복사를 하게 된다면 newUser의 name과 user의 name도 ===에서 false이고  newUser의 x와 user의 x에서도 ===를 했을 때 false가 뜨게 됩니다.

 

이를 통해 알 수 있던 부분은 

얕은 복사를 사용한 경우 객체 내부의 객체는 원본 참조값을 복사해오고,

깊은 복사는 객체 내부의 객체까지도 모두 원본 참조값과는 다른 객체로 복사해온다는 것입니다.

 

더욱 쉽게 말하면 얕은 복사를 한 경우 객체 값을 바꾸면 둘다 바뀝니다.

그럼 깊은 복사는 그렇지 않다는 뜻 입니다.