자바스크립트 딥다이브 - 8장 제어문

8. 제어문

제어문(control of statement) 는 조건 에 따라 코드 블록을 실행 하거나 반복 할 때 사용한다.

일반적으로 코드 는 위에서 아래 방향으로 순차적으로 실행되는 Top Down 방식이다.
제어문 을 사용하면 코드의 실행 흐름 을 인위적으로 제어 할 수 있다.
제어문 은 실행 흐름 을 제어하기 때문에 가독성 을 해치는 단점 이 있다.
하지만, forEach, map, filter, reduce 같은 고차함수 를 사용하여 가독성 을 좋게 만들 수 있다.

1) 블록문

0개 이상 의 문(statement) 을 중괄호 {} 로 묶은 것으로 코드 블록 또는 블록 이라고 부른다.
자바스크립트 는 블록문 을 하나의 실행 단위 로 취급한다.
블록문 은 단독을 사용할 수도 있으나 일반적으로 제어문 이나 함수를 정의 할 때 사용하는 것이 일반적 이다.
블록문 은 언제나 문 으로 종료를 의미하는 자체 종결성 을 갖는다.
블록문 의 끝에는 세미콜론 을 붙이지 않는다.

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

// 제어문
let x = 2;
if (x < 10) {
  x++;
}

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

2) 조건문

조건문(conditional statement) 은 주어진 조건식(conditional expression) 의 평가 결과 따라 코드 블록 의 실행을 결정 한다.

조건식(conditional expression) 이란 boolean 값 으로 평가될 수 있는 표현식 을 의미한다.
자바스크립트 는 if ... else 와 switch 문 의 두가지 조건문을 제공 한다.

#1. if...else문

논리적 참 또는 거짓 에 따라 실행할 코드 블록을 결정 한다.

if (conditionalExpression) {
  // 조건식이 참이면 이 코드블록이 실행된다.
} else {
  // 조건식이 거짓이면 이 코드블록이 실행된다.
}

if문 의 조건식 이 boolean이 아닌 경우 자바스크립트 엔진에 의해 boolean값으로 강제 변환 되어 실행할 코드 블록을 결정 한다.

if (조건식1) {
    // 조건식1이 참이면 이 코드 블록이 실행된다.
} else if (조건식2) { // 조건식을 추가하고 싶을 경우 else if문을 사용한다.
    // 조건식2가 참이면 이 코드 블록이 실행된다.
} else {
    // 조건식1과 2가 모두 거짓이면 이 코드블록이 실행된다.
}

else if 와 else 는 옵션 이다. (사용할 수도 있고 사용하지 않을 수도 있다.)
else if 는 여러번 사용 할 수 있다.

const num = 2;
let 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); // 양수

만약 코드 블록 내의 문 이 하나뿐 이면 중괄호를 생략 할 수 있다.

const num = 2;
let kind;

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

console.log(kind); // 양수

대부분의 if ... else 문 은 삼항 조건 연산자 로 바꿀 수 있다.

const x = 2;
let result;

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

console.log(result); // 짝수

result = x % 2 ? '홀수' : '짝수';
console.log(result) // 짝수

const num = 2;
const kind = num ? (num > 0 ? '양수' : '음수') : '영';
console.log(kind); // 양수

삼항 조건 연산자 는 값으로 평가되는 표현식 을 만든다.
값 처럼 사용할 수 있기 때문에 변수 에 할당 할 수 있다.
단순 값을 결정하여 변수에 할당 하는 경우 삼항 조건 연산자 사용하는 것이 좋다.
그러나, 조건 의 내용이 복잡 할 경우 if ... else 문 를 사용하는 것이 좋다.

#2. switch 문

주어진 표현식 을 평가 하여 그 값과 일치하는 표현식 을 갖는 case문 으로 실행 한다.
case문 은 상황을 의미하는 표현식을 지정 하고 콜론 으로 마친다.
표현식과 일치하는 case가 없다면 실행 순서는 default 문 으로 이동한다.
default 는 옵션 으로 사용할 수도 있고 사용하지 않을 수 있다.

switch (표현식) {
    case 표현식1:
        // 실행 구문
        break;
  case 표현식2:
        // 실행 구문2
        break;
    default:
        // 일치하는 케이스가 없을때 실행
}

switch 문 의 표현식은 문자열 이나 숫자 값이 경우가 많다.
if ... else 문 은 논리적 참, 거짓 으로 실행하고, switch 문 은 다양한 상황에 따라 실행한다.

const month = 11;
let monthName;

switch (month) {
    case 1: monthName = 'January';
    case 2: monthName = 'February';
    // 생략
    default: monthName = 'Invalid month';
}
console.log(monthName); // Invalid month 

    case 1: ...
    break; // 코드 블록에서 탈출하는 break문을 사용해야 한다.

