08장 제어문

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

하지만 코드의 실행 순서가 변경된다는 것은 단순히 위에서 아래로 순차적으로 진행하는 직관적인 코드의 흐름을 혼란스럽게 한다. 따라서 제어문은 코드의 흐름을 이해하기 어렵게 만들어 가독성을 해친다는 단점이 있다. 가독성이 좋지 못한 코드는 오류를 발생시키는 원인이 된다.

8.1 블록문

블록문

0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부르기도 한다.
자바스크립트는 블록문을 하나의 실행 단위로 취급한다.
블록문은 단독으로 사용할 수도 있으나, 일반적으로 제어문이나 함수를 정의할 때 사용하는 것이 일반적이다.

💡 `블록문은 언제나 자체 종결문을 갖기 때문에, 블록문 끝에는 세미콜론을 붙이지 않는 것이 일반적이다.`

8.2 조건문

조건문

주어진 조건식의 평가 겨로가에 따라 코드 블록의 실행을 결정한다. 조건식은 불리언 값으로 평가될 수 있는 표현식이다.
자바스크립트는 if…else문과 switch문으로 두 가지 조건문을 제공한다.

8.2.1 if…else문

if…else문은 주어진 조건식의 평가 결과, 즉 논리적 참 또는 거짓에 따라 실행할 코드 블록을 결정한다.
조건식의 평가 결과가 true일 경우 if 문의 코드 블록이 실행되고, false일 경우 else 문의 코드 블록이 실행된다.

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

else if 문과 else 문은 사용할 수도, 사용하지 않을 수도 있다.
if문과 else문은 2번 이상 사용 불가하지만 else if 문은 여러 번 사용할 수 있다.

💡 if문의 조건식은 불리언 값으로 평가되어야 한다. 만약 조건식이 불리언이 아닌 값으로 평가되면 자바스크립트 엔진에 의해 암묵적으로 불리언 값으로 강제 변환된다.

만약 블록문 안에 문이 하나라면 블록을 생략할 수 있다.

var num = 2;
var kind;

if (num > 0) kind = "양수";

대부분의 if…else문은 삼항 조건 연산자로 바꿔 쓸 수 있다.

var x = 2;
var result;

if (x % 2) {
  result = "홀수";
} else {
  result = "짝수";
}

console.log(result); //짝수

var x = 2;

//0은 false로 취급된다.
var result = x % 2 ? "홀수" : "짝수";
console.log(result); // 짝수

만일 경우의 수가 세 가지라면 다음처럼 바꿔쓸 수 있다

var num = 2;
var kind = num ? (num > 0 ? "양수" : "음수") : "0";

console.log(kind);

num > 0 ? ‘양수’ : ‘음수’는 표현식이다. 즉 삼항 조건 연산자는 값으로 평가되는 표현식을 만든다.

따라서 삼항 조건 연산자 표현식은 값처럼 사용할 수 있기 때문에 변수에 할당할 수 있다.

하지만 if…else문은 표현식이 아닌 문이기 때문에 값처럼 사용할 수 없다. 상황에 따라 if…else문과 삼항 조건 연산자 표현식을 선택해서 이용하면 된다.

8.2.2 switch문

switch (조건식) {
  case 표현식1:
    ...
  case 표현식2:
    ...
  default:
    ...
}

switch문은 주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 실행 흐름을 옮긴다.
조건식의 평가값과 일치하는 값이 없다면 default문으로 실행 흐름이 옮겨진다.
default문은 생략할 수 있다.
이때, 주의할 점이 있다. switch문이 하는 일은 단순히 실행 흐름을 옮기는 것 뿐이기 때문에 실행되는 case문 이후 나타나는 모든 코드가 순차적으로 실행된다. 이를 fall through라고 한다.

var month = 11;
var monthName;

switch(month) {
	case 11 : monthName = 'January';
	case 12 : monthName = 'January';
	case default : monthName = 'Invalid';
}
console.log(monthName);

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

break문을 사용하면 이러한 fall through를 막을 수 있다.
break문은 코드 블록에서 탈출하는역할을 한다.

💡 if…else문으로 해결 가능하다면 switch문보다 if…else문을 사용하는게 더 좋다. 하지만 조건문이 너무 많다면 switch문을 사용하여 가독성을 높일 수 있다.

