[JavaScript] JS 반복문과 Switch

2022.10.05

💡 오늘의 JavaScript 공부 + 복습

▶️ 반복문

자바스크립트에는 2가지 반복문이 있다.

for문과 while문을 이용하여 구구단을 만들어보는 걸로 공부했다.

📌 for 문

// 구구단을 입력 받고 출력 
let a = Number(prompt("보고싶은 구구단을 입력해주세요", " "))

for ( i = 0; i < 10; i++){
  console.log(`${ a } x ${ i } = ${ a * i }`)
}


// 구구단 전체 출력 
for ( i = 1; i < 10; i++){
  for( j = 0; j < 10; j++){
  console.log(`${ i } x ${ j } = ${ i * j }`)}
}

📌 while 문

// 구구단을 입력 받고 출력 
let a = Number(prompt("보고싶은 구구단을 입력해주세요", " "))

let i = 0 
while ( i < 10 ){
  console.log(`${ a } x ${ i } = ${ a * i }`)
  i++;
}

// 구구단 전체 출력 
let i = 1 
while ( i < 10 ){
  let j = 0 ;
  while ( j < 10 ){
    console.log(`${ i } x ${ j } = ${ i * j }`)
    j++;
  }
  i++
}

▶️ Switch문

switch문을 이해하기 위해선 if 문을 정확하게 이해하고 나서 공부하는 것이 좋다고 생각한다.

swuth문은 if문과 다르게 논리적인 참, 거짓으로 실행할 코드블록을 정하는 것이 아니라, 다양한 상황 (case)에 따라 실행할 코드블록을 결정할 때 사용한다.

📌 간단한 예제

// 월을 영어로 변환한다. ex) 11 -> 'November'
let month = 11; 
var monthName ;

switch (month){
  case 1 : monthName = "January";
  case 2 : monthName = "February";
  case 3 : monthName = "March";
  case 4 : monthName = "April";
  case 5 : monthName = "May";  
  case 6 : monthName = "June";  
  case 7 : monthName = "July";
  case 8 : monthName = "August";  
  case 9 : monthName = "September";
  case 10 : monthName = "October";  
  case 11 : monthName = "November";
  case 12 : monthName = "December";
  default: monthName = "Invalid month";
}
console.log(monthName);  // -> "Invalid month"

왜 11이 출력되지 않고 “Invalid month”이 출력되는 걸까?

많은 고민을 해보고 폴스루라는 것을 통해 그 이유를 찾았다.

📌 why?

이는 switch문의 표현식의 평가 결과와 일치하는 case문으로 실행 흐름이 이동하여 문을 실행한 것은 맞지만 문을 실행한 후 switch문을 탈출하지 않고 switch문이 끝날 때 까지 이후의 모든 case문과 default문을 실행했기 때문이다. 이를 fall through 폴스루라고 한다.

monthName 변수에 ‘November’이 할당된 후 switch문을 탈출하지 않고 연이어 ‘December’이 재할당되고 마지막으로 ‘Invalid month’가 재할당된 것이다.

📌 그렇다면 어떻게?

break 문을 사용해서 해결한다. 코드블록에서 탈출 시키는 것이다.

📌 간단한 예시

// 월을 영어로 변환한다. ex) 11 -> 'November'
let month = 11; 
var monthName ;

switch (month){
  case 1 : monthName = "January";
    break;
  case 2 : monthName = "February";
    break;
  case 3 : monthName = "March";
    break;
  case 4 : monthName = "April";
    break;
  case 5 : monthName = "May";  
    break;
  case 6 : monthName = "June";  
    break;
  case 7 : monthName = "July";
    break;
  case 8 : monthName = "August";  
    break;
  case 9 : monthName = "September";
    break;
  case 10 : monthName = "October";  
    break;
  case 11 : monthName = "November";
    break;
  case 12 : monthName = "December";
    break;
  default: monthName = "Invalid month";   
}
console.log(monthName); // -> "November"

default 문에서는 break 문을 생략하는 것이 일반적이다. default문은 switch문의 맨 마지막에 위치하므로 default 문의 실행이 종료되면 switch문을 빠져나간다. 따라서 별도의 break문을 필요없다.

📌 Fall through 폴스루를 활용하는 방법

let year = 2000; // 2000년은 윤년으로 2월이 29일이다. 
let month = 2;
let days = 0;

switch (month){
  case 1 : case 3 : case 5 : case 7 : case 8 : case 10 : case 12:
    days = 31;
    break;
  case 4 : case 6 : case 9 : case 11 : 
    days = 30;
    break;
  case 2 : 
    days = ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) ? 29 : 28 ;
    break;
  default :
    console.log("Invalid month");
}
console.log(days) // -> 29

switch 문은 case, default, break 등 다양한 키워드를 사용해야 하고 폴스루가 발생하는 등 문법이 복잡하고 어렵다. 때문에 if…else문으로 해결할 수 있다면 switch문 보다는 if…else문을 사용하는 것이 더 좋다.

하지만 조건이 너무 많거나 switch문으로 사용했을 때 가독성이 더 좋다면 if…else문 보다 switch문을 활용하는 것이 더 좋다.