console.log(monthName); // November

표현식의 결과와 일치하는 case로 이동 하지만 실행 후 탈출하지 않고 끝까지 실행 된다. (fall through)
break 키워드 를 통해 switch 문을 빠져나가도록 한다.
default 문 은 마지막 에 위치하므로 실행이 종료 되면 switch문을 빠져나가기 때문에 따라서 break 를 생략 하는 것이 일반적이다.

// fall through를 이용하는 예제

const year = 2000;
const month = 2;
let 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:
    // 윤년 계산 알고리즘
    // 1. 연도가 4로 나누어떨어지는 해는 윤년이다.
    // 2. 연도가 4로 나누어떨어지더라도 100으로 나누어떨어지는 해는 평년이다.
    // 3. 연도가 400으로 나누어떨어지는 해는 윤년이다.
    days = ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) ? 29 : 28;
    break;
    default:
        console.log(days) // 29

C언어 를 기반으로 하는 프로그래밍 언어는 대부분 switch문 을 지원 한다.
파이썬 과 같이 switch 문 을 지원하지 않는 프로그래밍 언어 도 있다.
if ... else 문 과 비교하여 가독성 이 좋은 쪽을 선택해 사용 한다.

3) 반복문

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

#1. for문

for (변수 선언문 또는 할당문; 조건식; 증감식) {
    // 조건식이 참인 경우 반복 실행될 문;
}

for (let i = 0; i < 2; i++) {
    console.log(i);
}

// 0
// 1

for 문 을 실행하면 변수 선언 → 조건식 → 코드 블록 → 증감식 순으로 실행 된다.
변수선언, 조건식, 증감식 은 모두 옵션 이다. (무한루프 발생)
for 문 내에 for 문 을 중첩 하여 사용할 수 있다. (n중 for문)

#2. while문

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

for 문 은 반복 횟수가 명확할 때 사용 하고 while 문 은 불명확할 때 사용 한다.
while 문 은 조건문의 평가 결과가 거짓 이면 코드 블록을 실행하지 않고 종료 한다.

let count = 0;

while (count < 3) {
    console.log(count); // 0 1 2
    count++;
}

// 조건식의 평가 결과가 언제나 참이면 무한루프.

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

#3. do…while문

do ... while 문 은 코드 블록을 먼저 실행 하고 조건식을 평가 , 무조건 한번 이상 실행 된다.

let count = 0;

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

4) break문

레이블 문, 반복문, switch 문 의 코드 블록을 탈출 하는 용도로 사용되는 예약어 이다.

레이블 문(label statement) 란 식별자가 붙은 문 을 말한다.

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

레이블 문 은 프로그램의 실행 순서 를 제어 하는 데 사용된다.
case 와 default 도 레이블문 이다.

outer: for (let i = 0; i < 3; i++) {
    for (let 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 문 외부로 탈출할 때 유용 하나, 그밖의 경우에는 권장하지 않는다.
프로그램의 흐름이 복잡 해져 가독성이 나빠지고 오류 발생 가능성이 높아진다.
switch 문 에서 사용할 경우에는 레이블 식별자 를 지정하지 않는다.

const string = 'Hello World';
const search = 'l';
let index;

// 문자열은 유사 배열이므로 for 문으로 순회할 수 있다.
for (let i = 0; i < string.length; i++) {
    // 문자열의 개별 문자가 'l'이면
    if (string[i] === search) {
        index = i;
        break; // 반복문을 탈출
    }
}
console.log(index); // 2

console.log(string.indexOf(search)); // 2

5) continue 문

반복문 의 코드 블록 실행을 현 지점에서 중단 하고 반복문의 증감식 으로 실행 흐름을 이동 시킨다.
break 문 과는 다르게 반복문을 탈출하지 않는다.

const string = 'Hello world';
const search = 'l';
let count = 0;

for (let i = 0; i < string.length; i++) {
    // 'l'이 아니면 현 지점에서 실행을 중단하고 반복문의 증감식으로 이동.
    if (string[i] !== search) continue;
    count++; // countinue 문이 실행되면 이 문은 실행되지 않는다.
}

console.log(count); // 3

const regexp = new RegExp(search, 'g');
console.log(string.match(regexp).length); // 3

if 문 내에서 실행해야 할 코드가 길다면 continue 문을 사용 하는 것이 좋다.

continue 문 을 사용하면 if 문 밖 에 코드를 작성 할 수 있다.

for (let i = 0; i < string.length; i++) {
    // 'l'이 아니면 카운트를 증가시키지 않는다.
    if (string[i] !== search) continue;
    count++;
    // code
}