[JS] #3-1 제어문 : 조건문(if문, switch-case문)

1. 제어문부터 이해하자

 

 프로그램은 늘 같은 흐름으로 실행이 된다.

 위에서부터 아래로.

 왼쪽에서 오른쪽으로.

 결코 아래에서 위의 방향으로 실행이 되지 않는다.

 

 이런 것들을 제어하는 문장이 바로 제어문이다.

 제어문의 종류는 크게 두 가지가 있다.

 

 - 조건문 : if문, switch-case문

 - 반복문 : for문, while문, do-while문

 

 그리고 이 제어문 안에서 쓰이는 break문과 continue문도 함께 알아볼 예정이다.

 그럼 가장 먼저 조건문부터 알아봐 보자.

 

 

2. 조건문 If문

 

 조건문은 boolean 값으로 판단된다.

 이 if문은 우리가 배웠던 삼항 연산자와 비슷한 구조를 갖고 있다.

 

 먼저 기본 문법부터 알아보자.

1) if (조건) { 조건이 true이면 처리 }

2) if (조건) { 조건이 true이면 처리 }
    else { 조건이 false이면 처리 }

3) if ( 조건1 ) { 조건1이 true이면 처리 }
    else if ( 조건2 ) { 조건2이 true이면 처리 }
    else if ( 조건 3) { 조건3이 true이면 처리 }
    else { 조건이 false이면 처리 }

 

 위의 코드에서 보다시피 if문은 true 값만을 지정해줄 수도 있고, false일 경우에 처리할 값도 함께 지정해줄 수 있다.

 이때 else 문을 뒤에 붙여서 함께 표현한다.

 만약 여러 가지 조건을 붙이고 싶을 땐 3번의 형태처럼 else if 문을 활용하여 다양한 조건을 준다.

 

 

3. 조건문 Switch-case문

 

 switch는 case라는 짝꿍을 가진 문이다.

 

 switch문이 무엇일까?

 우리가 흔히 쓰는 스위치를 생각해보자.

 껐다 켰다를 반복할 수 있는 버튼인 스위치처럼 기능을 하는 문이다.

 경우 수의 목록 중에서 동일한 값을 찾으면 버튼이 켜지듯 작동을 한다.

 

 이 switch문은 프로그램의 버전에 따라서 영향을 받는 편이다.

 (어느 때는 문자열이 허용되는데 안되는 때도 있고, 양의 정수만 되는 경우도 있다.)

 우리는 기본적인 형태의 switch문을 배워보려한다.

 

 1) switch문과 함께 쓰이는 명령어들

 - break : switch문을 빠져나올 때 사용한다.

 - default : 목록 중에 없는 경우 default문의 내용을 무조건 수행한다.

 

 2) switch문과 break

 switch문의 기본 문법은 아래와 같다.

switch(30) {
    case 10 : document.write("SEOUL") ; break;
    case 20 : document.write("JEJU") ; break;
    case 30 : document.write("BUSAN") ; break;
} // switch

 

 switch문 옆에 30이란 숫자가 보인다.

 이 말은 아래의 case 문의 여러가지 경우 중 30의 값과 일치하는 경우일 때 case 30의 값을 출력하라는 뜻이다.

 switch문이 30값을 가진 case 30을 찾아서 BUSAN이란 단어를 출력하라는 코드를 받고, 그 뒤의 break 명령어로 인해 switch문을 빠져나오게 되어 BUSAN이 화면에 출력되게 된다.

부산이란 값이 잘 출력됐다

 

 * 자바스크립트에서 switch문을 사용하면 실수형 값의 경우에는 사용이 불가능하다. 유의하자.

 

 3) switch문과 default

 default 명령어는 switch의 값이 아래의 case 중 일치하는 것이 없을 때 출력하라는 뜻이다.

 위의 코드에 default 문을 추가로 하고 swtich의 값도 변경해보았다.

switch(40) {
    case 10 : document.write("SEOUL") ; break;
    case 20 : document.write("JEJU") ; break;
    case 30 : document.write("BUSAN") ; break;
    default : document.write("기타..."); break;
} // switch end

 이렇게 코드를 넣으면 switch의 값이 case 중에는 일치하는 것이 없기에 default의 값인 "기타..."가 출력되게 된다.

 

 4) break문이 없으면?

 그렇다면 break문이 없으면 어떻게 될까?

 아래의 코드를 봐보자.

switch(20) {
    case 10 : document.write("SEOUL") ; break;
    case 20 : document.write("JEJU") ;
    case 30 : document.write("BUSAN") ; break;
    default : document.write("기타..."); break;
} // switch end

 어떻게 출력이 될까?

 

제주부산 이 출력됐다.

 

 왜 이렇게 출력이 되었을까?

 switch의 값이 20이므로 case 20의 코드가 출력이 된다.

 그런데 break 문이 없기 때문에 switch문을 빠져나오지 못하고 그 아래의 코드까지 이어져서 계속 출력이 되어버린 것이다.

 

 이것은 잘못되었다라고 말할 수 없다.

 프로그램 설계 방향에 따라 break문을 줄 것인지 안 줄 것인지를 적절히 활용할 수 있음을 기억해두어야한다.