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

윤상준·2022년 10월 16일
0
post-thumbnail

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

8.1 블록문

블록문 (Block Statement/Compound Statement)
0개 이상의 문을 중괄호로 묶은 것.
코드 블록 또는 블록 이라고도 부른다.

블록문은 자체 종결성을 갖기 때문에 끝에 세미콜론을 붙이지 않는다.

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

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

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

8.2 조건문

조건문 (Conditional Statement)
주어진 조건식 (Conditional Expression)의 평가 결과에 따라 블록 실행을 결정.

8.2.1 if … else 문

조건식이 true면 if 문의 블록이 실행.

false면 else 문의 블록이 실행.

if 문 이후에 else if 문으로 그 다음 조건 설정 가능.

var num = 2;
var kind;

// if 문
if (num > 0) {
  kind = '양수'; // 음수를 구별할 수 없다
}
console.log(kind); // 양수

// if...else 문
if (num > 0) {
  kind = '양수';
} else {
  kind = '음수'; // 0은 음수가 아니다.
}
console.log(kind); // 양수

// if...else if 문
if (num > 0) {
  kind = '양수';
} else if (num < 0) {
  kind = '음수';
} else {
  kind = '영';
}
console.log(kind); // 양수
// x가 짝수이면 result 변수에 문자열 '짝수'를 할당하고, 홀수이면 문자열 '홀수'를 할당한다.
var x = 2;
var result;

if (x % 2) { // 2 % 2는 0이다. 이때 0은 false로 암묵적 강제 변환된다.
  result = '홀수';
} else {
  result = '짝수';
}

console.log(result); // 짝수

조건에 따라 단순히 값을 결정하여 변수에 할당하는 경우 삼항 연산자가 더 간단할 수 있다.

조건에 따라 실행해야 할 내용이 복잡하고, 여러 줄의 출력이 필요한 경우 if … else 문이 유용할 수 있다.

8.2.2 switch 문

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

일치하는 case문이 없을 경우 default 문으로 이동.

case문에 break를 지정하지 않을 경우 다음 case문으로 이동하니 주의가 필요.

// 월을 영어로 변환한다. (11 → 'November')
var month = 11;
var monthName;

switch (month) {
  case 1: monthName = 'January';
  case 2: monthName = 'February';
  case 3: monthName = 'March';
  case 4: monthName = 'April';
  case 5: monthName = 'May';
  case 6: monthName = 'June';
  case 7: monthName = 'July';
  case 8: monthName = 'August';
  case 9: monthName = 'September';
  case 10: monthName = 'October';
  case 11: monthName = 'November';
  case 12: monthName = 'December';
  default: monthName = 'Invalid month';
}

console.log(monthName); // Invalid month
// 월을 영어로 변환한다. (11 → 'November')
var month = 11;
var monthName;

switch (month) {
  case 1: monthName = 'January';
    break;
  case 2: monthName = 'February';
    break;
  case 3: monthName = 'March';
    break;
  case 4: monthName = 'April';
    break;
  case 5: monthName = 'May';
    break;
  case 6: monthName = 'June';
    break;
  case 7: monthName = 'July';
    break;
  case 8: monthName = 'August';
    break;
  case 9: monthName = 'September';
    break;
  case 10: monthName = 'October';
    break;
  case 11: monthName = 'November';
    break;
  case 12: monthName = 'December';
    break;
  default: monthName = 'Invalid month';
}

console.log(monthName); // November

8.3 반복문

반복문 (Loop Statement)
조건식의 평가 결과가 참인 경우 코드 블록을 실행.

8.3.1 for문

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

for (var i = 0; i < 2; i++) {
  console.log(i);
}
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문

조건식의 평가 결과가 참이면 코드 블록을 계속해서 반복 실행.

var count = 0;

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

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

8.3.3 do … while 문

코드 블록을 먼저 실행하고 조건식을 평가.
코드 블록은 무조건 한 번은 실행된다.

var count = 0;

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

8.4 break문

레이블, 반복문, switch 문 등의 코드 블록을 탈출.

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

console.log('Done!');

중첩 for문 중 내부 for문에서 break 사용 시, 내부 for문을 탈출.

이때 외부 for문을 탈출하고 싶다면 레이블 문을 사용할 수 있다.

// 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!');

하지만 레이블 문은 중첩 for문 외부로 탈출할 경우 유용하지만, 그 밖의 경우는 권장하지 않는다.

8.5 continue 문

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

var string = 'Hello World.';
var search = 'l';
var count = 0;

// 문자열은 유사배열이므로 for 문으로 순회할 수 있다.
for (var i = 0; i < string.length; i++) {
  // 'l'이 아니면 현 지점에서 실행을 중단하고 반복문의 증감식으로 이동한다.
  if (string[i] !== search) continue;
  count++; // continue 문이 실행되면 이 문은 실행되지 않는다.
}

console.log(count); // 3

// 참고로 String.prototype.match 메서드를 사용해도 같은 동작을 한다.
const regexp = new RegExp(search, 'g');
console.log(string.match(regexp).length); // 3
for (var i = 0; i < string.length; i++) {
  // 'l'이면 카운트를 증가시킨다.
  if (string[i] === search) count++;
}
profile
하고싶은건 많은데 시간이 없다!

0개의 댓글