[모던 자바스크립트 Deep Dive] 8장. 제어문

제어문

• 제어문은 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용한다.
• 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있다.
• 그러나 코드의 실행 순서 변경 시 코드의 흐름을 직관적으로 이해하는 데 방해가 되고 가독성을 해칠 수도 있다. 가독성이 좋지 않은 코드는 오류를 발생시키는 원인이 된다. 👉 forEach, map, filter, reduce와 같은 고차함수는 제어문의 사용을 억제해 복잡성을 해결할 수 있다. 

 

8.1. 블록문

블록문

• 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부르기도 한다.
• js는 블록문을 하나의 실행 단위로 취급한다. 

 

8.2. 조건문

8.2.2. switch문

• if ... else문은 논리적 참, 거짓으로 실행할 코드 블록을 결정한다.
• 반면 switch문은 논리적 참, 거짓보다는 다양한 상황(case)에 따라 실행할 코드 블록을 결정하는데 사용된다.

폴 스루

var a = 5;

switch (a) {
  case 1:
    console.log("1");
  case 3:
    console.log("3");
  case 5:
    console.log("5");
  case 7:
    console.log("7");
}

/*
실행결과
5
7
*/

switch문의 표현식의 평가 결과와 일치하는 case문으로 이동해 실행한 뒤 switch문을 탈출하지 않고 switch문이 끝날 때까지 이후의 모든 case문과 default 문을 실행하는 것

👉 해결방안: case문에 `break` 키워드를 사용해 코드 블록에서 탈출하도록 해야 한다.

var a = 5;

switch (a) {
  case 1:
    console.log("1");
    break;
  case 3:
    console.log("3");
    break;
  case 5:
    console.log("5");
    break;
  case 7:
    console.log("7");
    break;
}

//실행결과: 5

반대로 폴 스루를 이용해 여러 개의 case문을 하나의 조건으로 사용할 수도 있다.

var a = 5;

switch (a) {
  case 1:
  case 3:
  case 5:
    console.log("1, 3, 5");
    break;
  case 7:
    console.log("7");
    break;
}

//실행결과: 1, 3, 5

 

만약 if ... else 문으로 해결할 수 있다면 switch문보다 if ... else문을 사용하는 편이 좋다.

하지만 조건이 너무 많아서 if ... else 문보다 switch문을 사용했을 때 가독성이 더 좋다면 switch문을 사용하는 편이 좋다.

 

8.3. 반복문

반복문을 대체할 수 있는 자바스크립트의 다양한 기능

• forEach 메서드: 배열을 순회할 때 사용
• for ... in: 객체의 프로퍼티를 열거할 때 사용
• for ... of: ES6에서 도입문 이터러블을 순회

8.3.1. for문

무한루프

for(;;){...}

 

8.4. break문

break: 레이블 문, 반복문, 또는 switch문의 코드 블록을 탈출한다. 그 이외의 코드블록에서 break문을 사용하면 syntaxError가 발생한다.

 

레이블문

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

• 식별자가 붙은 문
• 프로그램의 실행 순서를 제어하는 데 사용
• switch문의 case문과 default문도 레이블문임.

레이블 문을 탈출하려면 break문에 레이블 식별자를 지정한다.

 

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

// 실행결과
// 1
// Done!​

 

중첩된 for문의 내부 for문에서 break문을 실행하면 내부 for문을 탈출하여 외부 for문으로 진입한다.

이때 내부 for문이 아닌 외부 for문을 탈출하기 위해서는 레이블 문을 사용해야 한다.

outer: for (var i = 0; i < 3; i++) {
  for (var j = 0; j < 3; j++) {
    if (i + j === 3) break outer;
    console.log(`inner [${i}, ${j}]`);
  }
}
console.log("Done");

// 실행결과
// inner [0, 0]
// inner [0, 1]
// inner [0, 2]
// inner [1, 0]
// inner [1, 1]
// Done

레이블 문 사용 시 프로그램 흐름이 복잡해져 가독성이 나빠지므로 이중 for문 탈출 용도 이외에는 사용하지 않는 것을 권장한다.

 

---

출처: 모던 자바스크립트 Deep Dive (이웅모 저, 위키북스)