JavaScript 데이터 - 기본형과 참조형
Primative Type
: 불변성의 성질을 가진다.
- Number, String, Boolean, Symbol (ES6에 추가, 객체 속성을 만드는 데이터 타입), Null, Undefined
기본형 데이터는 데이터 값 자체가 불변하므로 (Immutability) 메모리상에 고정된 크기로 저장된다.
따라서 여러 변수가 하나의 메모리를 사용한다. (재사용)
const a = 10
const b = 20
const c = 10
console.log(a === c) // 결과: true
console.log(a === b) // 결과: false이처럼 같은 값을 지닌 a 와 c는 같은 메모리 주소를 가리키게 되므로 a === c의 값이 true가 출력된다.
하지만 b는 20이라는 다른 값을 지니게 되므로 다른 메모리 주소에 저장되고, a === b는 false가 된다.
// |1: 1 | 2: 4 | 3: | 4: 와 같이 메모리가 존재한다고 가정.
let a = 1
let b = 4
// |1: 1 | 2: 4 | 3: | 4:
// |a: @1 | b: @2
console.log(a, b, a===b) // 1 4 false
b = a
console.log(a, b, a===b) // 1 1 true a와 b가 가리키는 주소가 동일함
a = 7
// |1: 1 | 2: 4 | 3: 7 | 4:
// |a: @7 | b: @2
console.log(a, b, a===b) // 7 1 false
let c = 1 // c에 할당된 숫자데이터가 이미 메모리에 존재하므로 b와 같은 주소를 가리키게 된다.
// |1: 1 | 2: 4 | 3: 7 | 4:
// |a: @7 | b: @2 | c: @1
console.log(b, c, b===c) // 1 1 true
// 원시 데이터는 쉽게 생긴게 다르면 다르고 생긴게 같으면 같다고 생각하면 된다.이처럼 같은 값을 가리키고 있으면 같은 메모리 주소를 가리키게 되어 === 연산에서 true가 리턴되고
다른 값을 재할당 하면 새로운 메모리 주소를 가리키고 그곳에 객체를 저장하게 된다.
Reference Type
: 가변성의 성질을 가진다.
- Object, Array, Map, Date, Set 등..
참조형 데이터는 객체의 내용이 가변적이므로 메모리상에 가변적인 크기로 저장된다.
따라서 같은 내용의 객체라도 생성될 때마다 다른 메모리 주소에 저장된다.
변수에는 객체가 저장된 메모리 주소가 저장된다.
let a = { k:1 }
let b = { k:1 }
console.log( a === b ) // 결과: false
a.k = 7
b = a
console.log(a, b, a === b) // 결과: {k:7} {k:7} true
a.k = 2
console.log(a, b, a === b) // 결과: {k:2} {k:2} true
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와 b를 처음에 같은 내용으로 할당하여도 비교 연산자의 값은 false가 도출된다.
b = a 구문을 통해 a의 메모리 주소를 b에 할당하게 되면 a와 b는 같은 메모리 주소를 가리키게 되고
비교 연산자 또한 메모리 주소가 같으므로 true를 도출한다.
여기서 기본형 변수와의 차이점이 발생하는데
기본형의 경우 같은 메모리를 가리키더라도 재할당을 하게 되면 새로운 메모리 주소를 참조하고 그곳에 객체를 할당하는데,
참조형의 경우 한쪽에서 수정하게 되면 새롭게 메모리 주소를 할당하지 않고 기존 메모리 주소에 있던 객체를 수정한다는 점이다.
여기서 알 수 있듯이 비교 연산자는 변수의 값 즉, 메모리의 주소를 비교하는 것을 알 수 있다.
여기서 var, let과 const의 의미 또한 다시 한번 짚고 넘어갈 수 있는데
var와 let은 메모리의 주소값이 바뀔 수 있다는 것을 의미하고
const는 메모리의 주소값이 바뀔 수 없다는 것을 의미한다.
따라서 객체같은 경우 const를 사용해도 객체의 내용을 바꿀 수 있다.
const a = {k:1}
const b = a
console.log(a, b) // 결과: {k:1}, {k:1}
a.k = 7
console.log(a, b) // 결과: {k:7}, {k:7}