[자바스크립트] 조건문

조건문
조건에 따라 코드를 실행할 수도 있고 실행하지 않을 수도 있다
조건분기 : 코드가 실행되는 흐름을 변경하는 것

if 조건문

조건에 따라 코드를 실행하거나 실행하지 않을 때 사용하는 구문
조건 : 비교연산자와 논리연산자를 활용한 bool 자료형

if else 조건문

서로 반대되는 상황을 표현하는 구문 표현

중첩 조건문

if (표현식1) {
  // 표현식1 = true
  if (표현식2) `표현식2 = true`
  else `표현지2 = false`
} else {
  // 표현식1 = false
  if (표현식3) `표현식3 = true`
  else `표현식3 = false`
}

if else if 조건문

if 조건문은 조건이 한 문장이라면 중괄호를 생략해도 되는데
이러한 성질을 이용해서 중첩 조건문에서 중괄호를 생략한 형태이다
겹치지 않는 3가지 이상의 조건으로 나눌 때 사용된다

if (condition 1) `condition 1 = true`
else if (condition 2) `condition 1 = false && condition 2 = true`
else if (condition 3) `(condition 1 && condition 2 = false) && (condition 3 = false)`
else `condition 1 && condition 2 && condition 3 = false`

---

switch 조건문

switch 조건문, 조건부 연산자 (삼항연산자), 논리 연산자 를 활용한 짧은 조건문

switch (자료) {
  case 조건A:
    break
  case 조건B:
    break
  default: // 생략가능
    break
}

break

switch 조건문이나 반복문에서 빠져나가기 위한 키워드
코드를 읽다가 break 키워드를 만나면 해당 조건문이나 반복문을 빠져나가게 된다

switch 조건문의 괄호 안의 자료

입력한 값을 기준으로 특정 코드를 실행한다
switch 조건문 괄호 안 표현식 = case 키워드 옆의 표현식 : case 키워드 바로 다음에 오는 문장 실행

const date = new Date()
const hour = date.getHours()

switch (true) {
  case hour < 11:
    alert('11시 이전입니다')
    break
  case hour < 15:
    alert('11시 ~ 15시 사이입니다.')
    break
  default:
    alert('11시 이후면서, 15시 이후입니다.')
    break
}

조건부 연산자

삼항연산자

bool condition ? true일 때의 값 : false일 때의 값

짧은 조건문

논리 연산자의 특성을 조건문으로 사용한다

논리합 연산자 활용 OR

자바스크립트는 참(true)일 때 추가 연산을 따로 하지 않기 때문에
논리합 연산자의 좌변이 참이면 우변을 실행하지 않는다

bool condition || bool condition = false 일 때 실행할 문장

true || 어떠한 값 // 좌변 실행
// 뒤에 어떠한 값이 들어가도 항상 참이다

false || 어떠한 값 // 우변 실행

논리곱 연산자 활용 AND

양변이 모두 참일 때만 참이다

bool condition && bool condition = true 일 때 실행할 문장

이를 활용해서 react에서 조건부 렌더링으로 쓸 수 있다

{modal && (<Modal />)}