<React 파헤치기-04> ES6주요문법 - 2. 가변 변수와 불변 변수

기존 JS 문법에서는 var 키워드를 사용했으나 ES6에서는 값을 수정할 수 있는 가변변수 let 키워드와 값을 수정할 수 없는 불변 변수 const 키워드를  사용한다.

 

가변 변수

가변 변수는 let 키워드로 선언한다. let으로 선언한 변수는 우리가 편하게 변수를 사용하 듯 읽거나 수정할 수 있다.

 

불변 변수

불변 변수는 const 키워드로 선언한다. const로 선언한 변수는 Java의 전역 변수처럼 읽기만 가능하고, const로 선언한 변수에 값을 다시 할당하면 오류가 발생한다.

 

그러나 불변 변수 const 는 값을 다시 할당할 수 없는 것이지 값을 변경할 수는 있다.

 

이게 무슨 말인가? 아래 코드 예시를 통해 배열이나 객체를 불변 변수로 선언한 후 JS 내장함수를 이용하여 값을 변경한 모습을 확인해보자.

const testArray = [];

testArray.push(1);	 //testArray = [1];
testArray.splice(0,0,0); // testArray = [0,1];
testArray.pop(0);	// testArray = [1];

const TestObject = {};
TestObject['icecream']='vanilla';		     // TestObject = {icecream = 'vanilla'}
Object.assign(TestObject, {icecream : 'chocolate'}); // TestObject = { icecream ='chocolate'}

분명 불변 변수는 값을 수정할 수 없다고 했는데 내장함수로 변경이 가능한 점은 매우 이상하다.

이를 '무결성 제약 조건에 위배되었다.' 라고 한다. 이러한 부분에 있어서는 프로그램을 짜는 개발자 스스로가 불변 변수를 어떻게 관리할 지 정해야 한다(불변 변수를 내장 함수로 수정하는 것을 스스로 금지하는 것 등의 방법).

 

만약 무결성을 유지하면서 불변 변수의 값을 수정하고싶다면 수정할 불변 변수를 새로 만들어 값을 새로 할당하는 방법을 사용해야 한다. const 로 선언된 배열에 새로운 값을 추가할 때는 push() 대신 concat()을 사용하고, 삭제할 때는 shift()나 pop() 대신 slice(), concat() 함수에 전개연산자를 조합해 사용하자.

가변 내장 함수	무결성 내장 함수
push(...items)	concat(...items)
splice(s, c, ...items)	slice(0, s) .concat(...items, slice(s+c))
pop()	slice(0, len-1)
shift()	slice(1)