Post

발단

예약 시스템 프로젝트를 만드는 중에 예약 시간 정보가 제대로 저장되지 않음을 확인했다. 바로 1. 기존처럼 작성하였던 것인데 왜 그런 것인지 전혀 이해가지 않았다. 심지어 로그를 찍어 보는 것으로 start와 end의 값이 출력되는 것을 확인까지 했었는데 말이다.

// 1. 기존
let { start, end } = this.buyInfo.reservation
start = this.bookStart
end = this.bookEnd

// 2. 해결
this.buyInfo.reservation.start = this.bookStart
this.buyInfo.reservation.end = this.bookEnd

해결

해결 방법은 2. 해결처럼 작성하는 건데 그게 왜 그런 것인지 처음에는 이해가지 않았다. 구조 분해 할당을 했을 뿐 둘은 기능적으로 완전히 동일한 코드 아닌가?

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

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'