구조 분해 할당 이슈(feat. 원시값과 참조값)

작성일: 2021-11-17

발단

예약 시스템 프로젝트를 만드는 중에 예약 시간 정보가 제대로 저장되지 않음을 확인했다. 코드는 아래와 같은데 왜 그런 것인지 전혀 이해가지 않았다. 심지어 로그를 찍어 보는 것으로 start와 end의 값이 출력되는 것을 확인까지 했었는데 말이다.

let { start, end } = this.buyInfo.reservation
start = this.bookStart
end = this.bookEnd

해결

해결 방법은 다음코드와 같은데 처음엔 무엇이 다른지 이해가 되지 않았다. 구조 분해 할당을 했을 뿐 둘은 기능적으로 완전히 동일한 코드 아닌가?

this.buyInfo.reservation.start = this.bookStart
this.buyInfo.reservation.end = this.bookEnd

문제는 저장하고자 하는 값이 문자열 데이터, 즉 원시형 값이라는데 있다. 원시 타입은 할당 연산자를 만났을 때 참조가 아니라 값이 복사된다. 조금 더 직관적으로 정리하자면 다음과 같다.

const reservation = {
    start: 'abc',
    end: 'def'
}
let { start, end } = reservation

console.log(start) // 'abc'
console.log(end) // 'def'
console.log(reservation.start) // 'abc'
console.log(reservation.end) // 'def'

start = '123'
end = '456'

console.log(start) // '123'
console.log(end) // '456'
console.log(reservation.start) // 'abc'
console.log(reservation.end) // 'def'