제어문이란?
제어문의 역할
조건에 따라 코드블록을 실행(조건문)하거나 반복실행(반복문)할 때 사용한다.
제어문의 단점
제어문을 사용하면 위에서 아래로 순차적으로 진행되는 기존의 코드 실행 흐름을 인위적으로 제어할 수 있다.
하지만 코드를 이해하기 어렵게 만들어 가독성을 해치는 단점이 있다
1. 블록문
0개 이상의 문을 중괄호로 묶은 것, 하나의 실행 단위.
단독으로 사용할 수 있고, 제어문, 함수를 정의할 때 사용한다.
// 블록문
{
var foo = 10;
}
// 제어문
var x = 1;
if(x<10){
x++;
}
// 함수 선언문
function sum(a, b) {
return a + b;
}
2. 조건문
조건식의 평가 결과에 따라 블록문의 실행을 결정한다.
이 때 조건식은 불리언 값으로 평가되는데 불리언 값이 아니면 자바스크립트 엔진에 의해 암묵적으로 강제변환되어 코드 블록을 결정한다.
2-1-1. if-else문
if(조건식1){
// 조건식1이 참이면 이 코드블록이 실행됨
}
else if(조건식2){
// 조건식2이 참이면 이 코드블록이 실행됨
}
else{
// 조건식1과 조건식2가 거짓이면 이 코드블록이 실행됨
}2-1-2. 삼항 조건 연산자
삼항 조건 연산자는 값으로 평가되는 "표현식"을 만든다.
따라서 값처럼 사용할 수 있기 때문에 변수에 할당할 수 있다.
하지만 if-else문은 표현식이 아닌 "문"이기 때문에 변수에 할당 할 수 없다.
단순히 값을 결정하여 변수에 할당하는 경우에는 삼항 조건 연산자를 사용하는 것이 가독성이 더 좋다.
var num = 2;
var kind;
if( num > 0 ) kind = '양수'
else if( num < 0 ) kind = '음수'
else kind = '영'
console.log(kind);var num = 2;
var kind = num ? (num > 0 ? '양수' : '음수') : '영';
console.log(kind);2-2. switch문
주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case문으로 실행 흐름을 옮긴다. case문은 상황을 의미하는 표현식을 지정하고 콜론으로 마친다. 그리고 그 뒤에 실행할 문들을 위치시킨다. (break문 꼭 넣기)
switch(표현식) {
case 표현식1:
switch 문의 표현식과 표현식1이 일치하면 실행;
break;
case 표현식2:
switch 문의 표현식과 표현식2이 일치하면 실행;
break;
default:
switch 문의 표현식과 일치하는 case문이 없을 때 실행;
}3. 반복문
조건식의 평가 결과가 참인 경우 코드 블록을 실행한다.
그 후 조건식을 다시 평가해서 여전히 참인 경우 코드 블록을 다시 실행한다. (즉 조건식이 거짓일 때까지....)
for문, while문, do...while문
3-1. for문
for(변수 선언문 또는 할당문; 조건식; 증감식) {
조건식이 참일 경우 반복 실행될 문;
}
1. 변수 선언문 실행. var i=0이 실행된다. (단 한번만 실행)
2. 조건식 실행. 현재 i의 값은 0이므로 조건식의 평가 결과는 true
3. 조건식의 평가 결과가 true이므로 코드 블록 실행
4. 코드 블록 실행 후 증감식 i++ 실행. (i=1)
5. 증감식까지 종료되면 다시 조건식이 실행된다. 평가 결과는 true
6. 코드 블록 실행
7. 코드 블록 실행 후 증감식 i++ 실행. (i=2)
8. 다시 조건식 실행. 현재 변수값은 2이므로 평가 결과는 false. for문 실행 종료
3-2. while문
주어진 조건식의 평가 결과가 참이면 코드 블록을 계속해서 반복 실행한다.
for문은 반복횟수가 명확할 때 사용하고 while문은 반복횟수가 불명확할 때 주로 사용한다.
var count = 0;
// count가 3보다 작을 때까지 실행
while (count < 3) {
console.log(count); // 0 1 2
count++;
}3-3. do...while문
코드 블록을 먼저 실행하고 조건식을 실행한다. 무조건 한번 이상 실행되는 것.
var count = 0;
// count가 3보다 작을 때까지 코드 블록을 계속 반복 실행한다.
do {
console.log(count);
count++;
} while (count < 3); // 0 1 23-4. break문
레이블 문, 반복문, switch문의 코드 블록을 탈출할 때 쓰인다.
레이블 문이란?
식별자가 붙은 문을 의미한다. 프로그램의 실행 순서를 제어하는데 사용한다.
switch문의 case문과 default문도 레이블 문이다.
// 1. foo라는 식별자가 붙은 레이블 블록문
foo: {
console.log(1);
break foo; // foo 레이블 블록문을 탈출한다.
console.log(2);
}
console.log('Done!');
// 결과값 : 1 Done!// 2. 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}]`);
}
}
console.log('Done!');
// 결과값
//'inner [0, 0]'
//'inner [0, 1]'
//'inner [0, 2]'
//'Done!'
//'inner [1, 0]'
//'inner [1, 1]'3-5. continue문
반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동시킨다. (break문처럼 반복문을 탈출x)
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
// 참고로 String.prototype.match 메서드를 사용해도 같은 동작을 한다.
const regexp = new RegExp(search, 'g');
console.log(string.match(regexp).length); // 3H와 l은 같지않으므로 continue문이 실행된다.
그러므로 현 지점에서 반복문을 중단하고 증감식을 실행한다.
다음 순서인 e와 l을 비교한다. (이것도 continue문 실행)
다음 순서인 l와 l을 비교한다. 조건식이 true이므로 continue문이 아니라 조건식 문인 count++을 실행한다.
어떨 때 continue문을 써야할까?
1. if문 내에서 실행할 코드가 한 줄이라면 contiune문을 안 쓰는 것이 가독성에 좋다.
for (var i = 0; i < string.length; i++) { // 'l'이면 카운트를 증가시킨다. if (string[i] === search) count++; }2. if문 밖에 코드를 작성하고 싶을 때는 continue문을 사용한다.
// continue 문을 사용하지 않으면 if 문 내에 코드를 작성해야 한다. for (var i = 0; i < string.length; i++) { // 'l'이면 카운트를 증가시킨다. if (string[i] === search) { count++; // code // code // code } } // continue 문을 사용하면 if 문 밖에 코드를 작성할 수 있다. for (var i = 0; i < string.length; i++) { // 'l'이 아니면 카운트를 증가시키지 않는다. if (string[i] !== search) continue; count++; // code // code // code }
