[모던 자바스크립트 Deep Dive] 08장 - 제어문

제어문

---

제어문은 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용합니다. 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있습니다. 제어문은 코드의 실행 순서를 변경 시킬 수 있기 때문에 직관적인 코드의 흐름을 혼란스럽게 만들 수 있어 가독성을 해칠 수 있다는 단점이 있습니다.

 

블록문

---

블록문은 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부릅니다. 자바스크립트는 블록문을 하나의 실행 단위로 취급합니다. 블록문은 언제나 문의 종료를 의미하는 종결성을 갖지 때문에 블록문의 끝에는 세미콜론(`;`)을 붙이지 않습니다.

 

조건문

---

조건문은 주어진 조건식의 평가 결과에 따라 코드 블록(블록문)의 실행을 결정한빈다.

if ... else 문

주어진 조건식의 평가 결과(참 또는 거짓)에 따라 실행할 코드 블록을 결정합니다. 조건식의 평가 결과가 `true`이면 `if` 문의 코드블록을 실행하고 조건식의 평가 결과가 false이면 `else` 문의 코드블록을 실행합니다. 조건식을 추가하여 조건에 따라 실행될 코드블록을 늘리고 싶으면 `else if` 문을 사용하면 됩니다.

var num = 2;
var kind;

if (num > 0){
	kind = '양수';
} else if (num < 0) {
	kind = '음수';
} else {
	kind = '영';
}
console.log(kind);

switch 문

`switch` 문은 주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 `case` 문으로 실행 흐름을 옮깁니다. `switch` 문의 표현식과 일치하는 `case` 문이 없다면 실행 순서는 `default` 문으로 이동합니다. `switch` 문은 논리적 참, 거짓 보다 다양한 상황(`case`)에 따라 실행할 코드 블록을 결정할 때 사용합니다.

switch (표현식) {
case 표현식1:
    /* code */
    break;

default:
    break;
}

`case` 문이 실행이 되었는데 `switch`문을 탈출하지 않고 계속 실행되는 현상을 폴스루(fall through)라고합니다. 폴스루를 탈출하려면 break문을 사용해야한다.

var year = 2000;
var month = 2;
var days = 0;

switch(month){
	case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case12:
    	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)) ? 29 : 28;
        break;
        
    default:
    	console.log('Invalid month');
}

console.log(days); // 29

 

반복문

---

반목문은 조건식의 평가 결과가 참인 경우 코드 블록을 실행합니다. 그 후 조건식을 다시 평가하여 여전히 참인 경우 코드 블록을 조건식이 거짓이 될 때 까지 반복 실행합니다.

for 문

`for` 문은 조건식이 거짓으로 평가될 때까지 코드 블록을 반복 실행합니다.

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

for (var i = 0; i < 2; i++){
	console.log(i);
}
// 0
// 1

위 `for` 문의 실행순서는 아래와 같습니다.

1. `for` 문을 실행하면 맨 먼저 변수 선언문 `var i = 0`이 실행됩니다. 변수 선언문은 단 한 번만 실행됩니다.
2. 변수 선언문의 실행이 종료되면 조건식이 실행됩니다. 현재 `i` 변수의 값은 0이므로 조건식의 평가 결과는 `true`입니다.
3. 조건식의 평가 결과가 `true`이므로 코드 블록이 실행됩니다.
4. 코드 블록의 실행이 종료되면 증감식 `i++`가 실행되어 `i` 변수의 값은 1이 됩니다.
5. 증감식 실행이 종료되면 다시 조건식이 실행됩니다. 현재 `i` 변수의 값은 1이므로 조건식의 평가 결과는 `true`입니다.
6. 조건식의 평가 결과가 `true`이므로 코드 블록이 다시 실행됩니다.
7. 코드 블록의 실행이 종료되면 증감식 `i++`가 실행되어 `i` 변수의 값은 2가 됩니다.
8. 증감식 실행이 종료되면 다시 조건식이 실행됩니다. 현재 `i`변수의 값은 2이므로 조건식의 평가 결과는 `fasle`가 되어 `for` 문의 실행이 종료됩니다.

`for` 문의 변수 선언문, 조건식, 증감식은 모두 옵션이므로 반드시 사용할 필요는 없습니다.

let i = 0
for( ;i < 10; i++){
	console.log(i);
}

`for`문 안에 `for`문을 중첩해 사용할 수 있습니다.

for (var i = 1; i <= 2; i++) {
	for (var j = 1; j < 2; j++){
    	console.log(`${i} + ${j} = ${i+j}`)
    }
}

while 문

`while` 문은 주어진 조건식의 평가 결과가 참이면 코드 블록을 계속해서 반복 실행합니다. `for` 문은 반복 횟수가 명확할  때 주로 사용하고 `while` 문은 반복 횟수가 불명확할 때 주로 사용합니다. `while` 문은 조건문의 평가 결과가 거짓이 되면 코드 블록을 실행하지 않고 종료합니다.

var count = 6;

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

조건식의 평가 결과가 언제나 참이면 무한루프가됩니다. 무한루프에서 탈출하기 위해서는 코드 블록 내에 `if` 문으로 탈출 조건을 만들고 `break` 문으로 코드 블록을 탈출합니다.

var count = 0;

// 무한루프
while (true) {
	console.log(count);
    cout++;
    
    // count가 3이면 코드 블록을 탈출합니다.
    if(count === 3) break;
}

do ... while 문

`do while` 문은 코드 블록을 먼저 실행하고 조건식을 평가합니다. 그렇기 때문에 코드 블록은 무조건 한 번 이상 실행됩니다.

var count = 0;

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

 

break 문

---

`switch` 문과 `while` 문을 탈출할 때 `break` 문을 사용해 탈출합니다. 레이블 문, 반복문 `swich` 문을 탈출합니다.

레이블 문이란 식별자가 붙은 문을 말합니다. fpdlqmf ansdmf tkdydgkaus vmfhrmfoadml gmfmadl qhrwkqgowutj rkehrtjddl skQKwlrh dhfbfmf qkftodtlzlf rksmdtjddl shvdkwlqslek

foo: {
	console.log(1);
    break foo; // foo 레이블 블록문을 탈출합니다.
    console.log(2);
}

console.log(3);

// 1
// 3

 

continue 문

---

`continue` 문은 반복문의 코드 블록을 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동시킵니다. `break` 문처럼 반복문을 탈출하지는 않습니다.

// i가 짝수일 때 continue를 통해 현지점에서 실행을 중단하고 반복문의 증감식으로 이동합니다.
for(var i = 1; i <= 10; i++){
	if(i % 2 === 0) continue;
    
    console.log(i); // 1 3 5 7 9
}

 

참고

---

모던 자바스크립트 Deep Dive : 네이버 도서