[JavaScript] 불변성

JavaScript의 자료형은 크게 원시형과 객체형으로 나눌 수 있습니다.

원시형 자료형은 아래와 같습니다.

• 숫자형(number)
• BigInt
• 문자형(string)
• 불린형(boolean)
• Symbol
• null
• undefined

원시형 자료형의 특징은 불변하다는 것입니다.

let a = 1;
let b = a;

위와 같은 예시를 봅시다.

원시형 자료형의 경우 값을 할당할 떄 메모리 주소값을 이용해 값을 할당합니다.

let b=a라는 문장을 통해 b 변수에 a 값을 할당할 때 역시 a의 값을 할당하는 것이 아닌 a의 주소값을 할당하는 것입니다. 

원시형 자료형은 값을 할당할 떄마다 새로운 주소값을 할당하는 형식으로 동작하기 때문에 불변한 것이라 얘기할 수 있습니다.

 

아래 객체형 자료형을 이용한 예시문을 살펴보시겠습니다.

let user1={
    name:'jason',
};
let user2=user1;
console.log(user1===user2); // true

user2.name='jacob';
console.log(user1); // { name: 'jacob' }
console.log(user2); // { name: 'jacob' } 
console.log(user1===user2); // true

변수 user2에 user1을 할당했고, user2의 name 속성을 jacob으로 변경했더니 user1의 속성 역시 jacob으로 변경이 된 것을 확인하실 수 있습니다.

이는 객체 타입에서 주소값을 참조하기 떄문에 let user2=user1에서 객체의 주소값을 할당해주었고, 이 후 user2 값을 변경해주었을 때 user1의 속성이 변하게 된 것입니다.

따라서 안전하게 값을 복사하기 위해서(불변성을 지키기 위해서)는 Object.assign 혹은 ... 연산자(spread 연산자) 등을 활용하는 것이 좋습니다.

 

1) spread 연산자를 활용한 경우 

let user1={
    name:'jason',
};
let user2={...user1};
console.log(user1===user2); // false

user2.name='jacob';
console.log(user1); // { name: 'jason' }
console.log(user2); // { name: 'jacob' } 
console.log(user1===user2); // false

 

2) Object.assign 함수를 활용한 경우 

let user1={
    name:'jason',
};
let user2=Object.assign({}, user1);
console.log(user1===user2); // false

user2.name='jacob';
console.log(user1); // { name: 'jason' }
console.log(user2); // { name: 'jacob' } 
console.log(user1===user2); // false