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

제어문 (Control Flow Statement)

조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용

• 일반적으로 코드는 위에서 아래 방향으로 순차적으로 실행된다.
• 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있다. 
• 그러나 동시에 직관적인 코드의 흐름을 혼란스럽게 만들어 가독성을 해칠 수 있다. 
  • 뒤에서 살펴볼 forEach, map, filter, reduce와 같은 고차 함수를 사용한 함수형 프로그래밍 기법에서는 제어문의 사용을 억제하여 복잡성을 해결하려고 노력한다. 

블록문 (Block Statement / Compound Statement)

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

• 자바스크립트는 블록문을 하나의 실행 단위로 취급한다.
• 블록문은 단독으로 사용할 수도 있으나 제어문이나 함수를 정의할 때 사용하는 것이 일반적이다. 
• 블록문은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문에 끝에 세미콜론을 붙이지 않는다. 

// 블록문
{
	var goo = 10;
}

// 제어문
var x = 1;
if (x < 10) 
{
	x++;
}

// 함수 선언문
function sum (a, b)
{
	return a + b;
}

 

조건문 (Conditional Statement)

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

• 조건식: 불리언 값으로 평가될 수 있는 표현식
• 자바스크립트는 if else문과 switch 문으로 두 가지 조건문을 제공한다. 

if else 문

주어진 조건식의 평가 결과, 즉 논리적 참 또는 거짓에 따라 실행할 코드 블록을 결정

• if 문의 조건식은 불리언 값으로 평가되어야 한다. 
  • if 문의 조건식이 불리언 값이 아닌 값으로 평가되면 암묵적으로 불리언 값으로 강제 변환된다.  
• 조건식을 추가할 때에는 else if 문을 사용한다. 
• else 문과 else if 문은 옵션으로 사용하지 않을 수 있다. 
• 대부분의 if else문은 삼항 조건 연산자로 바꿔쓸 수 있다.
• true일 경우 if 문의 코드 블록이 실행
• false일 경우 else 문의 코드 블록이 실행 

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

 

Switch 문

주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 실행 흐름을 옮김

• case 문은 상황 (case)을 의미하는 표현식을 지정하고 콜론으로 마친다. 
• 그리고 그 뒤에 실행할 문들을 위치시킨다. 
• switch 문의 표현식과 일치하는 case문이 없다면 실행 순서는 default 문으로 이동한다.
  • default 문은 선택사항으로 사용할 수도 있고 사용하지 않을 수도 있다. 
• switch 문의 표현식은 불리언 값보다는 문자열이나 숫자 값인 경우가 많다.

✨ if else문 : 논리적 참, 거짓으로 실행할 코드 블록을 결정한다. 
✨ switch문 : 다양한 상황(case)에 따라 실행할 코드 블록을 결정한다.

swtich (표현식) 
{
	case 표현식1:
		switch 문의 표현식과 표현식1이 일치하면 실행될 문;
		break;
	case 표현식2:
		switch 문의 표현식과 표현식2가 일치하면 실행될 문;
		break;
	...
	default:
		switch 문의 표현식과 일치하는 case 문이 없을 때 실행될 문;
}

폴 스루 (Fall Through)

switch 문을 실행한 후 switch 문을 탈출하지 않고 switch 문이 끝날 때까지 이후의 모든 case 문과 default 문을 실행하는 것

• 이 경우, 각 case 에 해당하는 실행문이 전부 실행되고 난 후 마지막 default에 있는 실행문이 실행된다. 
• case 문의 마지막에 break 를 사용하지 않을 경우 올바른 값을 반환하지 않고 폴 스루가 발생한다. 
• 폴스루를 활용해 여러 개의 case 문을 하나의 조건으로 사용할 수도 있다. 

var year = 2000;  // 2000년은 윤년으로 2월이 29일이다.
var month = 2;
var days = 0;

swtich (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, 2024, ...)는 윤년
        // 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("Invaild month");
}

• if else 문으로 해결할 수 있다면 switch 문보다 if else 문을 사용하는 것이 좋다
• 그러나 조건이 너무 많아 switch 문의 가독성이 더 좋다면 switch 문을 사용하는 것이 좋다.

