모던자스 튜토리얼 공부 후 정리한 내용입니다

JavaScript에서 조건을 처리하고 싶을 때 우리가 쓸 수 있는 방법은 두개
1. If문
2. 물음표 연산자 ?

1️⃣ if문

형태 :

if (조건) { 
	조건이 참일 때 실행문 
}

• 실행하고자 하는 코드가 한줄이면 중괄호를 생략해도 무관하다
• 하지만 가독성을 위해 코드블럭을 중괄호로 묶어주는 것을 생활화하자!

✔️ 조건 -> Boolean형으로 변환

• 괄호 안의 조건 표현식은 결과적으로 true냐 false냐로 변환된다
• 괄호 안에는 다양한 형태의 표현식이 올 수 있다

🤍 Falsy 값

즉, boolean형으로 변환했을 때 false로 처리되는 애들이다

• 0
• "" (빈 문자열)
• null
• undefined
• NaN

🤍 Truthy 값

즉, boolean형으로 변환했을 때 true로 처리되는 애들이다

• 위의 특수한 falsy 값을 빼고 다!
• 숫자 0 빼고 모든 숫자도 true 취급
• 비어있지 않은 어떠한 문자열도 모두 true 취급

✔️ 변수로 boolean값 전달

let 변수 = (조건); // ex : (year == 2023)

if (변수) {
  ...
}

💡 위와 같이 수에 boolean값으로 변환될 수 있는 표현식을 소괄호로 묶어, 변환된 boolean값을 변수에 저장할 수도 있다.

✔️ else절

형태 :

if (조건) {
	조건이 참일 때 실행 내용
} else {
	조건이 거짓일 때 실행 내용
}

✔️ else if절

형태 :

if (조건) {
	조건이 참일 때 실행 내용
} else if (조건2) {
	조건이 거짓이고, 조건2가 참일 때 실행 내용
} else if (조건3) {
	조건,조건2가 거짓이고, 조건3이 참일 때 실행 내용
} else {
	모든 조건이 거짓일 때 실행 내용
}

---

2️⃣ 물음표 연산자 ?

• 정식 명칭은 조건부 연산자
• 조건에 따라 다른 값을 변수에 할당할 때 사용

형태 :

let 변수 = 조건 ? 참일때값 : 거짓일때값;

• 삼항(ternary) 연산자임
  • 피연산자가 세개인 연산자라는 뜻
  • JS에서 유일한 삼항 연산자이다

💡물음표 앞의 조건 표현식은 소괄호를 사용하지 않아도 된다.
물음표 연산자의 우선순위가 낮기 때문에 괄호 없이도 조건표현식 내부가 먼저 계산되고, 그 후 물음표 연산자가 적용되기 때문!
하지만 가독성을 위해 괄호는 생활화하자~

예시 :

let accessAllowed = (age > 18) ? true : false;  //-> OK

let accessAllowed = age > 18 ? true : false;	//-> OK but 가독성X

✔️ 다중 '?'

형태 :

let 변수 = (조건1) ? '참일때값' : 
	(조건2) ? '조건1거짓,조건2참일때값' :
    (조건3) ? '조건12거짓,조건3참일때값' :
    '조건123거짓일때값';

• 생소한 구조이지만, if/ else if/ else와 유사한 원리이니 헷갈릴 것 없다!

✔️ 물음표 연산자의 잘못된 쓰임

💡조건에 따라 변수에 대입될 값이 아닌 실행할 표현식이 오는 것은 좋지 않다!
-> 이럴 땐 if문 쓰기 (훨~씬 가독성이 좋기 때문!)

예시 :

let company = prompt('자바스크립트는 어떤 회사가 만들었을까요?', '');

(company == 'Netscape') ?
   alert('정답입니다!') : alert('오답입니다!');	// alert라는 실행문이 피연산자임

---

🙉 오늘의 TL;DR

• 분기에 따라 다른 코드를 실행하고자 할 땐 -> if문
• 분기에 따라 변수에 다른 값을 대입하고자 할 땐 -> 물음표연산자