[JS] 자바스크립트 조건문 - if 조건문

조건문이란 조건에 따라 다른 코드를 실행하는 구문입니다. 조건문에는 If와 Switch가 존재합니다. 이번엔 if 조건문에 대해 알아보겠습니다.

 

1. If 조건문

if 조건문은 '참과 같은 값'이면 코드 블록을 실행합니다. if 키워드 다음 소괄호에 조건을 작성하고 중괄호 범위의 코드 블록에 실행할 코드를 작성합니다. 이때 조건이 '거짓과 같은 값'이라면 구문이 실행되지 않습니다.

 

const isShow = true;

const checked = false;

if (isShow) {

console.log('Show!');

}

if (checked) {

console.log('Checked!');

}

 

위 코드에서는 isShow라는 변수가 '참과 같은 값'인 true이기 때문에 첫 번째 코드 블록이 실행됩니다. 반대로 checked 변수는 '거짓과 같은 값'인 false이기 때문에 두 번째 조건문의 코드 블록이 실행되지 않습니다.

 

 

2. if else 조건문

if 조건문에 else 키워드를 추가하면 조건에 따라 실행할 코드 블록을 나눌 수 있습니다. 이렇게 코드 블록을 나누는 것을 '분기'라고 합니다.

const isTrue = true;

if (isTrue) {

console.log('Hello!');

} else {

console.log('Bye!');

} // Hello!

 

위 코드에서 isTrue가 '참과 같은 값'인 true이기 때문에 첫 번째 코드 블록이 실행되며, 두 번째 코드 블록은 실행되지 않습니다.

const isTrue = false;

if (isTrue) {

console.log('Hello!');

} else {

console.log('Bye!');

} // Bye!

 

위 코드에서 조건은 '거짓과 같은 값'인 false이기 때문에 첫 번째가 아닌 두 번째 코드 블록만 실행됩니다. 이렇게 불 표현식의 값이 true면 중괄호 안의 문장을 실행하고 false면 문장을 무시합니다.

 

예제

이를 이용하여 오전과 오후를 구분하는 프로그램을 만들 수 있습니다. 조건은 오전에는 '오전입니다'를, 오후에는 '오후입니다'를 출력하는 프로그램입니다. 현재 시간을 구하는 방법은 다음과 같습니다.

const date = new Date() // undefined 인수를 전달하지 않으면 현재 날짜, 시간을 가지는 인스턴스를 반환 date.getFullYear() // 현재 년도
date.getMonth() + 1 // 현재 월 *JS에서는 월을 0부터 세기 때문에 + 1을 해주었다. 즉, getMonth() 메소드는 0~11 사이의 값을 출력한다.
date.getDate() // 현재 날짜
date.getHours() // 현재 시간
date.getMinutes() // 현재 분
date.getSeconds() // 현재 초

const date = new Date()

const hour = date.getHours()

if(hour < 12){

alert("오전입니다.");

} else{

alert("오후입니다.")

}

 

3. 중첩 조건문

조건문 안에 조건문을 중첩하여 사용하는 것을 중첩 조건문이라고 합니다.

중첩 조건문의 형태는 다음과 같으며 여러 번 중첩하는 것도 가능합니다.

if(불 표현식 1){
   if(불 표현식 2){
   표현식 2가 참일 때 실행할 문장
   } else {
       표현식 2가 거짓일 때 실행할 문장
       }
   } else {
       if(불 표현식3){
       표현식 3이 참일 때 실행할 문장
   } else {
       표현식 3이 거짓일 때 실행할 문장
   }
}

 

이를 이용하여 아침, 점심, 저녁 시간대로 나누어 출력하는 예제를 만들 수 있습니다.

 

const date = new Date()

const hour = date.getHours()

if(hour < 11){

//hour < 11이 true면 실행

alert("아침 먹을 시간입니다!");

} else {

//hour < 11이 false면 실행

if(hour < 15){

//hour < 15가 true면 실행

alert("점심 먹을 시간입니다!");

} else {

//hour < 15가 false면 실행

alert("저녁 먹을 시간입니다!");

}

}

 

 

4. if else if 조건문

앞에서 if 조건문은 조건이 한 문장이라면 중괄호를 생략해도 됩니다. 이 개념을 이용하여 중첩 조건문에서 중괄호를 생략한 형태가 if else if 조건문입니다. 겹치지 않는 3가지 이상의 조건으로 나눌 때 사용됩니다. 위의 예제를 다음과 같이 바꿀 수 있습니다.

const date = new Date()

const hour = date.getHours()

if(hour < 11){

//hour < 11이 true면 실행

alert("아침 먹을 시간입니다!");

} else if (hour < 15){

//hour < 11이 false면서 hour < 15가 true라면 실행

alert("점심 먹을 시간입니다!");

} else {

//hour < 15 false면 실행

alert("저녁 먹을 시간입니다!");