ES6 이전에는 var 키워드만으로 값을 선언할 수 있었다. var는 재선언과 재할당이 가능한 선언 방식으로, 예상치 못한 버그를 초래할 위험이 있었다.
1. var로 선언된 변수는 function scope를 가진다(함수 코드 블록인 {}만 scope로 인정한다). 예를 들면, if 블록 내에서 선언된 var 변수는 if 블록 외부에서도 접근할 수 있게 된다! 이는 변수의 충돌을 가져올 수 있다.
2. 자바스크립트의 모든 선언에는 호이스팅이 발생한다. 그런데 var로 선언된 변수는 선언되는 동시에 undefined로 초기화까지 이루어지기 때문에, 변수가 선언되기 전부터 참조가 가능해진다.
호이스팅에 대해서는 이 글 참고: https://jm3789.tistory.com/22
이러한 문제를 해결하기 위해 ES6에서는 let과 const라는 키워드가 추가된다.
이들은 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 |