리액트 ES6 문법 - 가변 변수와 불변 변수

아래 책을 읽고 정리한 내용입니다.

https://m.yes24.com/Goods/Detail/87631428

3. 가변 변수와 불변 변수

⇒ 기본엔 변수 선언에 var를 사용했지만 ES6에서는 let, const를 사용한다.

ES6의 가변 변수 사용 방법 알아보기

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

• let으로 선언한 변수는 읽거나 수정할 수 있다

ES6의 불변 변수 사용 방법 알아보기

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

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

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

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

• const는 값을 다시 할당할 수 없는 것이지 변경은 가능하다!

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

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

• 자바스크립트 내장 함수(push, splice)를 사용하면 값 변경이 가능하다!
• 이건 ‘무결성 제약 조건에 위배되었다’ 라고 한다
  • 개발자 스스로 불변 변수를 어떻게 관리해야 할지 정해야 한다는 소리~
  • 이 책에서는 불변 변수로 정의된 배열/객체를 내장 함수로 수정하는 것을 암묵적으로 금지하여 무결성을 유지할거래~
• 무결성을 유지하면서 불변 변수의 값을 수정해야 하는 경우
  • 불변 변수를 새로 만들어 새 값을 할당하는 방법을 써야 한대! 새로 정의한다는 개념에 가까운거지

const num1 = 1;
const num2 = num1 * 3; // num2 = 3

const str1 = '문자';
const str2 = str1 + '추가'; // str2 = '문자추가'

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

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

• 배열에 새로운 값을 추가할 때 - push()대신 concat()
• 배열에 새로운 값을 삭제할 때 - pop(), shift() 대신 slice(), concat() + 전개 연산자(+)
  • 이건 새 값을 할당하는 것이 아니라 기존의 값을 이용(추출)하여 새 불변 변수에 할당하는 것이므로 ㄱㅊ

기존 자바 스크립트의 가변 내장 함수와 무결성 내장 함수 비교

불변 변수 장점

• 무결성 제약 규칙에 의해 변수가 변하는 시점을 쉽게 파악할 수 있음
• 가변 변수보다 더 유용함
• 실제로 실무에서도 가변 변수보다 불변 변수를 더 많이 사용함