[ES6] 데이터컬렉션(5) - Map객체,객체리터럴 값 복사하기

안녕하세요
간단한 포스팅입니다.

Map객체 복사하기

맵 객체를 복사하려고 하면 값이 아니라 참조가 복사될 때가 있습니다.

const init = [['one','one'],['two','two']]
const firstMap = new Map(init)
const secondMap = firstMap

secondMap.set('one','1')
console.log(firstMap)

// result
Map { 'one' => '1', 'two' => 'two' }

secondMap에 one의 value를 변경했는데
첫 번째에 생성한 맵 객체 firstMap의 one의 value가 1로 변경되었습니다.
secondMap이 firstMap을 참조하기 때문인데,
해결방법은 간단하게 펼침연산자를 이용하면 됩니다.

const secondMap = new Map([...firstMap])
secondMap.set('one','1')
console.log(firstMap)

// result
Map { 'one' => 'one', 'two' => 'two' }

객체리터럴 복사하기

객체 리터럴의 경우도 마찬가지입니다.

const init = {
    one:'one',
    two:'two'
}
const second = {...init}
second.one = '1'

console.log(init)
// result
{ one: 'one', two: 'two' }

second가 init을 참조하지 않습니다.

중첩객체의 값 복사하기

const init = {
    one:'one',
    two:'two',
    three : {
        one:'one',
        two:'two'
    }
}

이런 중첩객체의 경우, 중첩된 부분이 참조가 복사됩니다.

const second = {...init}
second.three.one = '1'
console.log(init)
// result
{ one: 'one', two: 'two', three: { one: '1', two: 'two' } }

해결방법은 중첩된 부분을 펼침연산자로 명시해주는겁니다.
첫 줄을 이렇게 바꿔주면 됩니다..

 const second = {...init,
                three : {...init.three}
                }

콘솔에 찍은 결과입니다.

{ one: 'one', two: 'two', three: { one: 'one', two: 'two' } }

원본은 건드리지 않고 사본으로 작업을 하려고 할 때, 펼침연산자를 이용해 간단하게 복사할 수 있습니다.

감사합니다!