[JS]데이터 불변성(Immutability)

변수에 값을 할당한다는 것은 값의 메모리 주소를 가리키는 것(참조) 임을 유의해야 한다.

Immutable type VS Mutable Type

불변성(Immutability)란 말 그대로 변하지 않는 것을 의미한다. 불변 데이터는 한번 생성되고 나면 그 뒤에는 변할 수 없다. 자바스크립트에는 원시 타입(primitive type)이 불변성을 띤다.

 

원시 타입(primitive type)의 종류

• Boolean
• String
• Number
• Null
• undefined
• Symbol

원시 타입은 메모리영역 안에서 변경이 불가능하며 변수에 할당할 때 완전히 새로운 값이 만들어져 재할당된다.

 

원시 타입 이외의 모든 값은 객체(Object) 타입이며 객체 타입은 변경 가능한 값(mutable value)이다.

즉, 객체는 새로운 값을 다시 만들 필요 없이 직접 변경이 가능하다는 것이다.

 

객체형 타입은 선언되는 순간 값 자체가 아닌 **새로운 메모리 주소를 생성**해 저장하기 때문에 객체 별로 새로운 주소가 생성된다. 따라서 동등 비교를 했을 경우 그 내용이 같더라도 false 값이 반환된다.

• Object
• Array
• Function

let a = 1
let b = 4
console.log(a, b, a === b)
b = a
console.log(a, b, a === b)
a = 7
console.log(a, b, a === b)
let c = 1
console.log(b, c, b === c)

실행 결과

원시 데이터들은 메모리에 한번 만들어지면 불변한다.

만약 d = 4를 만들면 숫자 데이터 4는 이미 메모리에 존재하기 때문에 d는 이미 만들어진 4의 메모리를 바라본다.

원시 타입은 생긴 것이 다르면 아예 다른 데이터라는 것이 불변성이다.

 

객체형 타입은 생긴 것이 똑같아도 서로 같은 데이터가 아닐 수 도 있다. 한번 알아보자.

let user1 = {
  name: 'Kim',
  address: {
    city: 'Seoul'
  }
};

let user2 = user1; // 변수 user2는 객체 타입이다.

user2.name = 'Lee';

console.log(user1.name); // Lee
console.log(user2.name); // Lee

위 코드를 보면 user2.name 값을 변경하니 user1의 값도 똑같이 변경된 것을 알 수 있다.
user1와 user2는 값이 변할 수 있는 객체이며 동일한 값을 가리키는 메모리 주소(변수)이기 때문이다.

 

참조형 데이터를 관리할 때는 할당 연산자를 쓰는 것이 의도치 않은 문제를 발생시킬 수 있기 때문에 따로 의도한 것이 아니라면 일반적으로 복사라는 개념을 통해 객체 타입의 변수들을 실제 메모리 상에서 분리해 준다.

 

복사에는 두 가지 종류가 있다.

 

얕은 복사와 깊은 복사