조건문
조건에 따라 코드를 실행할 수도 있고 실행하지 않을 수도 있다
조건분기 : 코드가 실행되는 흐름을 변경하는 것
조건에 따라 코드를 실행하거나 실행하지 않을 때 사용하는 구문
조건 : 비교연산자와 논리연산자를 활용한 bool 자료형
서로 반대되는 상황을 표현하는 구문 표현
중첩 조건문
if (표현식1) {
// 표현식1 = true
if (표현식2) `표현식2 = true`
else `표현지2 = false`
} else {
// 표현식1 = false
if (표현식3) `표현식3 = true`
else `표현식3 = false`
}
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 (자료) {
case 조건A:
break
case 조건B:
break
default: // 생략가능
break
}
switch 조건문이나 반복문에서 빠져나가기 위한 키워드
코드를 읽다가 break
키워드를 만나면 해당 조건문이나 반복문을 빠져나가게 된다
입력한 값을 기준으로 특정 코드를 실행한다
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일 때의 값
논리 연산자의 특성을 조건문으로 사용한다
자바스크립트는 참(true)일 때 추가 연산을 따로 하지 않기 때문에
논리합 연산자의 좌변이 참이면 우변을 실행하지 않는다
bool condition || bool condition = false 일 때 실행할 문장
true || 어떠한 값 // 좌변 실행
// 뒤에 어떠한 값이 들어가도 항상 참이다
false || 어떠한 값 // 우변 실행
양변이 모두 참일 때만 참이다
bool condition && bool condition = true 일 때 실행할 문장
이를 활용해서 react에서 조건부 렌더링으로 쓸 수 있다
{modal && (<Modal />)}