JavaScript - #8. 제어문 (1)

제어문은 코드의 흐름을 조건에 따라서 인위적으로 제어하는 것의 의미한다.

일반적으로 코드는 위에서 부터 순차적으로 실행이 되지만 제어문을 사용하면 이 흐름을 내가 원하는대로 제어한다는 것이다.

 

제어문에 들어가기 앞서 블록문에 대하여 알아보자.

 

블록문 (코드블록)

0개이상의 문을 중괄호를 통해 묶은 것.

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

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

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

블록문을 사용한다면 기존 1개 문 단위의 실행에서 1개이상 문을 실행단위로 묶을 수 있다는 것이다.

우리가 지금부터 알아볼 제어문이나 함수 정의에서 이 블록문을 사용하게 된다.

---

1. 조건문 (conditional statement)

조건문은 주어진 조건식의 평가 결과에 따라서 블록의 실행여부를 판단한다.

여기서 조건식은 boolean 타입의 결과값으로 평가되는 표현식이다.

JavaScript에서 제공하는 조건문은 if...else문, switch문 두가지가 있다.

 

- if...else문

if...else문은 boolean 타입의 값으로 평가되는 조건식의 결과에 따라서 실행되는 코드 블록을 결정한다.

만약 조건식이 true일 경우 if문의 코드블록이 실행되며, false라면 else문의 코드블록이 실행된다.

 

여러가지 경우의 수를 표현하고 싶다면 조건식을 추가하여 사용도 가능하다.

이를 응용하면 다음과 같은 코드를 작성할 수 있다.

let num = 2;
let kind;

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

console.log(num,':', kind); // => 2: 양수

다음 코드를 분석해보자.

먼저 조건식에서 사용되는 피연산자는 num이다.

num은 2라는 숫자로 초기화가 되어있다.

 

가장먼저 if문에 있는 조건식을 확인해보자.

(num > 0)

num이 2이기 때문에 해당 조건식은 true(참)이다.

따라서 해당 조건식과 연결되어있는 코드블록을 실행시킨다.

kind = '양수'

 

if...else 조건문에서 실행된 코드블록이 있기 때문에 다른 조건은 고려하지 않는다.

따라서 마지막 출력을 보면 2: 양수 가 출력된다.

 

만약 num이 2가 아니라 -2 였다면,

else if문에서 조건식이 true(참)가 되어 kind = '음수'의 문이 실행되었을 것이다.

 

대부분의 if...else문은 이전에 알아본 삼항연산식으로 변환이 가능하다.

위의 코드를 삼항연산식으로 변환해보자

let num = 2;
let kind;

kind = num !==0 ? (num>0 ? '양수' : '음수') : '0';

console.log(num,':', kind); // 2: 양수

삼항 연산식에서 삼항연산식이 들어갈 수 있는 이유는 삼항연산식 자체가 표현문(값으로 평가되는 문)이기 때문이다.

 

if...else문은 코드블록이 복잡하고 여러문이 들어있는 경우 사용하기 편리하며, 삼항연산식은 간편한 값을 표현하기 적합하다. 상황에 맞게 선택하면 되겠다.

 

 

- switch 문

switch문은 주어진 하나의 표현식을 평가하여 표현식이 있는 case와 경우를 비교한다.

주어진 표현식과 같은 값을 가진 case문으로 실행의 흐름을 옮기게 된다.

 

break문은 말그대로 멈춘다는 의미의 키워드이며, 실행이되면 switch문(코드블록)에서 빠져나오게 된다.  

원하는 문을 실행시키기 위해서는 적절하게 break문을 사용해야한다.

 

default 부분은 선택이며 모든 case들의 표현식이 main 표현식의 값과 일치하지 않을 경우 실행된다.

 

다음 코드의 예시를 보며 주요 개념들을 이해해보자.

let month = 11;
let monthName; //undefined

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(month, 'is', monthName); //11 is Invalid Month

이 코드는 숫자로 입력한 월을 영어로 변환해주는 코드이다.

switch 문에 main 표현식에 11이라는 값을 주었을 때 우리가 기대하는 것은 monthName에 'November' 라는 값이 할당되는 것이다.

하지만 마지막 출력을 보면 default의 문이 실행된 것을 알 수 있다.

이 코드에서 어떤부분이 잘못되었을까?

 

바로 break문을 사용하지 않은 것이다.

 

이 코드가 어떻게 실행되고 있는지 분석해보자.

switch문은 main 표현식의 값인 11과 같은 값을 가진 케이스를 찾기 위하여 위쪽부터 비교하며 내려갈 것이다.

case 1 부터 case 10까지 같은 값은 없으며, 다음 값이 case 11에서 조건을 만족하게 될 것이다.

case 11의 조건을 만족하여 해당 case의 문인 monthName = 'November' 가 실행 될 것이다.

우리가 원하는 것은 여기서 끝나는 것이다.

하지만 switch문은 여기서 끝나지 않고 밑에 있는 case 12와 default의 문을 모두 실행시킨다.

monthName = 'December'와 monthName = 'Invalid Month'가 순차적으로 실행되게 되고,

결과적으로 마지막에 11 is Invalid Month가 출력된것이다.

 

위에서 설명하였지만 우리가 switch문을 통해 원하는 문만 실행시키기 위해서는 적절한 break문의 사용이 필요하다.

이 코드를 원하는 목적으로 실행되기 위해서는 다음과 같이 작성되어야한다.

let month = 11;
let monthName; //undefined

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(month, 'is', monthName); //11 is November

각 케이스 별로 실행시킬 문 마지막에 break 문을 추가하면 원하는 문을 실행시키고 switch문을 탈출하게 될 것이다.

상황에 따라서 break를 의도적으로 사용하지 않는 Fall through를 할 수는 있지만, 코드가 복잡해지고 이해가 어려워지는 단점이 있기 때문에 권장하지는 않는다.