joyful
TIP 2: let과 const로 유효 범위 충돌을 줄여라 본문
let:
- 변수를 반드시 재할당해야 하는 경우에 사용 (var과의 공통점)
- 블록 유효범위를 따름, 변수를 선언한 중괄호를 안에서만 적용 (var과의 차이점)
예제코드
function getLowestPrice(item) {
var count = item.inventory; // <label id="sale.count1"/>
var price = item.price;
if (item.salePrice) {
var count = item.saleInventory; // <label id="sale.count2"/>
if (count > 0) {
price = item.salePrice;
}
}
if (count) { // <label id="sale.if2"/>
return price;
}
return 0;
}
위의 코드에서는 var를 사용하여 count라는 같은 이름의 변수를 재할당해주어 버그가 난다.
function getLowestPrice(item) {
let count = item.inventory;
let price = item.price;
if (item.salePrice) {
let count = item.saleInventory;
if (count > 0) {
price = item.salePrice;
}
}
if (count) {
return price;
}
return 0;
}
위의 경우, if 블록 안에서 let (item.saleInventory)으로 count를 선언했기에
함수를 시작 할 때 선언한 변수 count (item.inventory)와 충돌하지 않는다.
const도 블록 내에서 유효한 변수 선언 방법으로 사용될 수 있다.
위의 코드에서는 count를 재할당하지 않기 때문에 let 대신에 const를 사용하는 게 더 간결하다.
const를 사용한 코드는 아래와 같다.
function getLowestPrice(item) {
const count = item.inventory;
let price = item.price;
if (item.salePrice) {
const saleCount = item.saleInventory;
if (saleCount > 0) {
price = item.salePrice;
}
}
if (count) {
return price;
}
return 0;
}
*추가로, let과 const는 같은 이름의 변수를 다시 선언할 수 없다는 점을 잘 기억해두자!
(var는 같은 변수를 선언해도 충돌이 나지 않는다. 따라서 더 혼란을 줄 수 있다.)
'자바스크립트 코딩의 기술' 카테고리의 다른 글
TIP 7: 펼침 연산자로 배열을 본떠라 (2) | 2023.11.02 |
---|---|
TIP 6: Includes()로 존재 여부를 확인하라 (0) | 2023.10.28 |
TIP 5: 배열로 유연한 컬렉션을 생성하라 (0) | 2023.10.28 |
TIP 4: 템플릿 리터럴로 변수를 읽을 수 있는 문자열로 변환 (2) | 2023.10.26 |
TIP 1. const로 변하지 않는 값을 할당하라 (2) | 2023.09.26 |