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

하지만 코드 순서가 변경되면 직관적인 코드의 흐름을 혼란스럽게 만든다. (가독성을 해친다.) 따라서 forEach, map, filter, reduce 같은 고차 함수를 사용한 함수형 프로그래밍 기업에서는 제어문 사용을 억제하여 복잡성을 해결하려고 노력한다.

블록문

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

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

if...else 문

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

조건식은 불리언 값으로 평가되어야 한다. 만약 if 문의 조건식이 불리언 값이 아닌 값으로 평가되면 자바스크립트 엔진에 의해 암묵적으로 불리언 값으로 변한되어 실행할 코드 블록을 결정한다.

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

만약 코드 블록 내의 문이 하나뿐이라면 중괄호를 생략할 수 있다.

var num = 2;
var kind;

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

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

var x = 2;

var result = x % 2 ? '홀수' : '짝수';
console.log(result);

if...else if...else 문은 다음과 같이 바꿔 쓸 수 있다.

var num = 2;

var kind = num ? (num > 0 ? '양수' : '음수') : '영';

삼항 조건 연산자는 값으로 평가되는 표현식을 만든다. 따라서 삼항 조건 연산자 표현식은 값처럼 사용할 수 있기 때문에 변수에 할당할 수 있다. (리액트에서 조건에 따라 페이지를 띄울때 쓰니 편하다 😎)

switch 문

switch (표현식) {
	case 표현식1:
		switch문의 표현식과 표현식1이 일치하면 실행될 문;
		break;

	case 표현식2:
		switch문의 표현식과 표현식2이 일치하면 실행될 문;
		break;

	default:
		switch문의 표현식과 일치하는 case 문이 없을 때 실행될 문

break 문을 적지 않으면 case가 밑으로 쭈욱~ 내려가면서 모두 출력된다. (마지막은 default)

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

// 윤년구하기// 1. 연도가 4로 나누어 떨어지는 해는 윤년이다.// 2. 연도가 4로 나누어 떨어지더라도 100으로 나누어떨어지는 해는 평년이다.// 3. 연도가 400으로 나누어 떨어지는 해는 윤년이다.var year = 2000;
var month = 2;
var 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

반복문

자바스크립트는 for문 while문, do...while문을 제공한다.

반복문을 대체할 수 있는 다양한 기능

배열을 순회할 때 사용할 수 있는 forEach 메서드, 객체의 프로퍼티를 열거할 때 사용하는 for ...in문

ES6에서 도입된 이터러블을 순회할 수 이쓴 for ...of문과 같이 반복문을 대체할 수 있는 다양한 기능을 제공한다.

// do while문var count = 0;

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

break 문

switch 문과 while문에서 살펴보았듯이 break 문은 코드 블록을 탈출한다. 좀 더 정확히 표현하자면 코드 블록을 탈줄하는 것이 아니라 레이블 문, 반복문 또는 switch 문의 코드 블록을 탈출한다. 레이블 문, 반복문, swith문의 코트 블록 외에 break문을 사용하면 SyntaxError(문법 에러)가 발생한다.

if (true) {
	break;// Uncaught SyntaxError: Illegal break statement
}

참고로 레이블 문이란 식별자가 붙은 문을 말한다.

foo: console.log('foo');

foo: {
	console.log(1);
	break foo;
	console.log(2);
}

console.log('Done!');

continue문

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