[ES6 문법] 가변 변수와 불변 변수

 

Do it! 리액트 프로그래밍 정석 책을 보면서 공부한 내용을 정리하는 글입니다.

 

---

 

 

가변 변수 와 불변 변수의 의미

 

- 기존 자바스크립트 문법은 변수 선언에 var 키워드를 사용했다.

가변 변수

- 값을 수정할 수 있는 변수
- let 키워드
- 읽거나 수정할 수 있음
- 재선언 X , 재할당 O

let jin = "유진";

jin = "yujin"

console.log(jin)
=> yujin

...

let jin = "유진";

let jin = "yujin"

console.log(jin)
=> error​

불변 변수

- 값을 수정할 수 없는 변수
- const 키워드
- 읽기만 가능함
- 재선언 X, 재할당 X

const jin = "유진"

console.log(jin)
=> 유진

...

const jin = "유진"
jin = "진"

console.log(jin)
=> error

...

const jin = "유진"
const jin = "진"

console.log(jin)
=> error

- 불변 변수는 값을 다시 할당 할 수는 없지만 값을 변경할 수 있음
( 자세한 것은 아래에서 계속 )

---

 

불변 변수의 값을 변경하는 방법

 

자바스크립트의 내장 함수를 사용하기

1. push ()

const arr = [];
arr.push(1);

console.log(arr)
=> [1]​

2. splice()

const arr = [];
arr.push(1);
arr.splice(0,0,0); // splice(배열의 변경을 시작하는 인덱스, 제거할 요소의 수, 추가할 요소)

console.log(arr)
=> [0,1]

3. pop()

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

console.log(arr)
=> [0]

4. 객체 추가

const obj = {};
obj['name'] = "유진";

console.log(obj)
=> {name: '유진'}​

5. assign()

const obj = {};
Object.assign(obj, { name : "유진" });

console.log(obj)
=> { name : "유진" }

6. delete

const obj = {};
Object.assign(obj, { name : "유진" });
delete obj.name

console.log(obj)
=> {}

불변 변수의 값을 수정할 수 없는데 수정하는 것을 "무결성 제약 조건에 위배되었다" 라고 함

 

무결성을 유지하면서 불변 변수의 값을 변경하기

1. 수정할 불변 변수를 새로 만들어 새 값을 할당하기 ( 새로 정의한다 )

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

console.log(num2)
=> 3

const str1 = "문자";
const str2 = str1 + "추가";

console.log(str2)
=> 문자추가

2. concat()

const arr = [];
const arr2 = arr.concat(1)

console.log(arr2)
=> [1]

3. slice()

const arr = [1, 2, 3, 4];
const arr2 = arr.slice(0, 3);

console.log(arr2)
=> [1,2,3]

4. 전개연산자 사용 (...)

const arr = [1, 2, 3, 4];
const arr2 = [...arr, 5, 6];

console.log(arr2)
=> [1, 2, 3, 4, 5, 6]

새 값을 할당하는 것이 아니라 기존의 값을 이용 (추출) 하여 새 불변 변수에 할당하는 것이므로 괜찮음.

 

---

 

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

 

- 불변 변수를 사용하면 무결성 제약 규칙에 의해 변수가 변하는 시점을 쉽게 파악할 수 있음

- 수정 전과 수정 후의 변수 값을 비교할 수 있어 가변 변수보다 더 유용함

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

무결성 함수는 객체나 배열을 직접 수정하는 것이 아니라 새 결과를 반환하는 함수를 말함