JS 참조복사 & 얕은복사 & 깊은복사

◼ JavaScript의 참조복사 & 얕은복사 & 깊은복사 정리

✍참조 복사 : 객체의 복사본을 만드는 대신 그 객체의 참조만 복사하는 행위

객체를 단순히 변수에 대입하면 참조 복사를 한다.(원본과 사본이 같은 객체를 참조한다.)

 const jihye = {
            otherName: "bonnie",
            favoriteColor : "Light purple"
      }
 
 const copy = jihye;
console.log(copy) // {otherName: "bonnie",  favoriteColor : "Light purple"}

// jihye와 copy는 같은 객체를 참조한다.

✍ 얕은 복사 : 참조복사는 되지만 깊은 복사는 되지 않고 객체의 중첩된 객체는 얕은 복사가 된다.

ES6 - Object.assign() , spread(...) 사용한 복사

▪ Object.assign(target(대상 객체), source(출처 개체) 사용

const shallow = { pet : { name : yangyang }};
let shallow1 = Object.assign({}, shallow);
shallow.pet.name = "kitty";
console.log(shallow.a.b);  //expected: kitty but actual: yangyang

▪ spread(...)사용

const shallow = { pet : { name : yangyang }};
let shallow1 = {...shallow};
shallow.pet.name = "kitty";
console.log(shallow.a.b);  //expected: kitty but actual: yangyang

​ Object.assign() , spread(...) 에 대해서는 다음시간에 포스팅하겠다.

✍깊은 복사 : 객체의 사본을 만들어 다른 메모리 영역에 복사하는 행위

▪ JSON.parse(JSON.stringify(copy)) 사용

// deepCopy는 jihye객체로부터 깊은 복사를 하여 단독의 객체를 가진다.
let deepCopy = JSON.parse(JSON.stringify(jihye))

// 깊은 복사 이후 jihye객체의 값을 변경하여도 deepCopy의 속성은 바뀌지 않는다.
jihye.favoriteColor = "Green"

// 각각의 다른 객체를 가지고 있다.
console.log(jihye) // {otherName: "bonnie",  favoriteColor : "Green"}
console.log(deepCopy) //  {otherName: "bonnie",  favoriteColor : "Light purple"} 

이 방법을 사용하면 깊은 복사가 가능하지만 객체 내 프로퍼티가 원시타입이 아닌 프로퍼티(함수, 객체, 배열)와 값은 복사되지 않는다.

const winter = {
    name : "겨울",
	snowMan : function(){
        alret("Do you wanna build a Snowman?")
    }
}

const copyWinter = JSON.parse(JSON.stringify(winter))
console.log(copyWinter) // { name : "겨울"}
// snowMan함수 프로퍼티는 복사되지 않았다.

깊은복사에서 Best는 직접 구현하거나 라이브러리를 사용하는 방법이 있다.