자바스크립트 얕은 복사, 깊은 복사

얕은 복사

복사된 객체가 원본 객체와 같은 주소를 참조하는 것을 말한다.

 

얕은 복사를 하는 세 가지 방법

Array.prototype.slice()

const source = [ {city: '서울'}, {city: '인천'} ]
const target = source.slice()
    
target[0].city = '부산'
console.log(source[0] === target[0]) // true
console.log(source[0].city) // 부산

 

Object.assign(source, target)

const source = [ {city: '서울'}, {city: '인천'} ]
const target = {}
Object.assign(target, source)

target[0].city = '부산'
console.log(source[0] === target[0]) // true
console.log(source[0].city) // 부산

 

spread 연산자

const source = [ {city: '서울'}, {city: '인천'} ]
const target = {...source}

target[0].city = '부산'
console.log(source[0] === target[0]) // true
console.log(source[0].city) // 부산

 

 

---

 

깊은 복사

복사된 객체가 원본 객체와 다른 주소를 참조하는 것을 말한다.

 

깊은 복사를 하는 두 가지 방법

JSON.parse(JSON.stringify(source)) 

 - 방법은 간단하지만 재귀 함수로 구현한 거보다 속도가 느리다는 단점이 있다.

const source = [ {city: '서울'}, {city: '인천'} ]
const target = JSON.parse(JSON.stringify(source))

target[0].city = '부산'
console.log(source[0] === target[0]) // false
console.log(source[0].city) // 서울

 

재귀 함수 구현

clone(source) {
    if (source === null || typeof source !== 'object') {
        return source
    }

    let data = Array.isArray(source) ? [] : {}

    for (const key of Object.keys(source)) {
        data[key] = clone(source[key])
    }

    return data
}

const source = [ {city: '서울'}, {city: '인천'} ]
const target = clone(source)

target[0].city = '부산'
console.log(source[0] === target[0]) // false
console.log(source[0].city) // 서울