8.3 반복문

반복문에서는 조건에 따라 블록 실행을 반복할지가 결정된다.

8.3.1 for문

for문은 조건식이 거짓으로 평가될 때까지 코드 블록을 반복 실행한다. 일반적인 for문의 형태는 다음과 같다.

for( 변수 선언문 or 할당문; 조건식; 증감문; {
	조건문이 참인 경우 반복 실행될 문;
}

for문에서는 세미콜론으로 구분되는 세가지의 문이 사용된다.
- 이 세가지 문은 각각 생략될 수 있으나 조건식, 증감문을 생략할 경우 무한 루프가 발생할 수 있으니 조심해야한다.
for문의 실행 순서는 다음과 같다.
1. 변수 선언, 할당문 실행
2. 조건식 평가
3. 조건식 평가값에 따라 분기
4. 조건식의 평가값이 true라면
  - 블록문 실행
  - 증감문을 실행
  - for문의 실행 순서를 처음부터 "반복"
5. 조건식의 평가값이 false라면
  - for문의 실행을 멈춘다.
변수 선언, 할당 문에서 let으로 선언한 변수는 조건식이 참일 때 실행되는 블록을 스코프로 가진다.
당연한 얘기지만 for문은 중첩해 사용할 수 있다.

8.3.2 while 문

while 문은 주어진 조건식의 평가 결과가 참이면 코드 블록을 계속해서 반복 실행한다. while 문은 조건문의 평가 결과가 거짓이 되면 코드 블록을 실행하지 않고 종료한다.
조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 강제 변환하여 논리적 참, 거짓을 구별한다.

조건식의 평가 결과가 언제나 참이면 무한루프가 된다.

var count = 0;

// count가 3보다 작을 때까지 코드 블록을 계속 반복 실행한다.
while (count < 3) {
  console.log(count); //0 1 2
  count++;
}

while문의 실행 순서는 다음과 같다.
1. 조건식 평가
2. 조건식 평가값에 따라 분기
3. 조건식의 평가값이 true라면
  - 블록문을 실행
  - while문의 실행 순서를 처음부터 "반복"
4. 조건식의 평가값이 false라면
  - while문의 실행을 멈춘다.

8.3.3 do, while문

while문의 경우 조건식을 먼저 평가하고 그 결과에 따라 블록문의 실행 여부를 결정한다.
do…while문은 블록문을 먼지 실행하고 조건식을 평가한다.
따라서 조건식이 항상 false로 평가되더라도 적어도 한 번은 블록문이 실행된다.

do {
  console.log("hello world"); // 'hello world'가 한 번 출력됨
} while (false);

8.4 break 문

앞서 switch문에서 먼저 살펴봤던 break문과 같다.
특정 상황에서 break문을 실행하면 해당 break문이 속한 블록문의 실행을 멈춘다.
따라서 break이 등장하기 이전 코드만 실행되고 그 이후부터 블록문이 끝날 때 까지의 코드는 실행되지 않는다.
이때, '특정 상황'이란 레이블 문, 반복문, switch 문을 의미한다.
반복문의 경우 반복 자체도 멈춘다.
특정 상황 외 블록 안에서 break을 사용하면 Syntax error가 발생한다.

// foo라는 레이블 식별자가 붙은 레이블 블록문
// 레이블문은 프로그램의 실행순서를 제어하는 데 사용한다.
foo: {
  console.log(1);
  break foo;
  console.log(2);
}

console.log("Done!"); //1 'Done!'

8.5 continue 문

continue 문은 반복문 실행울 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동시킨다.

break 문처럼 반복문을 탈출하진 않는다.

for (var i = 0; i < 3; i++) {
  if (i === 1) {
    continue; // i가 1이면 여기서 실행을 중단하고 증감식으로 실행 흐름을 이동시킨다.
  }
  console.log(i); // 0 2
}

블록문은 단독으로 사용할 수도 있으나, 일반적으로 제어문이나 함수를 정의할 때 사용하는 것이 일반적이다.

💡 블록문은 언제나 자체 종결문을 갖기 때문에, 블록문 끝에는 세미콜론을 붙이지 않는 것이 일반적이다.