[JS] JavaScript 원시형 데이터 불변성 정리

 

 

🍋 JS 불변성

 

데이터 불변성 (Immutability)

 

• 원시형 데이터 : 불변, (String, Number, Boolean, undefined, null)
• 참조형 데이터 : 가변, (Object, Array, Function)

원시 값 - 용어 사전 | MDN

 

• JavaScript에서 원시 값(primitive, 또는 원시 자료형)이란 객체가 아니면서 메서드도 가지지 않는 데이터입니다.

 

// 메모리 주소
// |1.        |2.         | 3.          | 4.
// |1.  {           }      |2.  {           }    | 3.  {           }

let a = 1
let b = 4
console.log(a, b, a === b) // 다른 메모리 주소에 배정되어 있기 때문에 false
b = a
console.log(a, b, a === b) // true
a = 7
console.log(a, b, a === b) // false
// 새로운 원시데이터가 기존 메모리에 저장되어 있다면,
// 새로운 메모리 주소에 할당하는 것이 아니라 1번 메모리에 저장된 1 을 바라보게 됨.
// => 데이터 불변성 (기존의 데이터는 변하지 않는다.)

// 원시데이터는 생긴게 같으면 같고, 다르면 다르다.
// 그러나 참조형데이터는 생긴것이 같아도 저장된 메모리 주소가 다르면 같지 않을 수 있다.
let c = 1
console.log(b, c, b === c)

 

let a = { k: 1}
let b = { k: 1}
console.log(a, b, a === b) // 메모리 주소가 달라서 false
// 참조형 데이터는 불변성이 없기 때문에 가변한다.

a.k = 7
b = a // 1번의 메모리 주소를 바라보도록 바뀜.
console.log(a, b, a === b) // true

a.k = 2 // b도 a와 같은 메모리 주소를 바라보고 있어서 b의 값도 바뀜.

// 참조형 데이터를 바꿀 때 참조하고 있는 변수들을 잘 파악해야 함.
console.log(a, b, a === b) // true
let c = b // c도 1번 메모리를 바라보게 됨.
console.log(a, b, c, a === c) // true

a.k = 9
console.log(a, b, c, a === c) // a의 변수에서 데이터를 바꾸어 b,c 모두 데이터가 바뀜. // true