const
const는 블록의 문맥 내에서 재할당할 수 없는 변수 선언이다. 즉, 한 번 선언하면 변경할 수 없다.
그러나 const에 할당된 값이 불변값이 되지는 않는다. 변수를 재할당할 수는 없지만, 값을 바꿀 수는 있다.
다음 예제를 보자. const로 선언한 배열(discountable)에 원소를 추가할 수 있다.
const discountable = [];
...
for (let i = 0; i < cart.length; i++) {
if (cart[i].discountAvailable) {
discountable.push(cart[i]);
}
}const를 통한 변수 선언의 장점을 살리기 위해선 조작(mutation)을 피하는 것이 좋다.
이를 조작이 없는 코드로 변경하면 다음과 같다.
const discountable = cart.filter(item => item.discountAvailable);const를 사용하는 이유
값을 할당한다는 것은 단순히 정보를 선언하는 것뿐만 아니라, 무엇을 정보를 할지에 대한 신호를 보내는 것이다.
따라서 코드를 검토할 때 해당 변수를 신경 쓰지 않아도 된다는 정보를 검토자에게 알려주는 역할을 한다.
let vs var
ES6의 등장 이후로 변수 재할당이 이루어지는 경우엔 let을 사용한다.
var은 어휘적 유효 범위(lexical scope)를 따르는 반면, let은 블록 유효 범위(block scope)를 따른다.
let과 const는 같은 유효 범위 내에서 같은 이름의 변수를 다시 선언할 수 없으나, var은 같은 유효 범위에서 같은 이름의 변수를 재선언할 수 있다.
var로 할당한 변수는 함수 유효 범위(엄밀히 말하자면 유효적 유효 범위)를 따른다.
즉, 함수 내에서 마지막으로 할당한 값을 참조한다.
여기서 파생되는 문제가 많기 때문에 ES6의 등장 이후로, var의 사용을 지양하고 있다.
간단하게 문제가 발생하는 코드를 살펴보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Test</title>
</head>
<body>
<ul style="cursor:pointer">
<li> if clicked, print 0 </li>
<li> if clicked, print 1 </li>
<li> if clicked, print 2 </li>
</ul>
</body>
<script>
const items = document.querySelectorAll('li');
for(var i = 0; i < items.length; i++) {
items[i].addEventListener('click', () => {
alert(i);
})
}
</script>
</html>리스트의 요소에 따라 다른 숫자를 출력시키고자 의도했지만, 모든 요소가 동일하게 3을 출력함을 알 수 있다.
let은 var와 달리 블록 유효 범위를 따르므로 블록 내에서 let으로 선언한 변수는 해당 블록에서만 유효하다.
따라서 반복되어서 값이 변경된다 할지라도, 이전에 선언한 함수의 값은 변경되지 않는다.
쉽게 말하자면 let을 이용하면 for문이 반복될 때마다 값을 잠그게 된다.
결론
var로 할 수 있는 거의 모든 것을 let으로 대체할 수 있으므로, var을 사용하기 보다는 const와 let을 사용해야 한다.
참고
자바스크립트 코딩의 기술(조 모건 저)
'프로그래밍 언어 > JavaScript + TypeScript' 카테고리의 다른 글
| [스크랩] JavaScript(ES6), TypeScript, Node.js 개발자를 위한 무료 e북 4가지 (0) | 2021.06.22 |
|---|---|
| [You Don't Know JS] 2. 값(Value) (0) | 2021.06.22 |
| [You Don't Know JS] 1. 타입(Type) (0) | 2021.06.21 |
| [JavaScript] 함수 선언문 vs 함수 표현식 (0) | 2021.03.23 |
| [JavaScript] 펼침 연산자: spread operator (0) | 2021.02.17 |
