📌 얕은 복사(Shallow copy)

• 얕은 복사는 주소 값을 복사한다. 즉, 값 자체를 복사하는 것이 아니라 주소값을 복사하여 같은 메모리를 가리킨다.
• 새로운 인스턴스를 생성하지 않기 때문에 깊은 복사(Deep Copy)보다 상대적으로 바르다.

아래의 예시를 살펴보자. 얕은 복사 에서는 객체(배열도 가능)를 스프레드 연산자(...)를 활용하여 복사한다.

let profile = {
	 name : "철수",
	 age : 12,
	 school : "다람쥐초등학교"
}

let profile2 = {...profile}      //스프레드 연산자를 사용
profile.name = "영희"

profile2        // {name: '철수', age: 12, school: '다람쥐초등학교'}
profile         // {name: '영희', age: 12, school: '다람쥐초등학교'}

profile에는 철수의 정보가 들어있다. 이 profile을 스프레드 연산자를 이용하여 profile2에 복사해준 후 원본(profile)의 값을 변경하였을 때, 사본에는 영향을 끼치지 않는 것을 확인할 수 있다.

그런데 여기서 문제점은, 얕은 복사로는 객체 안의 객체(depth 2 이상)까지 복사가 되지 않는다.

let profile = {
    name : "철수",
    age : 12,
    school : "다람쥐초등학교", 
    hobby: {
        hobby1: "수영",
        hobby2: "자전거"
    }
}

let profile2 = {...profile}

/* depth 1인 값을 변경하기 */
profile.name = "영희"
profile
// {name: '영희', age: 12, school: '다람쥐초등학교', hobby: {…}}age: 12hobby: {hobby1: '수영', hobby2: '자전거'}name: "영희"school: "다람쥐초등학교"[[Prototype]]: Object
profile2
// {name: '철수', age: 12, school: '다람쥐초등학교', hobby: {…}}age: 12hobby: {hobby1: '수영', hobby2: '자전거'}name: "철수"school: "다람쥐초등학교"[[Prototype]]: Object


/* depth 2인 값을 변경하기 */
profile2.hobby.hobby1 = "잠자기"
profile2
// {name: '철수', age: 12, school: '다람쥐초등학교', hobby: {…}}age: 12hobby: {hobby1: '잠자기', hobby2: '자전거'}name: "철수"school: "다람쥐초등학교"[[Prototype]]: Object
profile
// {name: '철수', age: 12, school: '다람쥐초등학교', hobby: {…}}age: 12hobby: {hobby1: '잠자기', hobby2: '자전거'}name: "철수"school: "다람쥐초등학교"[[Prototype]]: Object

위의 예시를 보면 depth가 2인 사본(profile2)의 hobby객체 안의 hobby1값을 변경하였을 때, 원본의 hobby1에도 영향을 끼치는 것을 확인할 수 있다. 완전히 분리된 객체를 만들 수는 없을까? 이 때 사용할 수 있는 것이 깊은 복사(Deep copy)이다.

---

📌 깊은 복사(Deep Copy)

• 깊은 복사는 JSON(JavaScript Object Notation)을 사용한다.

let profile = {
    name : "철수",
    age : 12,
    school : "다람쥐초등학교", 
    hobby: {
        hobby1: "수영",
        hobby2: "자전거"
    }
}

/* JSON을 이용하여 원본을 string으로 바꿔주기 - 아래 결과를 보면 앞뒤로 ''가 붙은 것을 확인할 수 있다. */
JSON.stringify(profile)
// '{"name":"영희","age":12,"school":"다람쥐초등학교","hobby":{"hobby1":"수영","hobby2":"자전거"}}'

/* JSON을 이용하여 string으로 변경된 구문을 분석하여 새로운 값 혹은 객체로 생성하기(아래 두 예시는 같은 예시) */
profile2 = JSON.parse(JSON.stringify(profile))
profile3 = JSON.parse('{"name":"영희","age":12,"school":"다람쥐초등학교","hobby":{"hobby1":"수영","hobby2":"자전거"}}')
// {name: '영희', age: 12, school: '다람쥐초등학교', hobby: {…}}

JSON의 parse()와 stringify()메소드를 사용하면 새로운 주소가 할당되어 서로 영향을 끼치지 않는다. 여기서 JSON은 객체는 아니고 객체처럼 생긴 아이이다.

[ + ] 추가적으로 Lodash라는 라이브러리에 cloneDeep이라는 메소드가 있다. cloneDeep()은 깊은 복사를 해주는 메소드인데, 위에서 JSON의 parse()와 stringify()를 사용한 것보다 효율성이 훨씬 좋다.