🔖 2-14. else, else if, switch

else를 사용해 두 방향으로 분기하기

if (조건식) { // 조건식이 참인 값일 때 실행
  실행문;
} else { // 조건식이 거짓인 값일 때 실행
  실행문;
}

 

let value = '사과';
let condition = false; // else 문이 실행됨
if(condition) {
  value = '바나나';
} else {
  value = '포도';
}

console.log(value); // 포도

 

 

 

else if를 사용해 여러 방향으로 분기하기

if (조건식) {
  실행문;
} else if (조건식) {
  실행문;
} else {
  실행문;
}

 

if문은 if만 필수

else와 else if는 선택

 

const score = 90;
if (score >= 90) {
  console.log('A+');
} else if ( score < 90 && score >= 80) {
  console.log('A');
} else if ( score < 80 && score >=70) {
  console.log('B+');
} else if ( score < 70 && score >= 60) {
  console.log('B');
} else {
  console.log('F');
}

// A+

▼ 조건문이 위에서 부터 아래로 차례대로 실행된다는 특성을 이용해 코드를 줄일 수 있다. 점수가 70점이라고 해보자. 먼저 score >= 90 조건식 검사한다. false가 나오기 때문에 다음 else if 문의 조건식을 검사한다. score < 90 && score >= 80을 검사하는데, 여기서 score < 90은 제거해도 된다. score >= 90 조건식이 false인 상황이므로 현재 값은 무조건 90 미만이기 때문이다.

 

const score = 75;
if (score >= 90) {
  console.log('A+');
} else if (score >= 80) {
  console.log('A');
} else if (score >=70) {
  console.log('B+');
} else if (score >= 60) {
  console.log('B');
} else {
  console.log('F');
}

// B+

 

 

 

중첩 if 문 사용하기

let first = true;
let second = false;
if (first) {
  console.log('첫번째 조건 충족!');
  if (second) {
    console.log('두번째 조건도 충족!');
  } else {
    console.log('두번째 조건은 불충족!');
  }
} else {
  console.log('첫번째 조건 불충족!');
}

// 첫번째 조건 충족!
// 두번째 조건은 불충족!

 

<제로초의 팁>

기본적인 원칙은 위에서 아래로 왼쪽에서 오른쪽으로 실행되는것이다.

오른쪽에서 왼쪽으로 실행되는 = 연산자 

 

<제로초의 조언>

중첩 if 문은 피하는 것이 좋다. 중첩 if문은 논리적으로 if-else if-else 문으로 변환할 수 있다. 조건문이 중첩되어 들여쓰기가 깊어질수록 코드가 읽기 어려워진다. 따라서 중첩 if 문을 if-else if-else 문으로 변환해 코드의 가독성을 높이길 권장한다. 위 예제의 중첩 if문을 바꿔 보자.

let first = true;
let second = false;
if ( first && second ) { // first와 second 모두 true
  console.log('첫번째 조건 충족!');
  console.log('두번째 조건도 충족!');
} else if ( first ) { // first만 true
  console.log('첫번째 조건 충족!');
  console.log('두번째 조건은 불충족!');
} else { // 둘 다 false 
  console.log('첫번째 조건 불충족!')

}

 

 

 

switch 문으로 분기하기

switch (조건식) {
  case 비교 조건식;
    실행문;
}

switch 문에는 조건식 두 개가 사용된다. 

조건식과 비교 조건식이 같으면(===) 실행문이 실행된다. 

 

let value = 'A';
switch (value) {
  case 'A':
    console.log('A');
    console.log('B');
} 

// A
// B

실행문을 여러개 둘 수도 있다. 이때는 if 문과는 다르게 중괄호가 없어도 된다. 하지만 쓰는걸 추천한다. 단 중괄호가 있는 것과 없는 것에는 차이가 있다. 이 부분은 중괄호 문의 역할(var와 let의 차이 이해하기 참고) 

 

 

 

switch 문은 일치하는 case를 발견하면 일치 여부와 상관없이 그 아래 case들의 실행문을 모두 실행한다. 

let value = 'B';
switch (value) {
  case 'A':
    console.log('A');
  case 'B':
    console.log('B');
  case 'C':
    console.log('C');
}

// B
// C
// ▲ switch 문은 일치하는 case를 발견하면 일치 여부와 상관없이 그 아래 case들의 실행문을 모두 실행한다. 
// 따라서 원하는 결과만 얻으려면 수동으로 case에서 빠져나와야 한다. 이때 break 문이 사용된다.

원하는 결과만 얻으려면 수동으로 case에서 빠져나와야 한다. 이때 break 문이 사용된다.

let value = 'B';
switch (value) {
  case 'A':
    console.log('A');
    break;
  case 'B':
    console.log('B');
    break;
  case 'C':
    console.log('C');
    break;
}

// B

 

 

 

어떠한 case도 일치하지 않을 때 실행하는 case도 만들 수 있다. 단, 이대는 case대신 default라는 예약어를 사용한다.

let value = 'F';
switch (value) {
  case 'A':
    console.log('A');
    break;
  case 'B':
    console.log('B');
    break;
  case 'C':
    console.log('C');
    break;
  default:
    console.log('아무것도 일치하지 않음');
}

// 아무것도 일치하지 않음

 

‘F’는 어떠한 case에도 해당하지 않으므로 default 부분이 실행된다. default에는 break 문을 붙이지 않아도 된다. 맨 마지막 case라서 다음에 실행될 것이 없기 때문이다.

 

switch 문의 case는 else if와 비슷하고, default는 else와 비슷하다고 생각할 수도 있다. 실제로 if문이 === 연산자만 사용한다면 switch 문으로 쉽게 대체할 수 있다. 한가지 다른 점이 있다면 else는 if나 else if 뒤에만 나오지만, default는 어디에나 위치할 수 있다. 

let fruit ='사과';
if (fruit === '사과') {
  console.log('사과입니다!');
} else if (fruit === '배') {
  console.log('배입니다!');
} else if (fruit === '포도') {
  console.log('포도입니다!');
} else {
  console.log('뭔지 모르겠습니다!');
}

// 사과입니다!

switch (fruit) {
  default:
    console.log('뭔지 모르겠습니다!');
    break;
  case '사과':
    console.log('사과입니다!');
    break;
  case '배':
    console.log('배입니다!');
    break;
  case '포도':
    console.log('포도입니다!');
    break;
}

// 사과입니다!

▲ if 문도 switch 문도 모두 ‘사과입니다!’를 출력한다. 앞에서도 말했듯이 default는 어디에나 위치할 수 있다.