JavaScript & React

02-3 가변 변수와 불변 변수

Jimin Hong 2023. 9. 28. 21:28

ES6 이전에는 var 키워드만으로 값을 선언할 수 있었다. var는 재선언과 재할당이 가능한 선언 방식으로, 예상치 못한 버그를 초래할 위험이 있었다. 

 

❗ var 키워드가 가지는 문제 ⌄

 

1. var로 선언된 변수는 function scope를 가진다(함수 코드 블록인 {}만 scope로 인정한다). 예를 들면, if 블록 내에서 선언된 var 변수는 if 블록 외부에서도 접근할 수 있게 된다! 이는 변수의 충돌을 가져올 수 있다.

 

2. 자바스크립트의 모든 선언에는 호이스팅이 발생한다. 그런데 var로 선언된 변수는 선언되는 동시에 undefined로 초기화까지 이루어지기 때문에, 변수가 선언되기 전부터 참조가 가능해진다.


호이스팅에 대해서는 이 글 참고: https://jm3789.tistory.com/22

 

이러한 문제를 해결하기 위해 ES6에서는 letconst라는 키워드가 추가된다.

이들은 var 키워드와 다르게 재선언이 불가능한 선언방식이다.

 

 

let

가변 변수를 선언한다. 재할당이 가능하다(= 값이 변경될 수 있다).

 

const

불변 변수를 선언한다. 재할당이 불가능하다.

+ 선언할 때 할당을 같이 하지 않으면 에러가 발생한다.

 

 

 


 

그러나 js 내장함수를 이용하면 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 = {}

 

불변 변수의 값이 변경되었을 때, '무결성 제약 조건에 위배되었다'라고 한다.

무결성을 해치지 않으려면 해당 변수에 새값을 할당하지 않고, 수정할 불변 변수를 새로 만들어 새값을 할당하는 게 좋다.

 

// 수정할 불변 변수를 새로 만들어 새값을 할당
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 objValue = { name: '새이름', age: obj3.age };
const obj4 = { ...obj3, name: '새이름' }; // obj4 = { name: '새이름', age: 20 }
const { name, ...obj5 } = obj4; // obj5 = { age: 20 }

 

위의 코드와 같이, 객체나 배열을 직접 수정하지 않고 새 결과를 반환하는 무결성 내장 함수를 사용하는 것이 좋다.

가변 내장함수와 무결성 내장함수의 예시는 다음과 같다.

 

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

 

 

 

 

'JavaScript & React' 카테고리의 다른 글

02-5 화살표 함수  (0) 2023.10.01
02-4 클래스  (0) 2023.09.30
02-2 전개 연산자  (0) 2023.09.28
02-1 템플릿 문자열  (0) 2023.09.26
01-3. 리액트 앱 수정하기  (0) 2023.09.25