[Javascript] ES6 문법 3 - 가변 변수와 불변 변수

ES6 문법 3. 가변 변수와 불변 변수

가변 변수 : 값을 수정할 수 있는 변수  vs  불변 변수 : 값을 수정할 수 없는 변수

기존 자바스크립트 문법과 ES6 자바스크립트 문법에서 변수 사용

ES6 이전 기존 자바스크립트 문법에서는 변수 선언에 var 키워드만을 사용했지만, ES6에서는 값을 수정할 수 있는 가변 변수를 위한 let 키워드와 값을 수정할 수 없는 불변 변수를 위한 const 키워드를 사용한다. let 키워드와 const 키워드를 통해서 수정 가능/ 불가능 를 코드만 읽어도 알 수 있어 유용하다.

 

• 가변 변수 키워드 let  :  읽거나 수정할 수 있음

let num = 1;
num = num * 3; //num = 3
let str = '문자';
str = '다른 문자'; //str = '다른 문자' 
let arr = [];
arr = [1,2,3]; //arr = [1,2,3]
let obj = {};
obj = { name : "새 객체" }; //obj = { name : "새 객체" }

• 불변 변수 키워드 const : 읽기만 가능함.

const num = 1;
num = 3; //자료형 오류 발생
const str = '문자';
str = '다른 문자'; //자료형 오류 발생
const arr = [];
arr = [1,2,3]; //자료형 오류 발생
const obj = {};
obj = { name : "새 객체" }; //자료형 오류 발생

위에 코드를 보면 불변 변수 키워드 const를 사용하여 선언한 변수들에 값을 다시 할당하여 오류가 발생하였다.

하지만 불변 변수는 값을 다시 할당할 수 없는 것이지 값은 변경이 가능하다. 즉, 불변 변수가 가리키는 것을 바꾸는 것이 아니라 가리키고 있는 것 안에서 변경이 가능하다는 것이다. 불변 변수의 값 변경이 가능한 이유는 아래 코드와 같이 모두 자바스크립트 내장 함수로 값을 변경했기 때문이다. 

=> num 이 1을 가리키다가 3을 가리키는 것은 불가능하지만 내장 함수를 이용해 num 안의 값을 변경은 가능.

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

const obj2 = {};
obj['name'] = '내이름';  //obj2 = { name : '내이름' }
Object.assign(obj2, { name : '새이름'} );  //obj2 = { name : '새이름' }
delete obj2.name;  //obj = {}

위 코드는 불변 변수 키워드 const 로 선언된 변수인 arr2와 obj2 의 값들이 자바스크립트 내장함수인 push, splice, pop, Object.assign() 등을 통해서 변경되는 코드이다. 하지만 위 코드는 모두 " 무결성 제약 조건에 위배되었다 " 는 경우에 해당한다. 

 

[참고] 무결성 제약조건

무결성 제약조건이란 데이터베이스의 정확성, 일관성을 보장하기 위해서 저장, 삭제, 수정 등을 제약하기 위한 조건을 말한다. 주요 목적은 데이터베이스에 저장된 데이터의 무결성을 보장하고 데이터베이스의 상태를 일관되게 유지하는 것이다.

 

[참고] Array.splice() 메서드

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경하는 메서드이다.

형식 : array.splice( start[  , deleteCount[  , item1[  , item2[  , ...  ]  ]  ]  ] )

  - start : 배열 변경을 시작할 인덱스 (배열의 길이보다 크면 배열의 길이로 설정, 음수라면 뒤에서부터 카운트)

  - deleteCount : 배열에서 제거할 요소의 수 (이를 생략하거나 값이 (배열의 길이 - start) 보다 크면 모든 요소 제거, 0 이하는 제거 x)

  - item1, item2, ... : 배열에 추가할 요소 (아무 요소도 지정하지 않으면 요소를 제거하기만 함.)

 

[참고] Array.push() 메서드와 Array.pop() 메서드

push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고 배열의 새로운 길이를 반환하는 메서드이다.

pop() 메서드는 배열에서 마지막 요소를 제거하고 그 요소를 반환하는 메서드이다.

 

무결성을 유지하면서 불변 변수의 값을 수정하는 방법

무결성을 유지한채 불변 변수의 값을 수정하려면 수정할 불변 변수를 새로 만들어 새값을 할당하는 방법으로 수정해야 한다. 즉, 수정한다기보다 새로 정의한다 는 개념에 가깝다. 

const num1 = 1;
const num2 = num1 * 3; 
const str1 = '문자';
const str2 = str1 + '추가';

const arr3 = [];
const arr4 = arr3.concat(1);
const arr5 = [...arr4, 2, 3];
const arr6 = arr5.slice(0,1);
const [first, ...arr7] = arr5;  //arr7 = [2,3]

const obj3 = { name : "내이름", age : 20 };
const objValue = { name : "새이름", age : obj3.age };
const obj4 = { ...obj3, name : "새이름" };  //obj4 = {name : "새이름" , age : 20}
const { name, ...obj5 } = obj4;  //obj5 = { age : 20 }

배열에 새로운 값을 추가할 때는 push() 대신 concat 함수를, 삭제할 때는 pop(), shift() 함수 대신 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)

* slice와 concat 은 바로 뒤에서 조금 더 다루겠습니다!