javascript 불변성 정확하게 설명해드립니다 -YEOL

 

 

 

 

-javascript Type 설명

 

javascript에서 데이터 타입은 2가지로 나뉩니다. 원시 타입과 참조 타입입니다.

원시 타입은 number(숫자), boolean(논리), string(문자), undefined(초기화 안 함), null(없다고 초기화)가 있습니다.

초기화 안해주면 undefined인거 설명하는 이미지

 

참조 타입은 array(배열), function(함수),  object(객체)가 있습니다. 

왜 javascript 는 데이터 타입을 크게 2가지로 나누었을까요? 차이는 저장 방식에서 나옵니다.

 

 

 

-javascript 메모리 저장 방식

 

javascript는 값을 저장할 때 변수와 값을 나누어 저장해줍니다.

이 말이 어떤 말이냐면 x= 2 라면 변수 x를 저장하는 메모리 따로 값 2를 저장하는 메모리 따로 저장하는 개념이란 뜻입니다.

 

원시 타입 예제를 통해 설명드리겠습니다.

 

-예시 코드-

let x = 3;   //원시타입
let y = 5;
let z = x;

console.log(x); // 3   *100
console.log(y): // 5   *101
console.log(z): // 3   *100

 

주소	100	101	102
메모리	x = *200	y = *201	z = *200

주소	200	201	202
메모리	3	5

 

x =  데이터 3이 저장되어있는 200 주소 사용      y =  데이터 5가 저장되어있는 201 주소 사용

z =  데이터 3이 저장되어있는 200 주소 사용  

 

변수는 주소를 가진 채로 메모리에 변수명을 보존하고 있고  값은 값 자체를 메모리에 보존하고 있습니다. 

z = x 같은 식을 만들게 된다면 같은 주소를 공유하여 메모리를 사용합니다.

 

만약 이상태에서 값을 바꾸어 준다면 어떻게 될까요?

-예시 코드-

let x = 3;   //원시타입
let y = 5;
let z = x;

z = 7;   //이걸해주면 

console.log(x); // 3   *100
console.log(y): // 5   *101
console.log(z): // 7   *102

 

주소	100	101	102
메모리	x = *200	y = *201	z = *202

주소	200	201	202
메모리	3	5	7

 

x =  데이터 3이 저장되어있는 200 주소 사용      y =  데이터 5가 저장되어있는 201 주소 사용

z =  데이터 7이 저장되어있는 202 주소 사용  

 

원시 타입의 경우 z의 값을 변경한다면 새로운 메모리 공간에 값을 넣어주고 그 주소를 사용합니다. 

 

 

하지만 참조 타입의 경우 방식이 달라집니다.

 

-예시 코드-

let obj ={
     a:10,
     b:21
}

let copy = obj;
console.log(obj);
copy.b= 0;
console.log(obj);

 

주소	100	101	102
메모리	obj = *200~*201	copy = *200~*201

주소	200	201	202
메모리	a = *300	b = *301

주소	300	301	302
메모리	10	21

 

눈치채셨나요?

 

원시 타입의 경우 값을 변경한다면 새로운 메모리 공간에 값을 만들어주었는데 참조 타입의 경우는

copy의 값을 변경했더니 원래 object의 값도 변경이 돼버렸습니다. 

 

 

왜인지 이해하기 쉽게 설명드리겠습니다. 코딩하면서 아래의 표와 함께 진행해주시면 이해하시기 좋습니다.

 

주소	100	101	102
메모리	obj = *200~*201	copy = *200~*201

주소	200	201	202
메모리	a = *300	b = *301

주소	300	301	302
메모리	10	21 -> 0

 

저희는 copy.b의 값을 0으로 변경했습니다. 즉 201의 값을 변경했기 때문에 301 이 0 이 됩니다.

하지만 100과 101 은 아무것도 모른 채 주소를 유지하고 있는 것입니다. 저희는 copy.b만 변경했고 그 주소에 해당하는 값만 변경했거든요.

그래서 301 은 0이 되고 원본도 결국 object.b 가 0으로 표현되는 것입니다.

 

-결론-

 

원본을 보존하기 위해 카피본을 사용하는 경우가 많고 그렇기 때문에 이 부분은 큰 문제가 되겠죠?

그래서 이러한 불상사를 막기 위해 불변성 유지 = (카피본을 바꿔도 원본은 변경되면 안 됩니다) 

를 하라는 말이 나온 것입니다.

 

javascript 불변성에 대해 간단히 이해하셨길 바랍니다. 성실한 코딩 하세요.