09 조건문과 실행 흐름
# 조건문과 실행 흐름
## 미션
조건문의 개요와 각 요소 별 사용법을 실제 코드를 통해 훈련하시오.
<img src="http://drive.google.com/uc?export=view&id=1iCS3Pt3z0j9zL44n4aQV8kOkOggMlp0y" alt="홍팍-자바스크립트-조건문-실습-미션">
## 00:51 기본파일 생성
#### conditionals.html
```
<!-- HTML 관련 구글링 -->
<!-- 👉 site:developer.mozilla.org {연관_키워드} -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 외부 파일 연결 -->
<link rel="stylesheet" href="conditionals.css">
<Script defer src="conditionals.js"></Script>
</head>
<body>
<h1>조건문, 상황별 다른 실행!</h1>
<h2>소개팅#1, 라떼와 아아 중 택1</h2>
<pre>
if (맘에_드는가) {
라떼 주문 // 맘에 드는 경우
} else {
아아 주문 // 맘에 안드는 경우
}
</pre>
<h2>소개팅#2: 아직 모르겠다면 카푸치노</h2>
<pre>
if (맘에_드는가) {
라떼 주문 // 맘에 드는 경우
} else if (아직_모르겠는가) {
카푸치노 주문 // 아직 모르겠는 경우
} else {
아아 주문 // 부합하는게 없는 경우
}
</pre>
<h2>버스요금: 나이에 따른 가격 설정</h2>
<pre>
if (18세_초과) {
1200원 // 일반
} else if (12세_초과) {
720원 // 청소년
} else {
450원 // 어린이(12세 이하)
}
</pre>
<h2>계절 찾기</h2>
<pre>
switch(month) {
case 12:
case 1:
case 2:
☃️ 겨울이라능!
break;
case 3:
case 4:
case 5:
🌱 봄이라능!
break;
case 6:
case 7:
case 8:
🏖 여름이다능!
break;
case 9:
case 10:
case 11:
🍂 가을이라능!
break;
default:
⚠️ 입력이 잘못됐다능!
break;
}
</pre>
<h2>학점: PASS or FAIL</h2>
<pre>
// 80점 이상이면 "PASS", 아니면 "FAIL"을 반환!
const result = (80점 이상인가) ? "PASS" : "FAIL"
</pre>
</body>
</html>
```
#### conditionals.css
```
/*
* CSS 관련 구글링
* 👉 site:developer.mozilla.org {연관_키워드}
*/
body {
font-family: Arial, Helvetica, sans-serif;
}
pre {
background-color: #efefef;
padding-top: 1rem;
margin: 0;
}
```
#### conditionals.js
```
// JavaScript 관련 구글링
// 👉 site:developer.mozilla.org {연관_키워드}
'use strict';
```
## 01:45 if 문
```
// 1. if 문, 하거나 말거나!
// - 조건식이 참(true)일 때 동작을 수행
// - 조건식이 거짓(false)인 경우, 수행하지 않음
// 상황 설정:
// - 소개팅 상대가 맘에들면, 라떼를 주문하기로!
function orderBeverage(isAttractive) {
if (isAttractive === "yes") {
console.log("라떼 주세요💕");
}
}
orderBeverage("yes");
```
## 04:53 if-else 문
```
// 2. else 문, 거짓이라면?
// - if 문의 조건식이 거짓인 경우, 수행할 구문
// - if 문과 함께 연결되어 동작 함
// 상황 설정:
// - 소개팅 상대가 맘에들면, 라떼를 주문하기로!
// - 맘에 들지 않으면, 아이스 아메리카노..
function orderBeverage(isAttractive) {
if (isAttractive === "yes") {
console.log("라떼 주세요💕");
} else {
console.log("아이스 아메리카노, 얼음 팍팍..🧊");
}
}
orderBeverage("yes");
orderBeverage("no")
```
## 06:15 else-if 문
```
// 3. else-if 문, 추가 조건을 처리하려면?
// - else 문에 if 문을 연결하면 됨
// - 이전 조건이 거짓인 경우, 새로운 조건을 처리하는 방식
// 상황 설정:
// - 소개팅 상대가 맘에들면, 라떼를 주문하기로!
// - 아직 모르겠다면, 레몬 에이드..!
// - 맘에 들지 않으면, 아이스 아메리카노..
function orderBeverage(isAttractive) {
if (isAttractive === "yes") {
console.log("라떼 주세요💕");
} else if (isAttractive === "not yet") {
console.log("레몬 에이드 주세요🍋");
} else {
console.log("아이스 아메리카노, 얼음 팍팍..🧊");
}
}
orderBeverage("yes");
orderBeverage("no")
orderBeverage("not yet");
```
## 08:26 비교 연산자
```
// 4. 비교 연산자, 두 값을 비교하여 참 또는 거짓을 반환!
// 👉 === (같은가?),!== (다른가?),
// 👉 > (큰가?), >= (크거나 같은가?),
// 👉 < (작은가?), <= (작거나 같은가?)
// 상황 설정: 나이에 따른 버스 요금 계산하기
function calculateBusFare(age = 20) { // 나이(기본값: 20)
// 요금(지역변수)
let fare = 0;
// 나이에 따른 요금 계산
if (age > 18) {
fare = 1200; // 일반: 1200원
} else if (age > 12) {
fare = 720; // 청소년: 720원
} else {
fare = 450; // 어린이: 450원
}
// 값 반환
return fare;
}
console.log(`20세 => ${calculateBusFare()} 원`);
console.log(`17세 => ${calculateBusFare(17)} 원`);
console.log(`11세 => ${calculateBusFare(11)} 원`);
```
## 14:08 논리 연산자
```
// 5. 논리 연산자, 풍부한 조건식 만들기!
// - AND(&&): 두 조건이 모두 참이면, 참(true)
// - OR(||): 둘 중 하나라도 참이면, 참(true)
// - NOT(!): 참을 거짓으로, 거짓을 참으로 변경
// 상황 설정: 소개팅 어플, 등급 계산
// - 평가 속성: 외모(0~100), 대화(0~100), 재력(0~100)
// - 결과 등급: S(최상), A(상), B(중), C(하)
function calculateAwesomeTier(looking, talking, rich) {
// 등급(지역변수) 생성
let tier = null;
// 점수에 따른 등급 계산
if (looking >= 90 && talking >= 90 && rich >= 90) {
tier = "S"; // 모두 90점 이상
} else if (rich >= 90 && (looking + talking) >= 160) {
// 재력이 90점 이상이면서, 외모와 대화 총점이 160 이상
tier = "A";
} else if (looking > 90 || talking > 90 || rich > 90) {
tier = "B"; // 적어도 하나가 90점 초과
} else {
tier = "C";
}
// 값 반환
return tier;
}
console.log(`${calculateAwesomeTier(92, 90, 94)} 등급`);
console.log(`${calculateAwesomeTier(85, 84, 91)} 등급`);
console.log(`${calculateAwesomeTier(77, 92, 73)} 등급`);
console.log(`${calculateAwesomeTier(80, 88, 79)} 등급`);
```
## 20:00 switch 문
```
// 6. switch 문, 조건이 일치하면 처리하기!
// 상황 설정: 각 월별 계절을 계산
function calculateSeason(month) {
// 계절(지역변수) 생성
let season = undefined;
// 입력 월에 따른 계절 계산
switch (month) {
case 3:
case 4:
case 5:
season = "봄";
break;
case 6:
case 7:
case 8:
season = "여름";
break;
case 9:
case 10:
case 11:
season = "가을";
break;
case 12:
case 1:
case 2:
season = "겨울";
break;
default:
season = null;
break;
}
// 값 반환
return season;
}
console.log(`4월 => ${calculateSeason(4)}`);
console.log(`10월 => ${calculateSeason(10)}`);
console.log(`13월 => ${calculateSeason(13)}`);
```
## 25:05 삼항 연산자
```
// 7. 삼항 연산자, 조건에 따른 결과 반환!
// - 조건식이 참이면 왼쪽, 거짓이면 오른쪽 값을 반환!
// 상황 설정: 운전면허 시험! 80점 이상은 통과, 아니면 실패..
function calcDriverLicense(score) {
return (score >= 80) ? "👍 PASS" : "😱 FAIL";;
}
console.log(calcDriverLicense(100));
console.log(calcDriverLicense(78));
```
## 훈련 퀴즈 🔥
#### A: 다음 중, 옳은 것을 모두 고르시오.
1. 조건문은 상황에 따라 실행 흐름을 결정한다
2. 비교 연산자는 두 값을 비교하여 참/거짓을 반환한다
3. 논리 연산자간 우선순위는 NOT > AND > OR 이다
#### B: (x >= 157) && (x < 170) 을 만족하는 x의 값은?
1. 157
2. 170
3. 175
#### C: 다음 조건식의 결과를 적으시오. true/false
- 7 !== 3
- 5 === “5”
- null !== undefined
- !(2 <= 5)
- 56 % 8 === 0