자바스크립트에서 사용되는 데이터는 원시형데이터와 참조형 데이터로 나뉘게 됩니다.
원시데이터(String, Number, Boolean, undefined, null) 참조형 데이터(Object, Array, Function)
let이나 const로 데이터가 할당이 되게 되면 그 데이터는 지정된 메모리 주소로 들어가게 됩니다. 즉, let a = 1;에서 a는 1이 아니라 1의 정보가 들어있는 메모리 주소를 가르키게 되는 것입니다. console.log(a)와 같이 a 값을 확인해보면 1이 들어있는 메모리주소에서 1을 꺼내와 콘솔창에 출력을 하게 되는 것이죠
먼저, 원시형데이터의 예시를 통해 할당과 메모리 주소를 살펴보도록 하겠습니다.
let a = 1
let b = 4
console.log(a, b, a === b) // 값: 1 4 false
현재 작성된 코드의 경우 a가 가르키는 메모리 주소와 b가 가르키는 메모리 주소가 다르기 때문에 false가 출력되게 되는 것입니다.
b = a // 변수 b에 a가 바라보는 메모리의 주소를 할당
console.log(a, b, a === b) // 값: 1 1 true
만약 위와 같이 b에 a가 가르키는 메모리 주소를 할당하는 경우 a와 b는 동일한 메모리주소를 바라보고 있기 때문에 true가 출력이 되게 됩니다.
그렇다면 a에 새로운 값을 재할당하게 되면 어떻게 될까요?
a = 7 // a에 다른 데이터가 들어가므로 다른 메모리 주소가 할당됨
console.log(a, b, a === b) // 값: 7 1 false
이런 경우 a는 더이상 1이 들어있던 메모리 주소를 바라보지 않고 7이 들어갈 새로운 메모리 주소를 만들어 그 주소를 바라보게 됩니다.
그렇다면 만약, 앞에서 할당이 이미 한번 이뤄졌던 숫자 1을 c에 할당을 하게 되면 어떻게 될까요?
let c = 1
console.log(b, c, b === c) // 값: 1 1 true
// c는 새로운 변수지만 원래 있던 데이터 값인 1이 할당되었으므로
// b와 c가 가리키는 메모리 주소가 같아서 true가 반환됨
할당된 원시데이터가 기존 메모리 주소에 들어가 있는 경우 새롭게 메모리주소를 만들지 않고 그 메모리 주소가 할당되게 됩니다. 이를 데이터 불변성이라고 합니다.
처음 접하는 내용이라면 이해하기가 더 복잡할 수 있는데 사실상 원시형 데이터의 경우 데이터 자체가 변하지 않은 성질을 가지고 있기 때문에(데이터불변성), 메모리 주소까지 참조해서 비교하며 이해할 필요 없이 생긴 모습이 똑같으면 같은 데이터라고 이해를 해도 괜찮습니다.