JavaScript, 얕은 복사와 깊은 복사

얕은 복사(Shallow Copy)

- 얕은 복사는 데이터를 복사할 때 데이터의 주소값을 복사한다. 

// shallow 객체 생성
const shallow = {
    name : "James",
    age : "28"
}

// 새롭게 생성한 shallow2에 shallow 의 데이터 주소값을 할당
const shallowCopy2 = shallowCopy


// shallow객체의 속성을 변경
shallowCopy.age = 29

// 변경된 속성은 shallow.age이지만 shallow2.age의 속성이 변경되었다.
console.log(shallow2.age) // 29

- shallowCopy에 shallowCopy2 를 복사했다. 

- shallowCopy 내 age 속성에 값을 변경하면 age가 가리키는 주소값은 29를 가리키도록 재할당 되었기 때문에 shallowCopy.age는 29를 출력하게 된다. 

- 값을 변경할 수 있다는 건 의도치 않게 값이 변경되어 다른 결과가 나올 수 있다는 뜻이다. 

 

깊은 복사(Deep Copy)

- 깊은 복사는 데이터의 주소값을 복사하는 얕은 복사와 달리 실제 값을 복사한다.

- 깊은 복사를 하는 방법은 여러가지가 있다. 

• ...(spread) 연산자를 사용한 깊은 복사

// deep 객체 생성
const deep = {
    name : 'James',
    age : '28'
}

// 새로운 객체 deep2에 ...연산자를 사용해 deep을 복사한 값을 할당
const deep2 = {...deep}

// deep.age의 값을 29로 변경해도 
deep.age=29

// deep2.age는 28이 출력된다.
console.log(deep2) // 28

- 하지만 이 방법의 문제점은 1 depth 까지만 가능하다는 것이다. 

const deep = {
    name : 'James',
    age : '28',
    class : {
        firstClass : 1,
        secondClass : 2
    }
}

const deep2 = {...deep}

deep.class.firstClass = 3

console.log(deep2)

→ { name: 'James', age: '28', class: { firstClass: 3, secondClass: 2 } }

- 객체 내에 객체가 있는 경우 2depth에 있는 객체를 변경하면 변경이 된것을 볼 수 있다. 

- 이를 해결하기 위해 Lodash 라이브러리의 cloneDeep 함수, 재귀함수, JSON.parse()와 JSON.stringify() 함수를 사용한다. 

- 이에 대한 내용은 이후에 다루겠다.