데이터 불변성

데이터 불변성(Immutability)란

자바스크립의 데이터는 크게 두가지로 분류할 수 있는데
바로 원시 데이터와 참조형 데이터가 된다.

원시 데이터는 말 그대로 원시적이고 기본적인 데이터를 뜻하는데
String,Number,Boolean,undefined,null이 있다.

참조형 데이터는 object, Array, Function이 있다.

예를 들어

원시 데이터는

let a = 1
let b = 4
console.log(a,b,a===b)//1 4 false

윗코드 같은 경우는 a와b가 서로 다른 메모리 주소를 바라보고 있다.
이를 첫번째 메모리 주소 두번째 메모리 주소라고 하겠다.(이하 첫번째,두번째)
그렇기 때문에 서로 비교할 경우 바라보고 있는 메모리 주소가 다르기 때문에 false라는 값이 나오는 것이다.
당연히 1과4가 다르기 때문에 그런 것이 아니다 다른 메모리 주소를 바라보고 있기 때문이다.

그럼 윗코드에서 b=a가 같다고 한다면 어떤 일이 일어날까

b=a
console.log(a,b a===b)// 1 1 true

사실 위의 코드는 같다고 하는게 아닌 b를 a의 메모리 주소를 바라보게
한다는 표현이 더 맞다.
그렇기 때문에 같은 메모리 주소(첫번째)를 바라보고 있기 때문에 true라는 값이
반환되는 것이다.

여기서 또 a=7이라는 값을 할당하면 어떻게 될까

a=7
console.log(a,b a===b)// 7 1 false

이럴경우 세번째의 메모리주소에 7이 할당되게 되고 a는 세번째를
바라보게 된다.
그렇기 때문에 false라는 값이 반환 된다.

여기서 가장 중요하기 신기한 것은 원시데이터는 사실 메모리라는
것을 이해하거나 하지 않아도 괜찮다.
그 이유는 값이 서로 다를 경우 무조건 다르다고 나오기 때문이다.
사실 위에서 바라보는 것은 1과4와7이 다르기 때문에 false가 나오는게
당연하다.
이렇게 이해해도 원시데이터는 문제가 되지 않는다는 뜻이다.
하지만 깊숙히 이해하기를 원한다면 바라보는 메모리 주소가 다르기 때문에 false가 나온다고 이해하면 되겠다.

그럼 새로운 변수를 만들어서 1을 할당하고 값이 1인 b와 비교하면 어떤 일이 생기게 될까

let c=1
console.log(b,c,b===c)// 1 1 true

이럴 경우 네번째에 값을 할당하는게 아닌 첫번째의 값을 바라보게 된다.
위에서 말했듯이 서로 같기 때문에 true가 나오고 깊숙히 보면
서로 바라보는 메모리 주소가 같이 때문에 true가 나온다.

그리고 이것이
데이터 불변성이라고 한다.

만약 새로운 원시데이터를 만들었는데 기존의 메모리에 들어 있다면
새로운 메모리 주소에 할당하는게 아닌 기존의 메모리주소를 바라보게 해준다는 것이다.

이제 참조형 데이터를 알아보자

참조형 데이터는 이러한 불변성을 가지고 있지 않기 때문에
사용하는 방법이 다르다.

let a = {k:1}
let b = {k:1}

console.log(a,b a===b)// {k:1} {k:1} false

만약 원시데이터였다면 서로 바라보는 메모리 주소가 같기 때문에
true가 나왔겠지만 참조형 데이터는 값이 같더라도 바라보는 메모리
주소가 다르기 때문에 false가 나온다.
(a는 첫번째메모리 주소 b는 두번째 메모리 주소에 할당되어 있다)

한마디로 원시데이터의 불변성과 다르게 값이 같다고 무조건 같은 메모리 주소를 바라보지 않는 다는 뜻이다.

그럼 같은 메모리 주소를 바라보게 하려면 어떻게 해야될까

a.k = 7
b = a
console.log(a,b, a===b)// {k:7} {k:7} true

아래와 같이 b=a에 할당하게 될 경우 같은 메모리 주소를 바라보게 된다.
때문에 b.k도 7로 바뀐 것을 확인 할 수있다.
같은 값을 바라보기 때문에 b.k를 10으로 바꿔도 a값 또한 10으로 바뀌는 것을 알 수 있다.
한마디로 참조형 데이터는 서로 바라보는 메모리 주소가 같을 경우
한쪽의 데이터만 수정하여도 같은 메모리 주소를 바라보는 데이터의 값이
다 변경 된다는 뜻이다.

만약 새로운 데이터를 만들어 b나 a로 할당하면 어떤 일이 생길까

let c = b
console.log(a,b,c a===c)// {k:7} {k:7} {k:7} true

c또한 b와 같은 곳을 바라보고 a도 같은 곳을 바라보니 셋은 같은 메모리
주소를 바라보게 된다.