얕은 복사 와 깊은 복사

일단 우리가 객체를 복사한다고 하면 아래 코드와 같이 복사를 한다.

const obj1 = { name: "짱구", age: 7 };

const obj2 = obj1;

console.log(obj2); // { name: '짱구', age: 7 }

console.log(obj1 === obj2); // true

obj1 이라는 변수에 객체를 만들었고 obj2라는 변수에 obj1의 객체를 복사하였다. 그런다음 obj2를 콘솔로그로 확인해보면 obj1과 똑같이 나오고 obj1 === obj2 역시 true로 나온다.

하지만 다음 코드를 보자

obj1.name = "철수";

console.log(obj1); // { name: '철수', age: 7 }

console.log(obj2); // { name: '철수', age: 7 }

우리는 obj1의 name만을 변경했을 뿐인데 obj1만 변한게 아니라 obj2도 변해버렸다.

위의 코드예시처럼 객체를 직접 대입하여 복사를 하는 경우 참조에 의한 할당이다.
즉, 객체를 복사하는게 아닌 객체를 저장한 데이터주소를 복사하게 되는 것이다.
그러므로 obj1를 바꾸게 되면 obj2도 obj1과 같은 주소를 가지고 있으므로 obj2도 똑같이 바뀌게 되는 것이다.

얕은복사

그렇다면 원본에 영향을 주지 않고 완전히 새로운 복사본을 만들 수 없을까?
방법이 있다!

첫번째 방법으로 스프레드 연산자를 이용하는 방법이다.

const obj1 = { name: "짱구", age: 7 };

const obj2 = {...obj1}; // { name: '짱구', age: 7 }

console.log(obj2);

obj1.name = "철수";

console.log(obj1); // { name: '철수', age: 7 }

console.log(obj2); // { name: '짱구', age: 7 }

obj2를 스프레드연산자를 이용해 복사를 하였고 obj1의 name을 변경해주었는데 obj1만 변하였고 obj2는 변하지 않은걸 확인할 수 있습니다!!!

두번째 방법으로는 Object.assign을 이용하는 방법입니다.

const obj1 = { name: "짱구", age: 7 };

const obj2 = Object.assign({},obj1); // { name: '짱구', age: 7 }

console.log(obj2);

obj1.name = "철수"

console.log(obj1); // { name: '철수', age: 7 }

console.log(obj2); // { name: '짱구', age: 7 }

스프레드연산자로 복사한 것과 마찬가지로 obj1만 변한것을 확인할 수 있습니다.

하지만 우리는 확인할것이 있습니다.

const obj1 = { name: "짱구", 
              age: 7 ,
              hobby: {
                one: "수영",
                two: "축구"
                }
             }
             
const obj2 = {...obj1}
const obj3 = Object.assign({},obj1)

obj1.hobby.one = "코딩"

console.log(obj2) // {
                       name: '짱구',
                       age: 7,
                       hobby: { one: '코딩', two: '축구' }
                      }
console.log(obj3) // {
                       name: '짱구',
                       age: 7,
                       hobby: { one: '코딩', two: '축구' }
                      }

위의 코드를 보면 obj1객체안에 hobby라는 객체를 만들어 주었습니다. 그리고 obj1의 hobby의 one 값을 변경하였는데 얕은 복사를 한 obj2와 obj3 역시 변한걸 볼 수 있습니다.

즉, 얕은 복사는 객체 내의 객체까지는 복사하지 못하는 걸 볼 수 있습니다.

깊은 복사

깊은 복사는 객체 내의 객체까지 복사할 수 있습니다.
JSON을 이용하여 복사할 수 있는데 코드를 통해 보여드리겠습니다.

const obj1 = { name: "짱구", 
              age: 7 ,
              hobby: {
                one: "수영",
                two: "축구"
                }
             };

const obj2 = JSON.parse(JSON.stringify(obj1));

obj1.hobby.one = "코딩";

console.log(obj2); // {
                         name: '짱구',
                         age: 7,
                         hobby: { one: '수영', two: '축구' }
                      }

JSON을 이용하여 깊은 복사를 하는 경우 obj1의 객체 내 hobby객체는 변하였지만 obj2는 변하지 않은걸 확인할 수 있다.

참고한 사이트
https://intrepidgeeks.com/tutorial/javascript-light-copy-and-deep-copy