ModernJS / 05 - 제어문

1. 필요성

조건에 따라 코드 블록을 실행하거나 반복 실행할 때 사용한다. 제어문을 사용하여 코드의 실행 흐름을 인위적으로 제어할 수 있으나 그로 인해 코드의 흐름을 혼란스럽게 만들 수도 있다. 그럼에도 제어문은 코딩을 하는데에 있어 큰 영향력을 주기에 확실하게 이해하는 것은 필요하다.

 

---

2. 블록문

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

• 블록문을 하나의 실행 단위로 취급
• 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문에 블록문의 끝에는 세미콜론을 붙이지 않아도 된다

 

---

3. 조건문

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

• if…else 문, switch 문 2가지가 존재

 

3-1. if … else 문

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

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

조건식은 반드시 불리언 값으로 평가되어야 하며 필요 시에는 암묵적으로 불리언 값으로 변환하여 결정

 

else if 문을 사용하여 조건들을 추가 가능

if (조건식1) { 
	// 조건식1이 "참" 이라면 실행할 코드 블록 
}
else if (조건식2) { 
	// 조건식2가 "참" 이라면 실행할 코드 블록 
	// else if 는 여러 번 사용할 수 있다
}
else { 
	// 조건식1, 조건식2 모두 "거짓" 이라면 실행할 코드 블록 
}

 

3-1-1. if ... else 문과 삼항 조건 연산자

var score = 77;
var result1, result2;

// if ... else 문을 이용한 점수 결정
if (score >= 90) {
	result1 = "A 등급";
}
else if (score >= 50) {
	result1 = "B 등급";
}
else {
	result1 = "C 등급";
}

console.log(result1);

// 삼항 조건 연산자를 이용한 점수 결정
result2 = score>=50 ? (score >=90 ? "A 등급" : "B 등급") : "C 등급";

console.log(result2);

위의 예시는 같은 동작을 if … else 문으로 표현 했는가 삼항 조건 연산자로 표현 했는가의 차이이다. 04 - 연산자 파트에서 이미 공부했듯이 삼항 조건 연산자의 경우에는 값으로 평가되는 표현식 이기에 값처럼 사용하여 “result2” 변수에 할당하여 사용할 수 있지만 if … else 문의 경우 값처럼 사용할 수 없기에 변수에 할당할 수가 없다.

즉, 단순히 값을 결정하여 변수에 할당하는 경우에는 삼항 조건 연사자가, 조건에 따라 실행할 코드 블록의 복잡도가 클 경우에는 if … else 문을 사용하는 것이 코드의 가독성에 좋다.

 

3-2. switch 문

주어진 표현식과 일치하는 표현식을 갖는 case 문의 코드 블록을 실행

switch(표현식) {
	case 표현식1:
		// switch 문의 표현식과 표현식1이 일치하면 실행
		break;
	case 표현식2:
		// switch 문의 표현식과 표현식2가 일치하면 실행
		break;
	...
	default:
		// switch 문의 표현식과 모든 case 의 표현식이 일치하지 않는 경우 실행
}

주어지는 상황이 다양하며 그에 맞는 실행이 필요할 때 사용

→ switch 문의 표현식이 불리언 값보다는 문자열이나 숫자 값인 경우가 많음

 

3-2-1. 폴스루 fall through

var day = 3;
var dayStr;

switch(day) {
	case 0: dayStr = "Monday";
	case 1: dayStr = "Tuesday";
	case 2: dayStr = "Wednesday";
	case 3: dayStr = "Thursday";
	case 4: dayStr = "Friday";
	case 5: dayStr = "Saturday";
	case 6: dayStr = "Sunday";
	default: dayStr = "Invalid Day";
}

console.log(dayStr);
// 예상 결과는 Thursday
// 실제 결과는 Invalid Day

위의 switch 문의 결과는 “Invalid Day” 이다. 그러나 변수 day 의 값이 3이기에 결과는 “Thursday” 여야 한다. 이는 case 3문이 끝이 나더라도 switch 문을 탈출하지 않고 나머지 밑의 case 문들과 default 문까지 실행하기에 최종적으로 “Invalid Day” 가 출력되는 것이다. 이를 폴스루(fall through) 라고 부른다. 탈출하기 위해서는 break 문이 필요하다.

 

var day = 3;
var dayStr;

switch(day) {
	case 0: dayStr = "Monday";
		break;
	case 1: dayStr = "Tuesday";
		break;
	case 2: dayStr = "Wednesday";
		break;
	case 3: dayStr = "Thursday";
		break;
	case 4: dayStr = "Friday";
		break;
	case 5: dayStr = "Saturday";
		break;
	case 6: dayStr = "Sunday";
		break;
	default: dayStr = "Invalid Day";
}

console.log(dayStr); // Thursday

위처럼 필요한 위치에 break 문을 추가하면 day 에 입력된 값에 맞는 원하는 결과가 출력된다.

 

3-3. if … else 문과 switch 문

• if … else 문으로 해결이 되는 수준이라면 switch 문 보다는 if … else 문 사용을 권장
  • switch 문은 case, default, break 등의 다양한 키워드를 사용하며 폴스루의 발생도 고려해야하기 때문
• 만약 조건이 다양하거나 너무 많다면 switch 문을 사용하는 것이 가독성에 더 도움

 

---

4. 반복문

조건식의 평가 결과가 거짓일 때까지 코드 블록을 반복 실행

