💻 DEV/JavaScript

[모던자바스크립트 Deep Dive] 08장 제어문 control flow statement

웡지 2021. 11. 4. 23:13

8.1 블록문 block statement, compound statement

  • 문의 종료를 의미하는 자체 종결성을 갖기 때문에 끝에는 세미콜론을 붙이지 않는다.
// 블록문
{
    var foo = 10;
}

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

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

8.2 조건문 conditional statement

8.2.1 if... else

  • if 문의 조건식이 불리언 값이 아닌 값으로 평가되어지면 자바스크립트 엔진에 의해 암묵적 타입변환이 이루어진다.
  • 0은 false로 취급된다.
  • 논리적 참, 거짓으로 실행할 코드 블록을 결정한다.

8.2.2 switch

  • switch문의 표현식은 boolean 값보다는 문자열이나 숫자 값인 경우가 많다.
  • 논리적 참, 거짓보다는 다양한 상황(case)에 따라 실행할 코드 블록을 결정할 때 사용한다.
switch(표현식) {
    case 표현식1:
        'switch문의 표현식과 표현식1이 일치하면 실행될 문';
        break;
    case 표현식2:
        'switch문의 표현식과 표현식2이 일치하면 실행될 문';
        break;
    default:
        'switch문의 표현식과 일치하는 case문이 없을 때 실행될 문';
}

1 ) break 문의 중요성 (폴스루)

var month = 11;
var monthName;

switch(month) {
    case 11: monthName = 'November';
    case 12: monthName = 'December';
    default: monthName = 'Invalid month';
}

console.log(monthName); //Invalid month
  • 올바른 switch 문은 break문으로 코드 블록을 탈출하게끔 작업해야한다.
  • 폴스루 (fall through) : case11까지 거쳤지만 코드 실행 후 swith문을 빠져나오지 않고 switch문이 끝날 때까지 이후의 모든 case 문과 default 문을 실행했다.

위의코드를 고쳐보자.

var month = 11;
var monthName;

switch(month) {
    case 11: monthName = 'November';
        break;
    case 12: monthName = 'December';
        break;
    default: monthName = 'Invalid month';
    // default문에서는 breack문을 생략하는 것이 일반적이다. 
}

console.log(monthName); //November

2 ) break 문을 의도적으로 쓰지 않기.

  • 폴스루를 이용해서 여러 개의 case 문을 하나의 조건으로 사용할 수 있다.
// 윤년인지 판별해서 2월의 일수를 계산하는 예제

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')
}

8.3 반복문 loop statement

  • for
  • while
  • do... while
  • 반복문을 대체할 수 있는 다양한 기능
    forEach 메서드 : 배열 순회
    for...in 문 : 객체의 프로퍼티를 열거할 때 사용
    for...of 문 : 이터러블을 순회할 수 있다 (ES6)

8.3.1 for

  • 반복 횟수가 명확할 때 사용
  • 무한루프
    • for문의 변수 선언문, 조건식, 증감식은 모두 옵션이라 반드시 사용할 필요는 없다.
    • 단, 어떤 식도 선언하지 않으면 무한루프가 된다.
  • 중첩 for문
    • 두 개의 주사위를 던졌을 때 두 눈의 합이 6이 되는 모든 경우의 수를 출력하기 위해
    • for (var i = 1; i <= 6; i++) { for (var j = 1; j <= 6; j++) { if ( i + j === 6 ) console.log(`[${i}, ${j}]`); } }

8.3.2 while

  • 반복 횟수가 불명확할 때 주로 사용한다.
  • 조건식의 평가 결과가 참이면 코드 블록을 계속해서 반복 실행한다.
  • 조건식을 불리언 값으로 강제 변환하여 논리적 참, 거짓을 구별한다.
  • 무한루프에서 탈출하기 위해서는 코드 블록 내에 if 문으로 탈출 조건을 만들고 , break 문으로 코드 블록을 탈출한다.
var count = 0;

while (true) {
    console.log(count);
    count++;
    if(count ===3) break;
}

8.3.3 do...while

  • 코드 블록을 먼저 실행하고 조건식을 평가한다.
  • 따라서 코드 블록은 무조건 한 번 이상 실행된다.
var count = 0;

do {
    console.log(count);
    count++;
} while (count < 3);

8.4 break 문

  • 레이블문(label statement), 반복문, switch 문의 코드 블록을 탈출한다.
  • 레이블문(label statement), 반복문, switch 문의 코드 블록 외에 사용하면 SyntaxError(문법 에러)가 발생한다.
if (true) {
    break; // Uncaught SyntaxError : Illegal break statement
}

레이블 문(Label statement) 이란?

식별자가 붙은 문

// 문법
label : statement

// example
soo: console.log('soo')

// switch 문의 case 뭔과 default 문도 레이블 문이다. 
// 레이블 문을 탈출하려면 break 문에 레이블 식별자를 지정한다. 

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

8.5 continue

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