본문 바로가기

Javascript/Javascript초급

조건문 기초 - if, switch

반응형

2개의 값을 비교해 비교 기준에 부합하는지를 확인하거나, 값이 참인지 거짓인지에 따라 실행하는 구문이 달라지는 것을 조건문이라고 합니다.

조건문은 결과가 참인 경우에만 원하는 구문이 실행되거나, 또는 참과 거짓 각각에 대해 구문이 실행되는 경우로 나누어집니다.

여러개의 조건이 있는 경우에는 조건문을 중첩해 여러개의 조건을 세세하게 나눌 수 있습니다.


자바스크립트의 조건문은 if 문과 switch 문 2가지가 있습니다.



if 문


if 문은 조건 체크 결과가 참인지 거짓인지에 따라 2개의 실행 구문중 하나를 실행하는 형태입니다.

실행 구문의 문장이 1개인 경우 중괄호를 생략할 수 있습니다.


if (조건절)
    //참 실행구문

if (조건절) {
    //참 실행구문
}

if (조건절) {
    //참 실행구문
else {
    //거짓 실행구문
}


if 조건문은 기본적으로 2개 실행 구문중 하나를 실행하는 구조입니다.

여러개의 조건을 비교하는 경우 기본적으로 if 조걸문을 중첩해서 여러 조건 중 하나를 실행하는 구조가 됩니다.


if (조건절1) {
    if (조건절2) {
        //참 실행구문
    }
else {
    if (조건절3) {
        //참 실행구문
    } else {
        //거짓 실행구문
    }
}


if 조건문이 여러단계가 중첩되면 조건문의 가독성이 현저히 떨어지고, 조건문이 실행되는 실행 구문의 실행 조건을 확인하기가 어려워집니다.

이런 중첩으로 인한 지옥을 피하기 위해 if 조건문을 체인 형태로 조합해 여러개의 조건을 체크할 수 있는 방법을 제공합니다.


if (조건절1) {
    //참 실행구문
else if (조건절2) {
    //참 실행구문
else if (조건절3) {
    //참 실행구문
else {
    //나머지 거짓 실행 구문
}


조건문에서 "else" 문은 생략할 수 있습니다.

"else" 문이 생략된 조건문은 참인 경우만 실행하는 문이 됩니다.

중첩 방식의 if 문과 체인 방식의 if 문은 비슷하지만, 실제로는 전혀 다른 실행구조를 가집니다.


2단 중첩 방식의 if문으로 4개의 조건 실행 구문을 가진다면, 이 조건문은 무조건 2번 비교를 합니다.

반면 체인 방식의 조건문은 최소 1번 최대 4번의 비교를 합니다.


중첩 방식의 조건문은 AND 조건입니다. 외곽의 조건을 만족하고, 그리고 내부 조건을 만족해야 참이됩니다.

체인 방식은 OR 조건입니다. 조건절 체인중 만족하는 조건 1개만 참이 됩니다.

체인 방식은 뒤에서 배울 switch 구문과 같은 형태이기 때문에 체인 방식의 if문은 switch 방식으로 구현하는 것이 더 추천됩니다.




switch 문


switch 문은 조건을 만족하는 1개만 실행하는 다중 분기 구분입니다.

조건을 2개만 체크하도록 하면 if 구문처럼 동작시킬 수도 있지만, 실제로 그렇게 사용하는 경우는 드물고, 여러개의 조건중에서 조건을 만족하는 1개의 실행 구문을 실행하는 구조를 위해 사용합니다.


switch 문은 if 문과 달리 조건 비교를 위한 파라메터 변수를 하나 필요로 합니다. 

변수의 조건 체크를 한 결과가 참인 1개, 또는 그 이상의 실행 구문이 실행됩니다.


실행 구문을 2개 이상 실행할 수 있는 것은 switch 구문의 특성을 활용한 기법으로 체인 방식의 if문과 달리 switch 문의 조건 결과에 따른 실행 구문을 2개 이상 실행할 수 있습니다.


switch 문은 조건 변수와 case 값이 같은지를 비교합니다.

case 에는 값 이외의 비교식이 올 수 없습니다.


switch 구문의 실행 구조는 다음과 같습니다.


switch (조건변수) {
    case 조건절1:
        //실행구문1
        break;
    case 조건절2:
        //실행구문2
        break;
    case 조건절3:
        //실행구문3
        break;
    default:
        //나머지실행구문4
        break;   
}


switch 문의 실행 구조를 활용하면 다양한 조건 환경에 대한 실행 구조를 만들 수 있습니다.


예를 들어


let a = 1;
switch(a){
    case 1:
        console.log('1');
    default:
        console.log('default');
}


이 switch 문은 a 가 1이면 1과 default 모두를 실행합니다. default는 무조건 실행되고, 그에 앞서 a가 1이면 "1"을 실행하는 조건 실행 구문을 추가로 실행합니다.

이유는 "case 1:" 조건체크 실행 구문 밑에 "break;" 가 빠졌기 때문입니다.

case 조건 체크절에서 "break;" 를 삭제하면 그 아래 "break;" 가 나오는 조건절까지는 모두 실행됩니다.


최소 3개이상 최대 5개까지만 별표를 표시하고, 5보다 크면 나머지 값으로 별표를 표시하는 로직을 switch로 작성한다면


let a = 1;
switch((a-1)%5+1){
  case 3:
    console.log('별');
  case 4:
    console.log('별');    
  default:
    console.log('별별별');
    break;
}


이렇게 만들 수 있습니다.

조건 변수가 3보다 작더라도 무조건 3개 이상, 최대 5개의 "별"이 출력됩니다.

조건 변수의 수식과 case 출력문 표시 방법을 잘 조정하면 다양한 처리 로직을 만들어낼 수 있습니다.


반응형

닫기