JavaScript 조건문 (If, else, switch)

H_Chang·2023년 10월 11일

5일차 JavaScript else if switch 내일배움캠프TIL 조건문

if 조건문은 조건에 따라 코드를 실행하거나 실행하지 않을 때 사용하는 문구이다.

비교 연산자와 논리 연사자를 활용해 조건을 만들고, 이 조건을 사용해 조건 분기를 한다.

if 조건문

자바스크립트에서 가장 일반적인 조건문은 if 조건문이다.
불 표현식의 값이 true면 중괄호 안의 문장을 실행하고 false면 문장을 무시한다.

if(불 값이 나오는 표현식) {
  불 값이 참일 때 실행할 문장
]

if 조건문의 기본 형태 ex)

<script>
 // if 조건문
 if (273 < 100) {
  // 표현식 273 < 100이 참일 떄 실행한다.
  alert('273 < 100 => true')
 }
 //프로그램 종료
 alert('종료')
</script>

실행 결과

종료

if 조건문의 오전과 오후 구분하기 ex)

<script>
 //변수를 선언한다.
 const date = new Date()
 const hour = date.getHours()
 
 // if 조건문
 if (hour < 12) {
  // 표현식 hour < 12가 참일 때 실행한다.
  alert('오전입니다.');
 }
 
 if (hour >= 12) {
 // 표현식 hour >= 12가 참일 떄 실행한다.
 alert('오후입니다.')
</script>

실행 결과

시간에 따라 '오전입니다.', '오후입니다.' 가 나온다

if else 조건문

자바스크립트 에서 좀 더 편리하게 사용하기 위해 서로 반대되는 상황을 표현하는 구문이 else 구문이다.

기본형태

if (불 값이 나오는 표현식) {
  불 값이 참일 때 실행할 문장
} else {
  불 값이 거짓일 때 실행할 문장
}

예시)

let x = 10;
if (x>0) {
 // main logic #1
 console.log("x는 양수입니다.")
} else {
 // main logic #2
 console.log("x는 음수입니다.")
}  // x는 양수입니다.  출력

if - else if - else 조건문

기본형태

if (조건1) {
  // main logic #1
} else if (조건2) {
  // main logic #2
} else {
  // main logic #3
}

예시)

let x = 10;

if (x < 0) {
  console.log('1')
} else if (x >= 0 && x < 10) {
  console.log('2')
} else {
  console.log('3')
}  //  3 출력

조건문 중첩

예시) 미성년자 구분

let age = 20;
let gender = "여성"

if (age >= 18) {
  if (gender === "여성") {
     console.log("성인 여성입니다.")
  } else {
     console.log("성인 남성입니다.")
  }
} else {
  if (gender === "여성") {
     console.log("미성년자 여성입니다.")
  } else {
     console.log("미성년자 남성입니다.")
  }
}

조건부 실행

예시) and조건(&&)

let x = 10;

(x > 0) && consol.log("x는 양수입니다.") // x는 양수입니다.  출력

삼항 연산자와 단축 평가

예시) or조건(||)

let y; // y 에는 undefined
let z = y || 20; // y 에 20 값을 적용

console.log(z);  // 20 출력

falsy한 값과 truthy한 값

예시)

if (0) {
  console.log("hello");
} // 출력되지 않음

if ("") {
  console.log("hello.");
} // 출력되지 않음

if (null) {
  console.log("hello");
} // 출력되지 않음

if (undefined) {
  console.log("hello");
} // 출력되지 않음

if (NaN) {
  console.log("hello");
} // 출력되지 않음

if (false) {
  console.log("hello");
} // 출력되지 않음

if (true) {
  console.log("hello");
}  // hello  출력

위의 예제에서는 falsy한 값들을 사용하여 if문의 조건을 만족시키지 못하도록 한다. 0, 빈 문자열, null, undefined, NaN, false는 falsy한 값으로, if문의 조건을 만족시키지 못한다. 그 외의 값들은 모두 truthy한 값으로, if문의 조건을 만족시킨다.

switch 조건문

변수의 값에 따라, 여러 개의 경우(case) 중 하나를 선택한다.

기본형태

switch (자료) {
 case 조건A:
  break
 case 조건B:
  break
 default:
  break
}

switch 조건문으로 홀수와 짝수를 구분하는 ex)

<script>
 // 변수를 선언한다.
 const input = Number(prompt('숫자를 입력하세요.', '숫자')
 
 // 조건문
 switch (input % 2) {
  case 0:
   alert('짝수입니다.')
   break
  case 1:
   alert('홀수입니다.')
   break
  default:
   alert('숫자가 아닙니다.')
   break
 }
</script>