[Level up] 데이터(7) - 불변성

01.원시 데이터

• JavaScript에서 사용하는 기본 데이터
• String, Number, Boolean, undefined, null

let a = 1
let b = 4

console.log(a, b, a === b) // 1 4 false
b = a // 변수 b에 a가 바라보는 메모리의 주소를 할당
console.log(a, b, a === b) // 1 1 true
a = 7 // a에 다른 데이터가 들어가므로 다른 메모리 주소에 할당됨
console.log(a, b, a === b) // 값: 7 1 false

let c = 1
console.log(b, c, b === c) // 값: 1 1 true
// c는 새로운 변수지만 원래 있던 데이터 값인 1이 할당되었으므로
// b와 c가 가리키는 메모리 주소가 같아서 true가 반환됨

• 새로운 원시 데이터를 사용했을 때 해당 원시 데이터가 기존 메모리 주소에 들어있다면 새로운 메모리 주소에 원시 데이터가 할당되는 것이 아니라 기존 메모리 주소를 바라보게된다.
• 원시 데이터는 불변성을 갖고 있기 때문에 새롭게 만들어지는 것이 아닌 항상 불변한다라는 개념이다.

02.참조형 데이터

• Object, Array, Function

let a = { k: 1 }
let b = { k: 1 }
console.log(a, b, a === b) // { k: 1 }, { k: 1 }, false
// 변수 a와 b가 바라보는 메모리 주소가 다르므로 false

a.k = 7
b = a // a의 메모리 주소를 b에 할당 (변수 a와 b가 바라보는 메모리 주소가 같음)
console.log(a, b, a === b) // { k: 7 }, { k: 7 }, true
a.k = 2 // a 객체 데이터의 속성 값만 바꿈
console.log(a, b, a === b)
// 값: { k: 2 }, { k: 2 }, true
// a와 b가 바라보는 메모리 주소가 같으므로 b의 객체 데이터의 속성 값도 함께 바뀜

let c = b // b의 메모리 주고를 c에 할당 (c는 b의 메모리 주소를 참조, b는 a의 메모리 주소를 참조)
console.log(a, b, c, a === c) // { k: 2 }, { k: 2 }, { k: 2 }, true
a.k = 9
console.log(a, b, c, a === c) // { k: 9 }, { k: 9 }, { k: 9 }, true
// 이또한 a의 k 속성 값만 바꿨지만 메모리 주소가 같아 b, c 속성 값 모두 바뀜

• 새로운 데이터를 만들때마다 같은 데이터가 기존 메모리 주소에 들어있더라도 새로운 메모리 주소에 할당됩니다.
• b = a; 처럼 a의 메모리 주소를 b에 할당하면 a,b는 같은 메모리의 주소를 바라보게되며 a의 값이 변경되면 b의 값도 같이 변경됩니다.
• 같은 메모리의 주소 값을 가지고 있는 변수들이 여러개 있을때 그 중 하나의 변수만 수정했더라도 의도치 않게 모든 변수들의 데이터 값이 변경될 수 있으므로 주의해야 합니다.