가변변수와 불변 변수

가변변수
가변변수는 let키워드로 선언한다. let으로 선언한 변수는 읽거나 수정할수 있다. let키워드를 사용하면 이 변수를 수정해도 되는것인지 코드만 읽어도 알수있어 유용하다.

불변변수
불변변수는 const키워드로 선언한다. const로 선언한 변수는 읽기만 가능하다. const로 선언한 변수에 값을 다시 할당하면 오류가 발생한다.
그런데 불변변수는 값을 다시 할당 할 수 없는것이지 값을 변경할 수는 있다.

const num = 1;
num = 3; // 타입 에러가 발생합니다

const str = '문자';
str = '새 문자'; // 타입 에러가 발생합니다

const arr = [];
arr = [1, 2, 3]; // 타입 에러가 발생합니다

const obj = {};
obj = { name: '내 이름' }; // 타입 에러가 발생합니다

다음은 배열이나 객체를 불변변수로 선언하고 자바스크립트 내장함수로 값을 변경한것이다.

const arr2 = [];
arr2.push(1); // arr2 = [1]
arr2.splice(0, 0, 0); // arr2 = [0,1] (0번째 자리에 삽입(0)한다 0을)
arr2.splice(0, 1, 2); // arr2 = [0,1] (0번째 자리에 1개를 2로 대체한다)
arr2.pop(); // arr2 = [1]

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

arr2나 obj2는 분명 불변변수지만 자바스크립트 내장함수(push, splice)를 사용하니 값을 변경할수 있다. 여기서부터는 개발자 스스로가 불변변수를 관리하여 무결성을 유지하는 방향으로 코드를 작성해야한다.

예를들어 새로운 값을 추가할때는 push()대신 concat함수를, 삭제할때는 pop(),shift() 대신 slice(), concat()함수에 전개연산자를 조합하여 사용한다.

이렇게하면 새값을 할당하는것이 아니라 기존의 값을 이용(참조)하여 새 불변 변수에 할당하는것이 되므로 이방법을 권장한다.

가변변수와 불변변수를 활용한예

const arr = [1, 2, 3];
// 가변 변수를 사용한 예
for (let i = 0; i < arr.length; i++) {
   //console.log(arr[i]); // 1,2,3
}
// iterator 방식의 for-in 루프와 함께 불변 변수를 사용한 예
for (const index in arr) {
   //console.log(index); // 0,1,2

}
// forEach 함수를 활용한 예
arr.forEach((item, index) => {
   console.log(item); // 1,2,3
   console.log(index); // 0,1,2
});

//불변변수(const)로 선언한 데이터는 가변변수와 불변변수를 활용한 반복문으로 조회할수있다.

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