다중 조건문 if(자바스크립트, js)

if문의 기본 형식은 보통 3가지로 대개 아래와 같은 형식으로 이루어지게 된다.

 

1>

if(ture){

    if의 ()안의 값이 true 일때 실행될 값.

}else{

    if의 ()안의 값이 false일때 실행될 값.

}

 

2>

if(ture) {

    if의 ()안의 값이 true 일때 실행될 값.

}else if(true ) {

    else if의 ()안의 값이 false일때 실행될 값.

}

 

3>

if(ture){

    if의 ()안의 값이 true 일때 실행될 값.

}

 

 

위의 형식에서 첫번째 if가 들어오고 ()안의 값이 참일때, {}가 실행된다는 것은 직관적으로 이해가 쉽다. 

 

하지만, 2>와 3>의 경우에 즉 else if(){}, if(){}의 이후에 어떤 일이 일어나는지에 대해 명확한 이해가 필요했다. 

 

아래의 간단한 코딩예를 보며 이해를 해보자. 

let target = event.target;

const action = target.classList[0];

const buttonContent = target.textContent;

 

if (target.matches('button')) {                                                                                //만약 이벤트가 일어난 객체가 button이고, 

    if (action === 'number') {                                                                                   //만약 해당 버튼의 클래스명이 number이고, 

        if(display.textContent === '0' ){                                                                    //만약 이미 보여지고 있는 화면의 내용이 '0'이라면 

            display.textContent = buttonContent;                                                   //디스플레이되고 있는 내용은 buttonContetent이다.

        }else if(display.textContent ==='2'){                                                           //만약 이미 보여지고 있는 화면의 내용이 '2'이라면 

            display.textContent = display.textContent + buttonContent;          //화면에 보이는 내용은 보이는 내용+buttonContent이다.

        }

 

    if (action === 'power'){

    ~~~

    }

}

 

여기서 내가 주목하고 싶은 부분은 else if 와 그 밑의 if 구문이다. 

 

만약 클래스명이 number였음에도, 보여지는 값(즉, display.textContent)이 0도 아니고, 2도 아니라면 그대로 해당 if문은 아무것도 없이 넘어가고 그 다음 if (action === 'power')~가 실행되게 된다.

 

즉 if문은 위에서 부터 쭈욱 실행이 되지만, 만약에 해당 조건을 충족하지 않는다면 해당 if문은 실행되지 않고, 그 밑의 코딩을 실행하게 되는 것이다. 이를 잘 이해 한다면 다중조건문을 손쉽게 만들 수 있을 것이라 생각된다.