• for 문, while 문, do…while 문 3가지가 존재

 

4-1. for 문

조건식이 거짓으로 평가될 때까지 코드 블록을 반복 실행

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

// for 문의 () 안에 어떤 식도 작성하지 않으면 무한루프가 되어 코드 블록을 무한히 반복 실행한다
for(;;) {
	...
}

 

구구단 7단을 실행하는 for 문의 예시

for(var i = 1 ; i < 10 ; i++) {
	console.log(`7 * ${i} = ${7*i}`);
}

// var i = 1   -> i 라는 변수를 선언하고 1 값으로 초기화
// i < 10      -> i 가 10 미만인 경우라면 참 -> 10 이상이 되면 반복문 실행 종료
// i++         -> 코드 블록이 한번 실행될 때마다 i 의 값이 +1

 

4-1-1. 중첩 for 문

for 문안에 for 문을 중첩하여 사용 가능

 

변수 값에 맞춰 별(”*”)을 출력하는 예시

for(var i = 1 ; i < 6 ; i++) {
	for(var cnt = 1 ; cnt <= i ; cnt++) {
		process.stdout.write("*"); // 줄바꿈 없이 이어서 출력
	}
	console.log(); // 단계가 끝날 때마다 줄바꿈
}

 

4-2. while 문

조건식의 평가 결과가 참이면 반복적으로 코드 블록을 실행

while(조건식) {
	// 조건식이 참인 경우 반복 실행
}

// while 문의 조건식이 항상 true 라면 무한루프가 되어 코드 블록을 무한히 반복 실행한다
while(true) {
	...
}

 

구구단 7단을 실행하는 while 문의 예시

var i = 1;

while(i < 10) {
	console.log(`7 * ${i} = ${7*i}`);
	i++;
}

// i < 10      -> i 가 10 미만인 경우라면 참 -> 10 이상이 되면 반복문 실행 종료
// i++         -> 한번 코드 블록이 실행되면 마지막에 i 의 값이 +1

 

while 문에서 무한루프로 구현할 때 특정 조건에서 탈출하고 싶다면 if 문과 break 문을 사용

// 무한루프를 이용한 구구단 7단
var i = 1;

while(true) {
	console.log(`7 * ${i} = ${7*i}`);
	i++;

	if(i >= 10) break;
	// 변수 i 의 값이 10이 되는 순간 무한루프를 break 문을 통해 탈출한다
}

 

4-2-1. while 문과 for 문

코드 블록의 반복 횟수가 명확하냐에 따라 주로 사용하는 문이 다름

• 명확한 반복 횟수 → for 문을 주로 사용
• 불명확한 반복 횟수 → while 문을 주로 사용

 

4-3. do … while 문

코드 블록을 먼저 실행하고 조건식을 평가

do {
 // 조건식이 참인 경우 반복 실행
 // 처음 do ... while 문이 실행되면 먼저 실행되기에 반드시 한번은 실행되는 코드 블록이다
} while(조건식)

 

---

5. break 문

속한 코드 블록을 탈출하는 역할

• 레이블 문, 반복문, switch 문의 코드 블록에서 사용
• 이 외에는 사용시 SyntaxError 발생
• 반복문에서 불필요한 반복을 회피할 수 있어 유용함

 

5-1. 레이블 문에서 break 문

식별자가 붙은 문

yaho: {
	console.log("yaho~");
	break yaho;
	console.log("yaho again?");
}

// 위처럼 식별자가 붙은 문을 레이블 문이라 한다
// switch, case, default 문들도 레이블 문이다

outer: for(var i = 1; i < 10; i++) {
	for (var j = 1; j< 10; j++) {
		if((i===7) && (j===7)) {
			console.log("77 을 찾았어요");
			break outer;
		}
		console.log("77 을 못찾았어요")
	}
}

// i 와 j 모두 7 이라면 중첩 for 문 전체 탈출 -> 레이블 식별자를 이용

• 중첩된 for 문 외부로 탈출할 때 유용
  • 중첩된 for 문의 내부 for 문에서 break 사용은 단순히 내부 for 문만을 탈출
  • 레이블 문 전체를 탈출 하기 위해서는 “break 식별자;” 를 사용
• 프로그램의 흐름이 복잡해져 가독성이 나빠지고 오류를 발생시킬 가능성이 높아지기 때문에 이 외의 경우는 사용을 가급적이면 줄이는 것이 좋음

 

---

6. continue 문

코드 블록 실행을 현 시점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동

break 문 처럼 반복문 자체를 탈출하는 것은 아님

var count = 0;

for(var i = 1; i < 11; i++) {
	if(i%2) continue;
	count++;
}

console.log(count);
// if(i%2) continue -> 만약 i 값이 짝수라면 중단하고 다음 반복 실행으로 이동
//                  -> 만약 i 값이 홀수라면 continue 는 실행하지 않고 count++ 실행

 

6-1. 사용

var count = 0;

for(var i = 1; i < 11; i++) {
	if(!(i%2)) count++;
}

console.log(count);

위의 코드처럼 continue 문을 사용하지 않았을 때 더욱 간결하고 간편해지는 경우도 존재한다. 만약 if 문 내에서 실행해야 할 코드 블록이 길거나 복잡하거나 하는 경우에는 continue 문을 사용하는 것이 가독성을 더 높일 수도 있다.

 

---