게시글은 공부용이며 출처를 제시합니다.
출처: 소플의 처음 만난 React, 리액드를 다루는 기술, 모던 자바스크립트 deep dive

제어문

제어문은 조건문, 반복문을 실행할 때 사용된다.
코드는 위에서 아래 방향으로 순차적으로 실행된다. 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있다.

하지만 코드의 흐름을 이해하기 어렵게 만들어 가독성을 해치는 단점이 있다.

📍 블록문

블록문은 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부른다.
자바스크립트는 블록문을 하나의 실행 단위로 취급한다.

문의 끝에는 세미콜론을 붙이는 것이 일반적이지만 블록문은 언제나 문의 종료를 의마하는 자체 종결성을 갖기 때문에 블록문의 끝에는 세미콜론을 붙이지 않는다.

let x = 1;

if(x < 10){
	x++;
}

function sum(a,b){
	return a + b;
}

---

📍 조건문

조건문은 주어진 조건식의 평가 결과에 따라 코드 블록의 실행을 결정한다.
조건식은 불리언 값으로 평가될 수 있는 표현식이다.

if...else 문

if(조건식1){
	//조건식1이 참이면 이 코드 블록은 실행된다.
}else if(조건식2){
	//조건식2가 참이면 이 코드 블록이 실행된다.
}else {
	//조건식1과 조건식2가 모두 거짓이면 이 코드 블록이 실행된다.
}

👀 if...else 문은 삼항 조건 연산자로 바꿔 쓸 수 있다.

let x = 2;

let result = x % 2? '홀수' : '짝수';

console.log(result);
// 짝수 (나머지는 0이니 false이다)

//만약 경우의 수가 세 가지라면?
let num = 2;

let kind = num? (num > 0? "양수" : "음수") : "영";
//먼저 num은 truthy 값을 가지니 괄호문 안을 들여다 본다. 그리고 0보다 크니 "양수"를 출력

switch 문

switch (표현식){
  case 표현식1:
    스위치 문의 표현식과 표현식1이 일치하면 실행될 문;
    break;
  case 표현식2:
    스위치 문의 표현식과 표현식1이 일치하면 실행될 문;
    break;
  default;
    스위치 문의 표현식과 일치하는 case 문이 없을 때 실행될 문;
}

먼저 잘못된 switch문을 살펴보자

let month = 11;
let monthName;

switch (month) {
  case 1 : monthName = '일월';
  case 2 : monthName = '이월';
  case 3 : monthName = '삼월';
  case 4 : monthName = '사월';
  case 5 : monthName = '오월';
  case 6 : monthName = '육월';
  case 7 : monthName = '칠월';
  case 8 : monthName = '팔월';
  case 9 : monthName = '구월';
  case 10 : monthName = '십월';
  case 11 : monthName = '십일월';
  case 12 : monthName = '십이월';
  default : monthName = '없는 월'
}

console.log(monthName);
//없는 월

"십일월"이 출력되지 않고 "없는 월"이 출력된다.

폴 스루 (fall through)

switch 문을 탈출하지 않고 switch 문이 끝날 때까지 이후의 모든 case문과 default 문을 실행했기 때문이다. 이를 폴 스루라고 한다.

monthName 변수에 "십일월"이 할당된 후 switch 문을 탈출하지 않고 연이어 "십이월"이 재할당되고 마지막으로 "없는 월"이 재할당된 것이다.

그 이유는 case 문에 해당하는 문의 마지막에 break문을 사용하지 않았기 때문이다. break 키워드로 구성된 break문은 코드 블록에서 탈출하는 역할을 한다. break문이 없다면 case문의 표현식과 일치하지 않더라도 실행 흐름이 다음 case문으로 연이어 이동한다.

올바른 switch문

let month = 11;
let monthName;

switch (month) {
  case 1 : monthName = '일월';
    break
  case 2 : monthName = '이월';
    break
  case 3 : monthName = '삼월';
    break
  case 4 : monthName = '사월';
    break
  case 5 : monthName = '오월';
    break
  case 6 : monthName = '육월';
    break
  case 7 : monthName = '칠월';
    break
  case 8 : monthName = '팔월';
    break
  case 9 : monthName = '구월';
    break
  case 10 : monthName = '십월';
    break
  case 11 : monthName = '십일월';
    break
  case 12 : monthName = '십이월';
    break
  default : monthName = '없는 월'
}

console.log(monthName);
//십일월

switch문은 생각보다 복잡한 문법을 포함하고 있다. 따라서 최대한 if...else 문으로 해결하고 조건이 너무 많다면 switch 문을 사용해 가독성을 높이자.