JavaScript의 키워드를 잘 알고계신 분이라면 모두 알고있을지도 모르지만.. switch문을 사용하다가 예상치 못한 에러를 발견하게되어 공유하고자 한다.
switch 내부의 case는 블록 스코프일까 아닐까?
switch 문 안에서 같은 이름의 변수를 여러 케이스에서 선언해봤다.
switch(num) {
case 1:
const arr = [1, 2, 3]
break;
case 2:
const arr = [4, 5, 6]
break;
}
// error: Identifier 'arr' has already been declared.
JavaScript
복사
위 코드를 실행하면 arr가 이미 선언되었다는 에러가 발생하게 된다.
우리가 알고 있기로는 const와 let은 함수 스코프와 블록 스코프에서 유효한 변수 키워드이고,
보통 조건문 if는 코드 블록이라 블록 스코프니까.. case도 조건문처럼 쓰이면..? 블록 스코프 아닌가?
Switch의 case는 블록 스코프가 아니다
블록 레벨 스코프란 말 그대로 코드 블록 내에서만 유효한 스코프로, 중괄호를 기준으로 스코프의 범위가 구분된다.
switch문을 잘 살펴보자.
switch() { // 중괄호⭕️ => 블록 스코프 유효
case 1 : ... // 중괄호❌ => 넌 중괄호 없으니까 아니야!
}
JavaScript
복사
우리가 자주 사용하는 조건문 if는 안의 코드 내용이 중괄호로 둘러쌓여있다. 따라서 블록 스코프가 유효하다.
그러나 우리가 위에서 작성한 switch문은 밖의 코드만 중괄호로 감써져있고 case문에서는 중괄호 없이 코드가 작성되어있다.
즉, 중괄호가 없으므로 블록 스코프로 인정되지 않고 switch문 내부에서 const 키워드를 사용한 동일한 이름의 변수를 재선언했으므로 에러가 발생하게 되는 것이다.
어떻게 해결할까?
블록 스코프로 인정받지 않았으니 중괄호를 사용해 인정받을 수 있도록 해주면 됨!
case문의 코드를 중괄호로 감싸주면 된다.
switch(num) {
case 1: {
const arr = [1, 2, 3];
break;
}
case 2: {
const arr = [4, 5, 6];
break;
}
}
JavaScript
복사
블록 스코프는 아래와 같이 만들어진다.
