제어문(control flow statement) : 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용
➔ 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어 가능함
8.1 블록문 (block statement / compound statement)
➔ 0개 이상의 문을 중괄호로 묶은 것으로 코드 블록 또는 블록이라고 부름
➔ 하나의 실행 단위로 취급
➔ 블록문은 자체 종결성을 갖기 때문에 블록문 끝에는 세미콜론(;)을 붙이지 않음
// 블록문
{
var foo = 10;
}
// 제어문
var x = 1;
if (x < 10 ){
x++;
}
// 함수 선언문
function sum(a, b){
return a + b;
}
8.2 조건문 (conditional statement)
➔ 주어진 조건식(conditional expression)의 평가 결과에 따라 코드 블록의 실행을 결정
조건식* : 불리언 값으로 평가될 수 있는 표현식으로 JS에서는 if ... else문과 switch문으로 두 가지 조건문을 제공
➔ if...else 문은 논리적 참, 거짓으로 실행할 코드 블록 결정, switch 문은 다양한 상황(case)에 따라 실행할 코드 블록 결정 시 사용
8.2.1 if ... else 문
➔ 조건식의 평가 결과가 true일 경우, if문의 코드 블록 실행, false일 경우, else문의 코드 블록이 실행됨
➔ if문의 조건식은 불리언 값으로 평가되어야 함
(만약 if문의 조건식이 불리언 값이 아니라면, 자바스크립트 엔진에 의해 암묵적 타입 변환되어 실행됨)
➔ else if 문과 else 문은 옵션이며 if 문과 else 문은 2번 이상 사용할 수 없지만 else if문은 여러 번 사용이 가능함
➔ 코드 블록 내의 문이 하나뿐이면 중괄호 생략 가능
➔ 대부분의 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); //짝수
8.2.2 switch 문
➔ 주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 실행 흐름을 옮김
➔ switch 문의 표현식과 일치하는 case 문이 없다면 실행 순서는 default 문으로 이동 (default문은 선택 사항)
➔ default 문에는 break 문을 생략하는 것이 일반적임
(default 문은 switch 문의 맨 마지막에 위치하기 때문에 default 문의 실행이 종료되면 switch 문을 빠져나감)
//월을 영어로 변환
var month = 11;
var monthName;
switch (month) {
case 1: monthName = 'January';
case 2: monthName = 'February';
case 3: monthName = 'March';
case 4: monthName = 'April';
case 5: monthName = 'May';
case 6: monthName = 'June';
case 7: monthName = 'July';
case 8: monthName = 'August';
case 9: monthName = 'September';
case 10: monthName = 'October';
case 11: monthName = 'November';
case 12: monthName = 'December';
default: monthName = 'Invalid month'
}
console.log(monthName); // Invalid month
// mOnthName 변수에 1 November1 가 할당된 후
// switch 문을 탈출하지 않고 연이어 ' December' 가 재할당되고 마지막으로 ' Invalid month'가 재할당된 것
└ 위 예제를 실행하면 폴스루(fall through) 때문에 'November'가출력되지 않고 'Invalid month'가 출력됨
└ 폴스루(fall through) : switch 문의 평가 결과와 일치하는 case 문으로 실행 흐름이 이동하여 문을 실행한 후,
switch 문을 탈출하지 않고 switch 문이 끝날 때까지 이후의 모든 case 문과 default 문을 실행
└ break 문을 생략한 폴스루가 유용한 경우도 아래와 같이 존재함
var year = 2000; // 2000년은 윤년으로 2월이 29일
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:
// 윤년 계산 알고리즘
// 1. 연도가 4로 나누어떨어자는 해(2000, 2004, 2008, 2012, 2016, 2020... )는 윤년
// 2. 연도가 4로 나누어떨어지더라도 연도가 100으로 나누어떨어자는 해 (2000, 2100, 2200... )는 평년
// 3. 연도가 400으로 나누어떨어지는 해(2000, 2400, 2800... )는 윤년
days = ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) ? 29 : 28;
break;
default:
console.log('Invalid month');
}
console.log(days); // 29
8.3 반복문 (loop statement)
➔ 조건식의 평가 결과가 참인 경우 코드 블록 실행, 조건식이 거짓일 때까지 반복 실행
➔ JS에서는 for 문, while 문, do... while 문 제공
➔ for 문은 반복 횟수가 명확할 때 주로 사용, while 문은 반복 횟수가 불명확할 때 주로 사용
8.3.1 for 문
<실행 순서>
- for 문 실행 시 변수 선언문 실행, 변수 선언문은 for문 내에서 단 한 번만 실행됨
- 조건식 실행, 현재 i 변수 값은 0이기 때문에 조건식의 평가 결과는 true
- 조건식이 true이기 때문에 코드 블록 실행, 증감문으로 실행 흐름이 이동되는 것이 아닌 코드 블록으로 실행 흐름이 이동
- 코드 블록의 실행이 종료되면 증감식이 실행되어 i 변수는 1인 됨
- 증감식 실행 후 다시 조건식 실행, 현재 i 변수 값은 1이기에 조건식은 true, 이때 변수 선언문이 아닌 조건식이 실행됨에 주의
8.3.2 while 문
➔ 조건문의 평가 결과가 거짓이 되면 코드 블록을 실행하지 않고 종료
var count = 0;
// 무한루프
while (true) {
console.log(count);
count++;
// count가 3이면 코드 블록을 탈출한다
if (count === 3) break;
} // count ➔ 0 1 2
// 무한루프에서 탈출하기 위해서는 코드 블록 내에 if문으로 탈출 조건 만들고 break 문으로 코드블록 탈출
8.3.3 do...while 문
➔ 코드 블록을 먼저 실행한 후 조건식을 평가함, 때문에 코드 블록이 무조건 한 번 이상 실행됨
var count = 0;
// count가 3보다 작을 때까지 코드 블록을 계속 반복 실행한다
do {
console.log(count); // 0 1 2
count++;
} while (count < 3);
8.4 break 문
➔ 레이블 문, 반복문, switch 문의 코드 블록을 탈출함 (해당 문 외에 break 문 사용 시 SyntaxError 발생)
└ 레이블 문(label statement)* : 식별자가 붙은 문으로 프로그램의 실행 순서를 제어하는 데 사용, 레이블 문 탈출 시 break문에 레이블 식별자 지정해 줌
// outer라는 식별자가 붙은 레이블 for 문
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}j');
}
}
console.log('Done!');
8.5 continue 문
➔ 반복문의 코드 블록 실행을 현 지점에서 중단하고, 반복문의 증감식으로 실행 흐름을 이동시킴, break 문처럼 반복문을 탈출하지는 않음
var string = 'Hello World.';
var search = 'l';
var count = 0;
// 문자열은 유사 배열이므로 for 문으로 순회할 수 있음
for (var i = 0; i < string.length; i++) {
// 'l'이 아니면 현 지점에서 실행을 중단하고 반복문의 증감식으로 이동
if (string[i] !== search) continue;
count++; // continue 문이 실행되면 이 문은 실행되지 않음
}
console.log(count); // 3
'🦎모던 자바스크립트 Deep Dive' 카테고리의 다른 글
[Chap 11] 원시 값과 객체의 비교 (0) | 2024.04.10 |
---|---|
[Chap 10] 객체 리터럴 (0) | 2024.04.10 |
[Chap 07] 연산자 (0) | 2024.04.01 |
[Chap 05] 표현식과 문 (0) | 2024.03.27 |
[Chap 04] 변수 (0) | 2024.03.27 |