자바스크립트(JavaScript)에서 switch 문은 함수 내부에 위치할 때 return 문을 포함할 수 있습니다. 이 경우 함수는 switch 문에서 일치하는 case를 만나는 즉시 해당 값을 반환하며, switch 문 뒤에 작성된 나머지 코드는 실행되지 않습니다.
return 문 사용 시 주요 특징
- return 문이 실행되면 함수가 즉시 종료되므로, 각 case 뒤에
break문을 따로 작성할 필요가 없습니다. - switch 문이 함수 외부에 있다면 return 문을 사용할 수 없으며, 이 경우 SyntaxError가 발생합니다.
- 일치하는 값이 없을 때를 대비해
default절에서도 return 문을 활용할 수 있습니다.
다음은 자바스크립트 switch 문에서 return 문을 사용하는 예제 코드입니다.
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript switch 문에서 return 문 사용하기</h1>
1~7 사이의 요일 입력 <input type="text" class="day" /><button class="Btn">
확인
</button>
<div style="color: green;" class="result"></div>
<h3>
위 버튼을 클릭하면 어떤 요일인지 확인할 수 있습니다
</h3>
<script>
let dayVal = document.querySelector(".day");
let resEle = document.querySelector(".result");
function returnDay(val) {
switch (val) {
case 1:
return "월요일입니다";
case 2:
return "화요일입니다";
case 3:
return "수요일입니다";
case 4:
return "목요일입니다";
case 5:
return "금요일입니다";
case 6:
return "토요일입니다";
case 7:
return "일요일입니다";
default:
return "1부터 7 사이의 값을 입력하세요";
}
}
document.querySelector(".Btn").addEventListener("click", () => {
resEle.innerHTML = returnDay(parseInt(dayVal.value));
});
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
입력창에 1~7 사이의 숫자를 입력한 뒤 [확인] 버튼을 클릭하면, switch 문의 return 문이 반환한 요일 문자열이 화면에 표시됩니다.
이처럼 switch 문 안에서 return 문을 사용하면 조건별로 값을 깔끔하게 반환할 수 있어, break 문 없이도 간결하고 가독성 높은 코드를 작성할 수 있습니다.