JS | 자바스크립트 불변성이란? 원시타입 vs 참조타입

불변성을 지켜야 한다  무슨 말일까.. 모르기 때문에 찾아보는 공부!

 

 

불변성이란 ?

사전 적으로  불변성이란 값이나 상태를 변경 할 수 없는 것 이다.

자바스크립트에서 객체가 생성된 이후 그 상태가 변경 할 수 없는 것을 의미한다.

여기에서 상태를 변경할 수 있는 것과 값을 재할당하는 것은 다르다는 것 을 알아야한다.

 

let a = 10 ;
let b = a ;
a = 20;
console.log(a,b); // 20 10

위의 코드는 a에 10을 할당하고 b -> a 가 가르키는 주소 를 가리킵니다.

이때 a의 값을 20으로 변경시켜준다.

 

만약 값을 직접 변경하는 것이면 a,b 둘다 20을 출력해야한다.

하지만 자바스크립트에서 number 값은 불변성을 유지 해서 새로운 a =20이라는 값을 가지는 주소를

a에 할당하게 되기 때문에 위와 같은 결과가 나온다.

좀 더 이해하자면 원시타입 VS 참조 타입으로  불변성을 설명해보겠다

 

Immutable VS Mutable 유지하는 값들과 그렇지 않은 값들이 나누어진다.

 

변수에 값 할당하기

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

let a = 'Hello GG' ;

Hello GG 라는 값이 메모리에 생성이 되었고 ,

a 라는 변수가 이 메모리 주소를 가르키도록 참조 하였다.

 

Immutable Type  = 원시타입

불변데이터는 한번 생성되면 그 이후 변할 수 없다.

JS 에서 원시 타입으로는  number , string , null , undefined , symbol , boolean

과 같은 타입들은 불변성을 유지하는 타입들이다.

 

원시 타입은  = 불변한다.

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

 

let a = 'e';
a = 'ee';

첫 번째 'e'는 string 타입의 값이 메모리에 생성이 되었다.

a 는 메모리에 생성된 'e'를 가르킨다.

두 번째 'ee'는 새로운 string타입의 새로운 값이 새로 생성이 되었고 , a 는 다시 'e' 가 아닌 'ee' 를 가르킨다.

---

 Mutable Type 참조 타입

원시 타입을 제외한 모든 값은 객체 (object) 타입들은 변경 가능한 값이다.

객체는 새로운 값이 만들어지지 않고 직! 접!  변경이 가능함

코드 로 살펴보면 

let a = {           a 에 {} 새로운 객체를 할당한다.
name : 'candy'
};

let b = a ;
a.name = 'choco';

console.log(b.name) // icecream
console.log(a === b) //true

 설명

a 에 {} 새로운 객체를 할당한다.

b 는 a가 가르키고 있는 객체의 주소 (name: 'candy')를 똑 같이 가르킨다.

a.name a가 가르키고 있는 객체의 name 에 'choco' 라는 string 문자열 데이터를 다시 할당한다.

콘솔로그 console.log

b.name 을 찍으면 icecream 이 출력이 된다.

즉 원래라면 a 가 가르키고 있는 candy 라는 값이 였는데 {name: choco} 라는  변화된 ! 변경된 데이터 주소를 참조 하고 있다.

 a === b 이 둘의 객체는 똑같은 데이터를 가리키고 있기 때문에 true 값이 출력이 된다.

 

---

Array 배열 값을 변경 할 때 주로 새로운 배열을 반환하는 map() 이나 [...arr] 이런 식으로 불변성을 지키는 것이 좋다.

 

불변성을 지키는 것이 왜 중요한가요?

 개발자로서 유지보수가 가능하고 가독성이 좋은 코드를 작성해야한다.

무분별한 상태의 변경을 막을 수 있다. 만약 무분별하게 상태를 참조하거나 변하면.. 현재 프로그램이 어떻게 돌아가는지 파악하기 어렵다.

무분별한 상태 변경 때문에 프로그램이 터지게 되는 가장 대표적인 상황은 바로 “전역 변수의 남용”이다.

 

자바스크립트에서 전역 변수의 사용을 아예 금지하는 컨벤션을 추천하는 것도 바로 이 이유이다.

불변성을 지키지 않을 시 사용할 데이터가 어디에서 어떻게 바귀었는지 알기 어렵고 , side effects 나 버그로 이어지게 된다.

그렇기 때문에  불변성을 지켜서 명시적으로 작성된 코드는 다른 개발자가 내 코드를  봤을 때  어디에서 데이터가 변화 됬는지 알수 있도록 !