반복문 (Loop Statement)

조건식의 평가 결과가 참인 경우 조건식이 거짓이 될 때까지 코드 블록을 반복하여 실행

• 자바스크립트는 아래 세 가지 반복 문을 제공한다.
  • for 문
  • while 문
  • do ... while 문

🔥 반복문을 대체할 수 있는 다양한 기능
✨ 자바스크립트는 배열을 순회할 때 사용하는 forEach 메서드, 객체의 프로퍼티를 열거할 때 사용하는 for ... in 문, ES6에서 도입된 이터러블을 순회할 수 있는 for ... of 문과 같이 반복문을 대체할 수 있는 다양한 기능을 제공한다. 

for 문

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

// 일반적으로 사용되는 for 문의 형태 
for (변수 선언문 또는 할당문; 조건식; 증감식)
{ 조건식이 참인 경우 반복 실행될 문; }

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

• for 문의 변수 선언문, 조건식, 증감식은 모두 옵션이다. 
  • 단, 어떤 식도 선언하지 않을 경우 무한루프가 된다. 
• for 문 내에 for 문을 중첩하여 중첩 for 문을 사용할 수 있다. 

while 문

주어진 조건식의 평가 결과가 참이면 고드 블록을 계속해서 반복 실행

✨ for 문 : 반복 횟수가 명확할 때 주로 사용
✨ while 문 : 반복 횟수가 불명확할 때 주로 사용

• while 문은 조건문의 평가 결과가 거짓이 되면 코드 블록을 실행하지 않고 종료한다. 
• 조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 강제 변환하여 논리적 참, 거짓을 구별한다. 

var cnt = 0;

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

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

var cnt = 0;

// 무한루프
while (true)
{
	console.log(cnt);
    cnt ++;
    
    // cnt가 3이면 코드 블록을 탈출한다.
    if (cnt === 3)
    	break;
} // 0 1 2

do ... while 문

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

• 코드 블록은 무조건 한 번 이상 실행된다. 

var cnt = 0;

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

break 문

레이블 문, 반복문(for, for ... in, for ... of, while, do ... while) 또는 switch 문의 코드 블록을 탈출한다.

• 이외의 상황에서 break 문을 사용하면 SyntaxError가 발생한다. 
• 반복문을 더 이상 진행하지 않아도 될 때 불필요한 반복을 회피할 수 있어 유용하다. 
• 중첩된 for 문의 내부 for 문에서 break 문을 실행하면 내부 for 문을 탈출하여 외부 for 문으로 진입하는데, 이때 외부 for 문을 탈출하려면 레이블 문을 사용한다. 

레이블 문 (Lable Statement)

식별자가 붙은 문

// foo 라는 레이블 식별자가 붙은 레이블 문
foo: console.log('foo');

// foo 라는 식별자가 붙은 레이블 블록문
foo:
{
	console.log(1);
    break foo; // foo 레이블 블록문 탈출
    console.log(2);
}

console.log('Done!');

• 레이블 문은 프로그램의 실행 순서를 제어하는 데 사용한다.
  • 사실 switch 문의 case 문과 default 문도 레이블 문이다!
• 레이블 문을 탈출하려면 break문에 레이블 식별자를 지정한다. 
• 반복문, switch 문에서 break를 사용할 경우에는 식별자를 지정하지 않는다. 
• 중첩된 for 문 외부로 탈출할 때 유용하지만 그 밖의 경우에는 사용하지 않는 것이 좋다. 
  • 프로그램의 흐름이 복잡해져서 가독성이 나빠지고 오류를 발생시킬 가능성이 높아지기 때문이다. 

continue 문

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

• break 문처럼 반복문을 탈출하지는 않는다. 

var string = 'Hello world';
var search = 'l';
var count = 0;

// 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
}

• if 문 내에서 실행해야 할 코드가 길다면 continue 문을 사용하여 들여쓰기를 최소화하는 것이 코드의 가독성을 높인다.