모던 JS DeepDive(8장)

Minji Lee·2023년 12월 28일

8장 모던자바스크립트딥다이브 제어문

모던 자바스크립트 Deep Dive 완독목표!

목록 보기

6/16

Chap08. 제어문

제어문(control flow statement)

조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용

일반적으로 코드는 위에서 아래 방향으로 순차적으로 실행됨
하지만, 제어문 사용하면 코드의 실행 흐름 인위적으로 제어 가능

블록문(block statement/compound statement)

0개 이상의 문으로 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 함

단독으로 사용할 수 있고, 제어문이나 함수 정의할 때 사용하는 것이 일반적
블록문의 끝에는 세미콜론을 붙이지 않음 → 마지막의 중괄호가 자체 종결성 가짐

조건문(conditional statement)

주어진 조건식의 평가 결과에 따라 코드 블록의 실행을 결정

boolean 값으로 평가될 수 있는 표현식

1. if…else 문

논리적 참 또는 거짓에 따라 실행할 코드 블록 결정

if (조건식) {
	// 조건식이 참이면 이 코드 블록 실행
} else {
	// 조건식이 거짓이면 이 코드 블록 실행
}

조건식 추가하려면 else if 문 사용

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

if문과 else문은 딱 한번만 사용 가능하지만, else if문은 여러 번 사용 가능

코드 블록 내의 문이 하나뿐이면 중괄호 생략 가능

var num = 2;
var kind;
if(num > 0) kind = '양수';
else if (num < 0) kind = '음수';
else kind = '영';

console.log(kind); // 양수

if…else문은 삼항 조건 연산자로 바꿔 사용 가능

2. switch문

주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case문으로 실행 흐름 옮김

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

case문은 상황을 의미하는 표현식을 지정하고 콜론으로 마침
일치하는 case문이 없으면 실행 순서를 default문으로 이동 → default문은 선택 사항
문자열이나 숫자 값인 경우가 많음
각 case문에는 break문을 사용하여 코드 블록 탈출 시켜야 함 → 사용하지 않으면, 다음 case문으로 이동하게 됨

반복문

조건식의 평가 결과가 참인 경우 코드 블록 실행, 그 후 조건식 다시 평가하여 여전히 참인 경우 코드 블록 다시 실행

조건식이 거짓일 때까지 반복

1. for 문

조건식이 거짓으로 평가될 때까지 코드 블록 반복 실행 → 반복 횟수가 명확할 때 사용

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

어떤 식도 선언하지 않으면 무한루프
```
for (;;) {...}
```

2. while 문

주어진 조건식의 평가 결과가 참이면 코드 블록을 계속해서 반복 실행 → 반복 횟수가 불분명할 때 사용

var count = 0;
while(count < 3) {
	console.log(count); // 0 1 2
	count++;
}

조건식의 평가 결과가 언제나 참인 경우 무한루프
```
while(true) { ... }
```

무한루프 탈출을 위해서 break문 사용

var count = 0;
while(true) {
	console.log(count);
	count++;
	if(count === 3) break; // count가 3이면 코드 블록 탈출
} // 0 1 2

3. do…while문

코드 블록을 먼저 실행하고 조건식 평가함 → 코드 블록은 무조건 한 번 이상 실행됨

var count = 0;
do {
	console.log(count); // 0 1 2
	count++;
} while (count < 3);

break문

레이블 문, 반복문 또는 switch 문의 코드 블록 탈출

레이블 문, 반복문, switch 문 코드 블록 외에 break문 사용하면 SyntaxError 발생
```
if (true) {
	break; // Uncaught SyntaxError: Illegal break statement
}
```
레이블 문: 프로그램의 실행 순서 제어하는 데 사용
- 레이블 문 탈출하려면 break문에 레이블 식별자 지정
```
outer: for (var i = 0; i < 3; i++) {
	for (var j = 0; j < 3; j++) {
		// i + j === 3이면 outer라는 식별자가 붙은 레이블 for문 탈출
		if(i + j === 3) break outer;
		console.log(`inner [${i}, ${j}]`);
	}
}
```
- 중첩된 for 문 외부로 탈출할 때 유용하지만, 그 밖의 경우에는 일반적으로 권장하지 않음
  
  → 프로그램 흐름 복잡해져서 가독성이 나빠지고, 오류 발생시킬 가능성 높음