[JavaScript] if 조건문 (if-else & else-if), switch 문

---

1.  if 문과 if-else 문

👩🏻‍💻  if문이나 if-else문을 사용하면 스크립트 안에서 조건 체크 가능

---

들어가기 전

 const number = prompt('숫자를 입력하세요!');

     

    💡  위 코드는 형변환을 하지 않아도 프로그램 실행에는 문제가 없음
            ▶️ 조건식에서 0과 비교를 할 때 자동으로 형변환이 되어서 계산이 되기 때문
            ▶️ but! 자바 스크립트로 프로그램을 짤 때 문제가 되는 경우가 있어서 가급적 형변환을 하는 것을 추천

---

if 문

<!--if조건문 기본형-->
if (불 값이 나오는 표현식) {
    불 값이 참일 때 실행할 문장
}

<script>
    if(273 < 100) { // 표현식 273 < 100이 참일 때 실행
        alert('273 < 100 => true')
    }

    let str = ' ';
    if (!str) { // 조건문 안에서 자동으로 형변환. 공백도 글자로 취급
        alert('빈 문자열입니다.'); // false라서 실행 안됨.
    }

    str = ' '; 
    if (!str.trim()) { // 조건문 안에서 자동으로 형변환.
        alert('빈 문자열입니다.') // trim()은 공백제거 함수. true라서 실행됨.
    }

    str = '값입력';
    if (str) { // 조건문 안에서 자동으로 형변환
        alert('빈 문자열이 아닙니다.'); // true라서 실행됨.
    }
</script>

---

if-else문

<!-- if-else 조건문 기본형 -->
if (불 값이 나오는 표현식) {
    불 값이 참일 때 실행할 문장
} else {
    불 값이 거짓일 때 실행할 문장
}

<script>
    // 오전과 오후 구분하기
    const date = new Date(); // 현재 날짜와 시간을 갖는 객체 생성
    const hour = date.getHours();

    if (hour < 12) {
        alert('오전입니다.');
    } else {
        alert('오후입니다.');
    }
    // if-else문을 삼항연산자로 변경
    console.log((hour < 12 ? '오전입니다.' : '오후입니다.'))
</script>

 

---

중첩 조건문 : 조건문 안에 조건문을 중첩해서 사용하는 것

<script>
    // 변수를 선언
    const date = new Date(); // 현재 날짜와 시간을 갖는 객체생성.
    const hour = date.getHours(); // 현재시간을 0 ~ 23 사이의 값으로 출력하는 메소드.

    // if-else 문
    if (hour < 11) { //표현식 hour < 11가 참일 때
        alert("아침 먹을 시간입니다.")
    } else { // 표현식 hour < 11가 거짓일 때 실행
        if (hour < 15) { // 표현식 hour < 15가 참일 때 실행.
            alert("점심 먹을 시간입니다.");
        } else { // 표현식 hour < 15가 거짓일 때 실행.
            alert("저녁 먹을 시간입니다.")
        }
    }
    // else-if 문
    if (hour < 11) { //표현식 hour < 11가 참일 때
            alert("아침 먹을 시간입니다.")
        } else if (hour < 15) { // 표현식 hour < 15가 참일 때 실행.
                alert("점심 먹을 시간입니다.");
        } else { // 표현식 hour < 15가 거짓일 때 실행.
                alert("저녁 먹을 시간입니다.")
        }
</script>

---

2.  switch 문

🐰  switch 조건문의 괄호 안에 비교할 값을 입력  ▶️  이때 입력한 값을 기준으로 특정 코드를 실행

      🥕  처리할 명령이 많을 때 주로 사용

      🥕  switch 문의 조건은 case 문의 값과 일대일로 일치해야 함

🐰  일반적으로 case 뒤에는 정수나 문자열이 오는 것으로 사용
🐰  break 키워드는 switch 조건문이나 반복문을 빠져나가기 위해 사용하는 키워드
        ▶️  코드를 읽다가 break 키워드를 만나면 break 키워드를 감싼 switch 조건문이나 반복문을 완전히 빠져 나감

<!-- 기본형 -->
switch (조건문) {
    case 조건A :
        조건이 A일 때 실행할 명령문;
        break;
    case 조건B :
        조건이 B일 때 실행할 명령문;
        break;
    default :
        break;
}

<script>
    // 변수를 선언
    const input = Number(prompt('숫자를 입력하세요.', '숫자'));

    // 조건문
    switch (input % 2) { // 나머지 연산자를 이용해서 홀수와 짝수를 구분
        case 0:
            alert('짝수입니다.');
            break;
        case 1:
            alert('홀수입니다.');
            break;
        default:
            alert('숫자가 아닙니다.'); // 숫자가 아닌걸 입력해도 에러가 나지 않음.
            break;
    }
</script>

<script>
    /* 사용자에게 월을 입력받아서 switch 이용해 계절을 출력.
       다만 1~12만 입력된다고 가정. */

    const month = Number(prompt("월을 입력하세요. (숫자 1~12 중 선택)"));

    switch (month) {
        case 12: case 1: case 2:
            document.write(`${month}월은 겨울 입니다.`);
            break;
        case 3: case 4: case 5:
            document.write(`${month}월은 봄 입니다.`);
            break;
        case 6: case 7: case 8:
            document.write(`${month}월은 여름 입니다.`);
            break;
        case 9: case 10: case 11:
            document.write(`${month}월은 가을 입니다.`)
            break;
    }
</script>

 

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]