본문 바로가기
programming/javascript

자바스크립트 조건문 else if 조건 여러개 사용 방법 using javascript conditon else if statement

by 개코 - 개발과 코딩 2022. 4. 17.

자바스크립트에서 else if 문은 조건식을 여러개 사용할 수 있도록 한다. 프로그램의 동작이나 특정 조건에 부합되도록 할 떄 사용되며 조건식이 첫번째로 나오는 참인 경우에 코드를 실행하고 나열된 전체의 else if 구문은 중단된다. 만약 조건식에 부합되는 것이 하나라도 없다면 else 구문을 이용해 처리할 수 있다.

자바스크립트 조건문 else if 조건 여러개 사용 방법
using javascript conditon else if statement

조건문은 거의 모든 프로그래밍 언어에서 거의 같은 사용법을 가진다.

자바스크립트 또한 예외는 아니다.

자바스크립트 if 문으로 조건식에 따라 동작을 달리 할 수 있다. else if 구문 또한 마찬가지다.

조건식이 여러개 있을 때 else if 구문으로 조건식을 추가하여 여러 방향으로 프로그램을 동작시킬 수 있다.

else if 여러개 사용

이제 자바스크립트에 조건식을 여러개 추가해 보도록 한다.

프로그램을 만들 때 여러가지 상황이 있지만 조건식이 단 하나로 끝나는 경우는 거의 없다.

이런 경우 저런 경우 많이 있기 때문에 조건식도 수시로 추가가 될 수 있다.

자바스크립트 조건문의 else if 문의 특징이 있다면 여러개로 사용시 당연히 참인 경우는 해당 조건식에 맞는 코드를 실행하게 된다.

하지만, 비슷한 조건식이 있다면 가장 첫번째로 참인 경우에만 실행이 되고, 이후의 조건문은 실행이 중단된다.

if (조건식1) {
	// 참일 때 코드실행
} else if (조건식2) {
	// 참일 때 코드실행
} else if (조건식3) {
	// 참일 때 코드실행
} else {
	// 참인 조건식이 없는 경우 실행
}

샘플코드

위의 else if 구문을 이용한 자바스크립트 예제를 만들어 본다.

else if 는 if 조건문의 조건식을 추가하여 참일 떄 실행할 코드를 다르게 주는 것을 상기하자.

조건식이 비슷하거나 혹은 중복되는 경우 가장 첫번째로 참이 되는 조건식이 실행되고 나머지 else if 구문은 실행이 중단된다.

마지막의 else 구문은 나열된 조건식들이 전부 맞지 않으면 실행이 된다.

코드를 보자.

<!DOCTYPE html>
<html>
    <body>

        <script>
            
            let _boolean

            console.log('----------');

            let vA = 10;
            let vB = 100;
            let _isTrue = false;
            let _text = '';

            console.log("vA 가 %s 이고, vB 가 %s 일때 비교 ", vA, vB);

            console.log('----------');

            if (Boolean(vA > 50 && 50 > vB)) {

                console.log("Boolean(vA > 50 && 50 > vB) 은 참 TRUE");

            } else if (Boolean(vA > 50 || 50 > vB)){

                console.log("Boolean(vA > 50 || 50 > vB) 은 참 TRUE");

            } else if (Boolean(vA == vB)) {

                console.log("Boolean(vA == vB) 은 참 TRUE");

            } else if (Boolean(!(vA == vB))) {

                console.log("Boolean(!(vA == vB) 은 참 TRUE");

            } else if (Boolean(vA != vB)) {

                console.log("Boolean(vA != vB) 은 참 TRUE");

            } else if (Boolean(!(vA != vB))) {

                console.log("Boolean(!(vA != vB) 은 참 TRUE");

            } else {

                console.log("모든 조건식은 거짓 FALSE");

            }

            console.log('----------');

        </script>

    </body>
</html>

코드가 길다.

그렇지만 else if 조건식이 여러개 사용했다는 것에 주목하자.

변수 2개에 서로 다른 값을 주고 상황에 따라 else if 문을 여러개 추가했을 뿐이다.

결과 화면을 보자.

만약, 참인 조건식이 있다면 실행되는 것이 있을 것이다.

조건식은 많지만 조건식이 참인 것은 단 하나 밖에 없다는 것을 알 수 있다.

반응형

댓글