[JavaScript] 자바스크립트 불변성, 가변성

---

자바스크립트의 데이터 타입은 크게 원시타입과 객체타입으로 나뉜다.

 

원시타입(Primitive), 기본형	객체타입(Object), 참조형
Number String Boolean Null Undefined Symbol	Object Array Function

 

이 둘을 분류하는 기준에 대해 알아보자.

---

원시타입은 불변하고, 객체타입은 가변적이다.

변하지 않는다는 것 과 가변적이라는 것이 정확히 무엇일까?

 

---

원시타입

 

var a = 2
var b = a
b = 3
console.log(a, b)	// 2 3

 

a라는 변수에 #000이라는(예시) 주소값을 가진 메모리에 2를 할당한다.

변수에 원시타입을 바로 할당하지 않는다.

 

여기서 b에 a를 할당하면 b 역시 #000라는 주소값을 이용한다.

하지만 b에 3을 할당하면, 메모리에는 3이 존재하지 않기 때문에

#111이라는 새로운 주소값을 가진 메모리에 3을 저장한다.

 

또 다시 b = 4라고 할당했다고 가정해보자.

이러면 4를 새로운 #222라는 주소값을 가진 메모리에 저장한다.

 

그림으로 표현하면 이렇다.

 

#000	2	#111	3
#222	4	#333

 

이렇게 값이 달라질 때 마다 메모리를 사용하게 된다.

이렇게 되면 수정을 한다고 해도 새로운 값을 새로운 주소값에 넣는 것이기 때문에

불변한 것이 된다.

 

심지어 현재는 a = 2와 b = 4만 사용하는데

#111의 값은 아무도 이용하지 않는 불필요한 메모리 차지를 하게 됐다.

 

이를 이후에 가비지컬렉터로 정리할 수 있다.

 

---

객체타입

 

var c = {age: 2}
var d = {age: 2}
console.log(c === d)	// false

var e = c
e.age = 3
console.log(c.age, e.age)	//3 3

 

우선 c와 d에 같은 값의 객체를 할당했지만, 콘솔은 false가 뜬다.

왜냐면 객체는 생성시킬 때 마다 새로운 메모리에 할당되기 때문이다.

값이 같고 말고는 연관이 없다.

 

그러나 아래를 보면 e에 c를 할당한 후

e의 age값을 3으로 바꿨음에도 불구하고 c의 age값도 3으로 바뀐 것을 볼 수 있다.

이는 객체타입은 주소값을 참조하기 때문에, 값을 바꾸면 같은 주소값에 할당된 다른 변수의 값도 자연스럽게 바뀌는 것이다.

 

너무 위험하지 않은가?

나는 바꾼 적 없는데 엉뚱한 값이 바뀌어 에러가 발생한다면....

 

이 가변성의 단점을 해결하기 위해서는, 

값을 복사하는 방법이 있다.

 

var c = {age: 2}
var d = Object.assign({}, c)
d.age = 5
console.log(c.age, d.age)	//2 5

 

Object.assign 함수는 다른 주소값에 값을 복사해준다.

원시타입처럼 각자가 완전히 다른 객체가 되는 것이다.

---

c언어 포인터가 생각이 났다.

당시에 이해가 많이 힘들었었는데 다시 한번 봐야겠다.

틀린 내용은 언제나 피드백 주세요

 

---

참고:

불변객체? 불변성? 그게 뭐에요??!!

생활코딩 자바스크립트 immutability