[JS] 자바스크립트, 가장 기초적인 조건문 정리 (if문/if-else문/삼항연산자/switch문)

1. if문 / if - else문

if(조건식) {
	// 조건식이 true인 경우
} else {
	// 조건식이 false인 경우
}

조건식이 만족하면 바로 아래로, 조건문이 만족하지 않으면 else문으로 빠지는 형태이다.

else문은 생략가능하다. 제일 많이 쓰고 가장 중요한 제어문 중에 하나이다.

 

if-else문의 명령어가 한 줄이면 {}는 생략가능하다.

if(조건식) //명령어
else //명령어

 

다음은 자바스크립트에서 false로 인식하는 값들이다. (이를 falsy한 값이라고 표현한다.)

• 0
• "", '' (빈값)
• NaN
• undefined
• null

위 값들을 제외한 모든 값들은 다 true로 인식한다. (truthy한 값이라고 표현.)

console.log(!!'hello');

예를 들면 위 값은 true이다.

'hello'가 true인데 그 'hello'를 !!로 2번 부정했으니 false->true가 되어 true이다.

 

 

# 조건연산자 (조건부 삼항 연산자)

(조건식) ? 조건식이 true인 경우 : 조건식이 false인 경우

if-else문을 위와 같은 형태로 표현할 수도 있다.

조건이 간단하고 명령어도 하나인 경우에 쓴다.

 

 

예제)

input박스에 숫자를 입력하고 버튼을 누르면 입력한 숫자가 짝수인지 홀수인지 판별하여 문구를 출력하기.

input박스에 값을 입력하지 않고 버튼을 누르거나 입력한 값이 숫자가 아니라면 동작하지 않도록 하기.

document.querySelector('#testVerifyBtn').addEventListener('click', function() {
    var userNum = document.querySelector('#testVerifyNum').value;
    var numRegex = /^[0-9]+$/;

    if(userNum && numRegex.test(userNum)) {
        document.querySelector('#testResultBox').innerHTML = verifyNum(userNum);
    } else {
        document.querySelector('#testResultBox').innerHTML = '입력한 값이 숫자가 아닙니다.';
    }
});

function verifyNum(num) {
    if(num % 2 == 0) {
        return num + ': 짝수';
    } else {
        return num + ': 홀수';
    }
}

 

위 verifyNum() 함수의 조건문을 삼항연산자로 표현하면 아래와 같다.

function verifyNum(num) {
    return (num % 2 == 0) ? num + ': 짝수' : num + ': 홀수'
}

 

※ 결과:

 

 

2. switch문

switch(확인할 변수) {
    case "조건값1" : 확인할 변수와 일치한 경우 실행할 명령
        break;
    case "조건값2" : 확인할 변수와 일치한 경우 실행할 명령
        break;
    case "조건값3" : 확인할 변수와 일치한 경우 실행할 명령
        break;
    default: 모든 조건값과 일치하지 않은 경우 실행할 명령
}

if-else문만큼 익숙하지 않아서 자주 사용하진 않는데

그래도 어떻게 쓰는지 알고는 있어야 하니까 정리해보았다.

 

입력값을 여러가지 조건값들과 비교해서 특정 값과 일치할 경우

실행할 명령어를 위와 같은 형태로 적는다.

case문 다음에 꼭 break를 해주어야 명령을 실행한 후 switch문을 빠져나간다.

default는 어떤 조건도 만족하지 않았을 때 실행할 명령문을 적는 곳이다.

 

 

예제) 셀렉트박스에 있는 과일 선택 시 옆에 글씨로 무슨 과일 선택했는지 문구 출력하기.

document.querySelector('#testFruitList').addEventListener('change', function() {
    document.querySelector('#testResultBox02').innerHTML = verityFruit(this.value);
});

function verityFruit(fruit) {
    switch (fruit) {
        case 'orange': return '오렌지를 선택했습니다.';
            break;
        case 'apple': return '사과를 선택했습니다.';
            break;
        case 'banana': return '오렌지를 선택했습니다.';
            break;
        default: return '아무것도 선택하지 않았습니다.';
    }
}

 

※ 결과:

선택하세요 오렌지 사과 바나나