swich - case 문은 충족된 조건에 따라 여러 다른 코드를 실행하고자 할 경우 사용되며,
특히 동치 확인이 필요한 경우 아주 유용하게 사용됩니다.
물론 동치를 확인하지 않는 조건들에 swich - case문을 사용할 수는 있지만, 코드의 길이가 그다지 짧아지지도 않으며
보통은 가독성이 떨어지는 경우가 많습니다.
따라서 동치를 확인해야하는 경우 swich - case문을 사용하여 다수의 상이한 값을 확인할 때 사용한다면
if, else if 문을 대체하여 효과적으로 코드를 작성할 수 있습니다.
제어 흐름과 오류 처리 - JavaScript | MDN
JavaScript는 애플리케이션에 다양한 상호작용을 추가하기 위한 일련의 명령문, 특히 제어 흐름 명령문을 지원합니다. 이번 장에서는 이 명령문들을 간략하게 살펴보겠습니다.
developer.mozilla.org
판단 내리기 — 조건문 - Web 개발 학습하기 | MDN
어떤 프로그래밍 언어든 코드는 의사 결정을 내리고 입력 내용에 따라 작업을 수행해야 합니다. 예를 들어 게임에서 플레이어의 생명 수치가 0이면 게임이 종료됩니다. 날씨 앱에서는 아침에 해
developer.mozilla.org
swich - case문의 사용방법
swich ( 매개변수 ) {
case 값1 : // 1번 case
실행문 1;
break;
case 값2 : // 2번 case
실행문 2;
break;
case 값3 : // 3번 case
실행문 3;
break;
defalut : 실행문 4;
}
swich는 조건이 아니라 하나의 값을 받습니다. 매개변수로 받는 값과 일치하는 case를 찾아 해당 case를 실행합니다.
매개변수의 값이 값 2와 같다면 해당 케이스인 2번 case를 찾아 명령문을 실행하는 것입니다.
따라서 case의 값에는 변수나 상수 혹은 매개변수에 저장될 수 있는 구체적인 값이 와야 합니다.
구체적인 값으로는 'apple'과 같은 문자열을 예시로 들 수 있겠습니다.
case문 마지막에는 break;를 선택적으로 사용할 수 있습니다.
break문은 해당 case가 처리되면 다른 case가 실행되지 않도록 지시해주는 역할을 합니다.
swich - case문은 기본적으로 fall through라는 행동을 합니다.
즉, case가 실행된 후 다른 case의 값과 일치하지 않아도 실행되는 것을 기본 설정으로 가지고 있는 것입니다.
매개변수 === 값 1 일 경우 break문을 사용하지 않을 경우 실행문 1을 실행하고 다음 case의 실행문 2, 실행문 3을 실행하게 됩니다.
이점은 case의 조건은 무시되고 값이 일치하지 않은 경우에도 case의 실행문을 실행하도록 기본 설정되어 있는 것입니다.
때로는 아래 코드와 같이 다수의 case에 대해 동일한 코드를 원할 경우 case에 대한 코드를 정의하지 않고,
fall through 메커니즘을 활용할 수 있습니다.
let logEntry = {
event: ev,
value: val,
finalMonsterHealth: monsterHealth,
finalPlayerHealth: playerHealth,
};
switch (ev) {
case LOG_EVENT_PLAYER_ATTACK: //문자열을 담은 상수
case LOG_EVENT_PLAYER_STRONG_ATTACK: //문자열을 담은 상수
case LOG_EVENT_MONSTER_ATTACK: //문자열을 담은 상수
logEntry = {
event: ev,
value: val,
target: "PLAYER",
finalMonsterHealth: monsterHealth,
finalPlayerHealth: playerHealth,
};
}
3개의 case 값에는 각각 다른 문자열을 담은 상수를 사용하였습니다.
매개변수 ev의 값이 3개의 문자열 중 하나라면 logEntry에 객체를 저장하는 실행문을 실행하게 됩니다.
마지막으로 default 에는 어떠한 case도 충족하지 못할 경우 실행될 코드를 정의해줍니다.
else와 비슷하다고 생각하시면 좋을 것 같습니다.
swich - case문을 활용하여 활용 중인 예제의 if문을 대치하여 보겠습니다.
if문을 사용한 기존 코드
function writeToLog(ev, val, monsterHealth, playerHealth) {
let logEntry = {
event: ev,
value: val,
finalMonsterHealth: monsterHealth,
finalPlayerHealth: playerHealth,
};
if (ev === LOG_EVENT_PLAYER_ATTACK) {
logEntry.target = "MONSTER";
} else if (ev === LOG_EVENT_PLAYER_STRONG_ATTACK) {
logEntry = {
event: ev,
value: val,
target: "MONSTER",
finalMonsterHealth: monsterHealth,
finalPlayerHealth: playerHealth,
};
} else if (ev === LOG_EVENT_MONSTER_ATTACK) {
logEntry = {
event: ev,
value: val,
target: "PLAYER",
finalMonsterHealth: monsterHealth,
finalPlayerHealth: playerHealth,
};
} else if (ev === LOG_EVENT_PLAYER_HEAL) {
logEntry = {
event: ev,
value: val,
target: "PLAYER",
finalMonsterHealth: monsterHealth,
finalPlayerHealth: playerHealth,
};
} else if (ev === LOG_EVENT_GAME_OVER) {
logEntry = {
event: ev,
value: val,
finalMonsterHealth: monsterHealth,
finalPlayerHealth: playerHealth,
};
}
battleLog.push(logEntry);
}
swich - case문을 사용한 변경 코드
let battleLog = [];
function writeToLog(ev, val, monsterHealth, playerHealth) {
let logEntry = {
event: ev,
value: val,
finalMonsterHealth: monsterHealth,
finalPlayerHealth: playerHealth,
};
switch (ev) {
case LOG_EVENT_PLAYER_ATTACK:
logEntry.target = "MONSTER";
break;
case LOG_EVENT_PLAYER_STRONG_ATTACK:
logEntry = {
event: ev,
value: val,
target: "MONSTER",
finalMonsterHealth: monsterHealth,
finalPlayerHealth: playerHealth,
};
break;
case LOG_EVENT_MONSTER_ATTACK:
logEntry = {
event: ev,
value: val,
target: "PLAYER",
finalMonsterHealth: monsterHealth,
finalPlayerHealth: playerHealth,
};
break;
case LOG_EVENT_PLAYER_HEAL:
logEntry = {
event: ev,
value: val,
target: "PLAYER",
finalMonsterHealth: monsterHealth,
finalPlayerHealth: playerHealth,
};
break;
case LOG_EVENT_GAME_OVER:
logEntry = {
event: ev,
value: val,
finalMonsterHealth: monsterHealth,
finalPlayerHealth: playerHealth,
};
break;
default: // 어떤 case도 충족하지 않을 경우 실행 될 기본 코드 정의
logEntry = {};
}
battleLog.push(logEntry);
}
기존의 사용한 if문의 조건은 동치를 확인하는 조건이었기 때문에 swich - case문을 유용하게 적용할 수 있었습니다.
보다 직관적으로 확인할 수 있어서 가독성 또한 좋아진 것을 확인할 수 있었습니다.
'JavaScript' 카테고리의 다른 글
함수 작성 방법(익명함수, 화살표 함수) (0) | 2022.08.20 |
---|---|
for - of / for - in 반복문 (0) | 2022.08.15 |
논리연산자를 이용한 값 할당 (0) | 2022.08.14 |
삼항 연사자 (0) | 2022.08.14 |
isNaN (0) | 2022.08.11 |