Javascript 조건문 if, switch case, 삼항연산자

제어문(control flow statements)

프로그램의 순차적인 흐름을 제어해야 할 때 사용하는 실행문, 제어문에는 조건문, 반복문 등이 포함

조건문(conditional statements)

조건문이란 프로그램 내에서 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문

if 문

결과가 참(true)이면 주어진 실행문을 실행하며, 거짓(false)이면 아무것도 실행하지 않음

if (표현식) {
    표현식의 결과가 참일 때 실행하고자 하는 실행문;
}

var x = 10, y = 20;

if (x == y) {
    document.write("x와 y는 같다.");
}

if (x < y) {
    document.write("x가 y보다 작다.");
}

if (x > y) // 실행될 실행문이 한 줄뿐이라면 중괄호({})를 생략 가능
    document.write("x가 y보다 큼!!!!!");

if (x = y) {
    document.write("두 변수 x와 y는 같음!!!!!");
}

• 위의 예제는 변수 x와 y의 값이 같으면 두 변수가 같다는 문자열 출력
• 하지만 if 문의 표현식에서 동등 연산자(==)를 사용해야 할 곳에 잘못해서 대입 연산자(=)를 사용하여 에러 발생

if ((x = y)) {
    document.write("두 변수 x와 y는 같습니다.");
}

• 또한, 위의 예제는 실제로 if 문의 표현식 내에서 변수 x에 변수 y의 값을 대입했을 수도 있음
• 하지만 if 문과 같은 제어문의 표현식에 아래와 같이 대입문을 사용하는 것은 지양

else 문

if 문과 같이 사용할 수 있는 else 문은 if 문의 표현식 결과가 거짓(false)일 때 주어진 실행문을 실행

if (표현식) {
    표현식의 결과가 참일 때 실행하고자 하는 실행문;
} else {
    표현식의 결과가 거짓일 때 실행하고자 하는 실행문;
}

var x = 10, y = 20;

if (x == y) {
    document.write("x와 y는 같음.");
} else {
    if (x < y)
        document.write("x가 y보다 작음!!!!");
    else
        document.write("x가 y보다 큼!!!!!");
}

else if 문

• else if 문은 if 문처럼 표현식을 설정할 수 있으므로, 중첩된 if 문을 좀 더 간결하게 표현
• else if 문은 여러 번 사용되어 다양한 조건을 설정 가능

if (표현식1) {
    표현식1의 결과가 참일 때 실행하고자 하는 실행문;
} else if(표현식2){
    표현식2의 결과가 참일 때 실행하고자 하는 실행문;
} else {
    표현식1, 2의 결과가 거짓일 때 실행하고자 하는 실행문;
}

삼항 연산자

• 표현식이 참이면 반환값1, 그렇지 않으면 반환값2 반환 
• 표현식이나 반환값에 복잡한 로직이 들어가면 다소 성능이 떨어질 수 있는 점 유의!!

표현식 ? 반환값1 : 반환값2

switch-case 문

switch (조건 값) {
    case 값1:
        조건 값이 값1일 때 실행하고자 하는 실행문;
        break;
    case 값2:
        조건 값이 값2일 때 실행하고자 하는 실행문;
        break;
    default:
        조건 값이 어떠한 case 절에도 해당하지 않을 때 실행하고자 하는 실행문;
        break;
}

• if / else 문보다 가독성 측면에서 더 좋음
• default 절은 조건 값이 위에 나열된 어떠한 case 절에도 해당하지 않을 때 실행
• 각 case 절 및 default 절은 반드시 break 키워드를 포함하고 있어야 break 키워드는 조건 값에 해당하는 case 절이나 default 절이 실행된 뒤에 전체 switch 문을 빠져나가게 함.
• default 절의 위치가 반드시 switch 문의 맨 마지막일 필요 없음

var x = 10;
switch (typeof x) {
    case "number":
        document.write("변수 x의 타입은 숫자");
        break;
    case "string":
        document.write("변수 x의 타입은 문자열");
        break;
    case "object":
        document.write("변수 x의 타입은 객체");
        break;
    default:
        document.write("변수 x의 타입을 잘 모르겠네요...");
        break;
}

var xx = "문자열";
switch (typeof xx) {
    case "number":
        document.write("변수 xx의 타입은 숫자<br>");
    case "string":
        document.write("변수 xx의 타입은 문자열<br>");
    case "object":
        document.write("변수 xx의 타입은 객체<br>");
    default:
        document.write("변수 xx의 타입을 잘 모르겠네요...<br>");
}

• 위의 에서 변수 xx는 string 타입이므로, 두 번째 case 절의 document.write() 메서드가 맨 먼저 실행
• 하지만 break 키워드가 없으므로, 두 번째 case 절 이후에 나오는 모든 실행문이 모두 실행될 것
• 따라서 case 절과 default 절은 반드시 break 키워드를 포함하고 있어야 정확하게 동작

Reference

https://www.tcpschool.com/javascript/js_control_condition

코딩교육 티씨피스쿨