데이터 불변성(Immutability)
- 원시 데이터: String, Number, Boolean, undefined, null
- 참조형 데이터: Object, Array, Function
원시 데이터
- 한번 메모리에 만들어지면 새롭게 만들어지는 것이 아닌 항상 불변한다는 개념을 가짐
- 즉, 새로운 원시데이터를 사용했을 때 기존의 메모리주소에 들어있다면 그 원시데이터를 새로운 메모리에 새롭게 만드는것 아닌 기존에 존재하는 메모리주소를 바라보게 만듦
- 원시데이터는 데이터 자체가 변하지 않는 성질을 가지므로 생긴것이 다르면 다르다고 쉽게 이해해도 무방함
let a = 1
let b = 4
console.log(a, b, a === b) //1 4 false
-
a는 첫번째 메모리주소, b는 두번째 메모리주소를 바라보는 형태로 사용됨
-
false: 변수 a가 바라보는 메모리주소와 변수 b가 바라보는 메모리 주소가 서로 다르기 때문에 일치하지 않다고 판단
b = a
console.log(a, b, a === b) //1 1 true
-
b라는 변수에 a를 할당한다는 것은 a가 바라보는 첫 번째 메모리주소를 b에게 할당한다는 의미
-
따라서 b는 두 번째 메모리주소를 바라보지 않고 첫 번째 메모리주소를 바라봄
-
true: a와 b가 바라보고 있는 메모리주소가 같기 때문에 일치한다고 판단
a = 7
console.log(a, b, a === b) //7 1 false
- 7이라는 숫자데이터는 새로운 데이터이므로 세 번째 메모리주소에 들어감
- a는 1번 메모리주소에서 3번 메모리주소를 바라보는 구조로 바뀜
- false: 서로 바라보고 있는 메모리주소의 위치가 다르기 때문에 false 값이 나옴
- 쉽게 말해 서로 숫자값이 다르니까 false
let c = 1
console.log(b, c, b === c) //1 1 true
- c에 할당된 숫자데이터 1은 기존에 메모리주소에 있는 숫자데이터 1을 바라보는 형태
- 즉, 네번째 메모리주소로 들어가지 않음
- true: b와 c 모두 1번 메모리주소를 바라보고 있으므로 true
참조형 데이터
- 참조형 데이터는 원시 데이터와 다르게 새로운 값을 만들때마다 그것이 새로운 메모리주소로 할당되는 구조를 가짐
- 따라서 생긴것이 같아도 서로 같은 데이터가 아닐 수도 있음
- 참조형 데이터는 불변성이 없음, 다른말로 "가변한다"고 표현
- 참조형 데이터는 할당연산자를 사용했을때 복사돼서 새로운 객체데이터가 만들어지는 개념이 아니라 메모리의 참조주소만 옮겨감(메모리주소만 같은곳을 바라보게 만들어줌)
let a = { k: 1 }
let b = { k: 1 }
console.log(a, b, a === b) //{k: 1} {k: 1} false
- a라는 변수는 1번 메모리주소를 바라보고 b는 2번 메모리주소를 바라봄
- false: a와 b는 서로 다른 메모리 주소를 바라보고 있기 때문에 같지 않음
a.k = 7
- 첫 번째 메모리주소의 k속성 값이 1 -> 7로 수정됨
b = a
console.log(a, b, a === b) //{k: 7} {k: 7} true
- b가 바라보고 있던 2번 메모리주소가 1번 메모리주소를 바라보도록 변경됨
- true: 서로 1번 메모리주소를 바라보고 있기 때문
a.k = 2
console.log(a, b, a === b) //{k: 2} {k: 2} true
- 1번 메모리주소에 있던 k부분이 7 -> 2로 값이 바뀜
- a, b 두 변수 모두 1번 메모리주소를 바라보고 있기 때문에 같은 값이 나옴
- 같은 메모리주소를 바라보고 있는 여러개의 변수들이 있을 때 한쪽 변수에 있는 값을 수정하게 되면 다른값에서 확인하게 될때 의도하지 않게 이미 값이 바뀌어 있음
- 즉, a라는 변수에서 k속성의 값만 바꾸었지만 의도하지 않게 b라는 변수의 k속성 값도 같이 바뀜(서로 같은 메모리 주소를 바라보고 있기 때문에)
let c = b
console.log(a, b, c, a === c) //{k: 2} {k: 2} {k: 2} true
- c라는 변수에 b라는 변수를 할당
- 현재 a, b 모두 1번 메모리주소를 바라보고 있고 b를 c에 할당했기 때문에 c도 1번 메모리주소를 바라보게 됨
- true: 같은 메모리주소를 바라보고 있기 때문에 일치
a.k = 9
console.log(a, b, c, a === c) //{k: 9} {k: 9} {k: 9} true
- a가 바라보고 있던 메모리주소의 k의 값을 2 -> 9로 변경
- 변수 b, c도 1번 메모리주소를 동시에 바라보고 있기 때문에 수정한 것은 a변수의 k속성 이지만 a, b, c 모두 k부분이 숫자 9로 바뀜
