Post

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

Posted
By your_full_name 9 min read

8.1 블록문

  • block statement/compound statement, 코드 블록 또는 블록
  • 0개 이상의 문을 중괄호로 묶은 것
  • 문의 끝에는 일반적으로 세미콜론을 붙이지만 블록문은 자체 종결성을 갖기 때문에 세미콜론을 붙이지 않음

8.2 조건문

  • conditional statement
  • 주어진 조건식의 평가 결과에 따라 코드 블록의 실행을 결정
    • 조건식(conditional expression): 불리언 값으로 평가될 수 있는 표현식
  • if...else문, switch문

8.2.1 if...else문

1
2
3
4
5

if (조건식) {
  조건식의 평가 결과가 참일 경우 실행될 코드 블록
} else {
  조건식의 결과가 거짓일 경우 실행될 코드 블록
}
  • 조건식의 평가 결과가 불리언 값이 아니라면 암묵적으로 불리언 값으로 변환됨
  • 조건식을 추가할 때에는 else if문 사용
    • else문과 else if문은 옵션

  • 만약 코드 블록 내의 문이 하나라면 중괄호 생략 가능

    1
2
3
4
5
6
7
8

    var num = 2;
var kind;

if (num > 0) kind = "양수";
else if (num < 0) kind = "음수";
else kind = "영";

console.log(kind); // 양수

  • 조건에 따라 단순히 값을 결정할 때에는 삼항 조건 연산자를 대신 사용하는 편이 더 가독성이 좋다.

    1
2
3
4
5
6

    var num = 2;

// 0은 false로 취급된다.
var kind = num ? (num > 0 ? "양수" : "음수") : "영";

console.log(kind); // 양수

8.2.2 switch문

1
2
3
4
5
6
7
8
9
10

switch (표현식) {
  case 표현식1:
    표현식과 표현식1이 일치하면 실행될 문;
    break;
  case 표현식2:
    표현식과 표현식2가 일치하면 실행될 문;
    break;
  default:
    표현식과 일치하는 case 문이 없을 때 실행될 문;
}
  • 표현식은 주로 문자열이나 숫자 값인 경우가 많다.

  • 폴스루(fall through)

    • 표현식의 평과 결과와 일치하는 case문으로 실행 흐름이 이동해 문을 실행한 뒤에도 이후의 모든 case문과 default문을 실행하는 현상
    • break문을 사용해 코드 블록에서 탈출하여 이를 방지할 수 있다.

    • 이를 활용해 여러 개의 case문을 하나의 조건으로 사용할 수 있다.

      1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

      var year = 2000; // 2000년은 윤년으로 2월이 29일이다.
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");
}

console.log(days); // 29
  • default문
    • switch문의 맨 마지막에 위치
    • 일반적으로 break문 생략

8.3 반복문

  • loop statement
  • 조건식의 평가 결과가 참인 경우 코드 블록을 실행한 뒤 조건식을 다시 평가하여 조건식이 거짓일 때까지 반복
  • for문, while문 , do...while문

8.3.1 for문

1
2
3

for (변수 선언문 또는 할당문; 조건식; 증감식) {
  조건식이 참인 경우 반복 실행될 문;
}
  • for문의 변수 선언문의 변수 이름은 iteration의 i를 사용하는 것이 일반적
  • 변수 선언문, 조건식, 증감식은 모두 옵션
    • 어떤 식도 선언하지 않으면 무한루프가 된다.
      1

      for (;;) { ... }
  • for문 내에 for문을 중첩 가능

8.3.2 while문

  • 조건식의 평가 결과가 불리언 값이 아닌 경우 불리언 값으로 강제 변환

  • 코드 블록 내에 if문으로 탈출 조건을 만들고 break문으로 코드 블록 탈출 가능

    1
2
3
4
5
6
7
8
9

    var count = 0;

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

8.3.3 do...while문

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

    • 코드 블록을 무조건 한 번 이상 실행
    1
2
3
4
5
6
7

    var count = 0;

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

8.4 break문

  • 레이블 문, 반복문 또는 switch문의 코드 블록을 탈출하는데 사용
    • 그 외의 문에 사용하면 SyntaxError 발생

레이블 문

  • 식별자가 붙은 문
    1
2

    // foo라는 레이블 식별자가 붙은 레이블 문
foo: console.log("foo");
  • 실행 순서를 제어하는데 사용
    • case문과 default문도 레이블 문이다.

  • 레이블 문을 탈출하기 위해선 break문에 레이블 식별자를 지정

    • 반복문과 switch문에서는 레이블 식별자를 지정하지 않는다.
    1
2
3
4
5
6
7
8
9
10
11

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

console.log("Done!");

// 1
// Done!

  • 중첩된 for문의 내부 for문에서 외부 for문으로 탈출하기 위해 레이블 문 사용

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    // 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]
// inner [1, 0]
// inner [1, 1]
// Done!
  • 중첩된 for문 외부로 탈출할 때 이외에는 사용을 권장하지 않음

8.5 continue문

  • 반복문의 코드 블록 진행을 중단하고 반복문의 증감식으로 실행 흐름을 이동

  • 특정 경우에는 들여쓰기를 한 단계 줄일 수 있어 가독성을 개선할 수 있다.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

    // 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
}
book_notes
모던 자바스크립트 Deep Dive
This post is licensed under CC BY 4.0 by the author.