[Intermediate] 데이터 - 불변성

OROSY·2021년 3월 31일
0

JavaScript

목록 보기
36/53
post-thumbnail

데이터 - 불변성(Immutability)

원시 데이터

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가 반환됨
새로운 원시 데이터를 사용했을 때 해당 원시 데이터가 기존 메모리 주소에 들어있다면 새로운 메모리 주소에 원시 데이터가 할당되는 것이 아니라 기존 메모리 주소를 바라보도록 함
즉, 원시 데이터는 불변성을 갖고 있기 때문에 새롭게 만들어지는 것이 아닌 항상 불변한다라는 개념!

참조형 데이터

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가 바라보는 메모리 주소가 같음
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
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 속성 값 모두 바뀜
참조형 데이터는 새로운 데이터를 만들 때마다 새로운 메모리 주소에 할당됨(가변성)
결국, 참조형 데이터는 할당 연산자를 사용할 때 메모리의 참조 주소만 옮겨간다는 의미(데이터 값을 복사하는 것 X)
profile
Life is a matter of a direction not a speed.

0개의 댓글