# 조건문, 할까? 말까? ## 미션 조건문의 개요와 각 요소 별 사용법을 익히시오. <img src="http://drive.google.com/uc?export=view&id=1iCS3Pt3z0j9zL44n4aQV8kOkOggMlp0y" alt="홍팍-자바스크립트-조건문-미션"> ## 00:36 조건문이란? 조건에 따라 실행 구문을 결정하는 문법. 우리가 다향한 상황을 고려하여 점심 메뉴를 고르듯, 컴퓨터 또한 다양한 상황을 고려하여 실행을 결정할 수 있다. 조건문은 그 종류가 다양하고, 이와 함께 다양한 연산자들도 사용된다. ## 01:11 if 문 if 문은 소괄호 사이에 조건식, 중괄호 사이에 수행 구문이 적힌다. 조건식이 참이면, 중괄호 내부가 수행된다. ``` if (조건식) { 조건식이 참이면, 수행 } ``` 성인인 경우에 맥주를 시키는 의사 코드(pseudo code)는 다음과 같다. ``` if (age > 18) { 맥주 ㄱ } ``` ## 01:35 if-else 문 if 문의 조건식이 거짓인 경우에 특정 동장을 수행하려면 어떻게 해야할까? else 문을 쓰면 된다. else 문은 if 문과 쌍을 이루어 작성된다. ``` if (조건식) { 조건식이 참이면, 수행 } else { 조건식이 거짓이면, 수행 } ``` 다음은 성인은 맥주를, 그 외는 콜라를 시키는 코드이다. ``` if (age > 18) { 맥주 ㄱ } else { 콜라 ㄱ } ``` ## 01:54 else-if 문 성인이 아니지만 다이어트 중인 경우, 제로 콜라를 주문하게 해보자. 어떻게 해야할까? else-if 문을 쓰면 된다. 다음 코드는 조건식A가 거짓인 경우, else-if 문을 통해 다시 조건식B를 검사하게 된다. 참인 경우 중괄호 내부가 수행된다. 거짓이라면 다음 else로 실행 흐름이 넘어간다. ``` if (조건식A) { 조건식A가 참이면, 수행 } else if (조건식B) { 조건식B가 참이면, 수행 // 이미 조건식A는 거짓인 상태 } else { 모든 조건식이 거짓인 경우, 수행 } ``` 따라서 다음 코드는 성인은 맥주, 성인이 아니면서 다이어트 중인 경우엔 제로 콜라, 그외는 그냥 콜라를 주문한다. ``` if (age > 18) { 맥주 ㄱ } else if (다이어트중?) { 제로 콜라 ㄱ } else { 콜라 ㄱ } ``` ## 02:32 비교 연산자 비교 연산자는 두 값을 비교하여 참 거짓을 반환한다. 비교 연산자는 조건문 작성에 빼놓을 수 없는 요소다. 기본이 되는 연산자는 다음과 같다. ``` console.log(7 === 3); // 7은 3과 같은가? => false console.log(7 !== 3); // 7은 3과 다른가? => true console.log(7 > 3); // 7은 3보다 큰가? => true console.log(7 >= 3); // 7은 3보다 크거나 같은가? => true console.log(7 < 3); // 7은 3보다 작은가? => false console.log(7 <= 3); // 7은 3보다 작은가? => false ``` ## 02:59 논리 연산자 - AND, OR, NOT 논리 연산자 또한 비교 연산자와 마찬가지로 조건문에 자주 활용된다. 논리 연산자는 3가지 AND, OR, NOT이 있다. 이를 활용하여 더욱 풍부한 조건식을 만들 수 있다. 다음은 그 예로, 성적에 따라 학점을 부여하는 코드이다. if 문의 조건식에선 AND 연산을, 다음 else-if 의 조건식에선 OR 연산을 사용하였다. ``` // 수학과 영어 과목에 따라 학점을 부여하는 예 if (math >= 90 && eng >= 90) { grade = "A"; // 두 과목 모두 90점 이상 => A 학점 } else if (math >= 90 || eng >= 90) { grade = "B"; // 한 과목이라도 90점 이상 => B 학점 } else { grade = "C"; // 그외 => C 학점 } ``` <img src="http://drive.google.com/uc?export=view&id=1iC_RhaSqMjsmgUxfXFFOyNKnbsaw464s" alt="홍팍-자바스크립트-조건문-비교연산자-논리연산자"> AND 연산은 양쪽 모두 참이면 참, 아닌 경우 거짓을 반환한다. ``` console.log(true && true); // true console.log(true && false); // false console.log(false && true); // false console.log(false && false); // false ``` OR 연산은 둘 중 하나만 참이면 된다. 둘다 거짓인 경우엔 거짓이다. ``` console.log(true || true); // true console.log(true || false); // true console.log(false || true); // true console.log(false || false); // false ``` NOT 연산은 기존값을 반대로 바꾼다. ``` console.log(!true); // false console.log(!false); // true console.log(!(3 > 2)) // false ``` 논리 연산자간 우선순위는 NOT > AND > OR 순이다. ## 04:40 switch 문 switch 문은 조건문의 변형이다. 이거 몰라도 조건문 작성할 수 있다. 하지만 알아두면 좋다. 먼저 기존 조건문이 다음과 같이 있다 하자. ``` const color = "green"; if (color === "red") { console.log("✋ 멈추시오!"); } else if (color === "yellow") { console.log("⚠️ 주의하시오!"); } else if (color === "green") { console.log("🚗 이동하시오!"); } else { console.log("🙅‍♀️ 잘못된 색상이오.."); } ``` 이를 switch 문으로 바꾸면 다음과 같다. 소괄호 사이에 비교대상을 넣고, 다양한 값을 케이스에 담아 실행을 구분한다. 각 케이스 끝에 break 문이 있음을 유의하자. 자세한 실행 흐름은 다음 실습에서 다시 다루겠다. ``` const color = "green"; switch(color) { // color => 비교할 값 case "red": // color === "red" console.log("✋ 멈추시오!"); break; case "yellow": // color === "yellow" console.log("⚠️ 주의하시오!"); break; case "green": // color === "green" console.log("🚗 이동하시오~"); break; default: // 일치 color가 없는 경우 console.log("🙅‍♀️ 잘못된 색상이오~"); break; } ``` ## 05:38 삼항 연산자 삼항 연산자도 조건문의 변형이다. 몰라도 된다. 하지만 알면 좋다. 삼항 연산자는 조건식이 참인 경우의 반환값과 거짓인 경우의 반환값을 지정한다. ``` (조건식) ? 참인_경우_반환할_값 : 거짓인_경우_반환할_값; ``` 따라서 다음 코드는 무게가 100보다 작은 경우엔 "OK~"를, 아닌 경우엔 "NOPE!"을 변수 result에 담는다. ``` let result = (weight < 100) ? "OK~" : "NOPE!"; ``` 위 코드를 기존 조건문으로 작성하면 다음과 같다. 어떠한가? 삼항 연산자가 더 간결하지 않은가? ``` let result = undefined; if (weight < 100) { result = "OK~"; } else { result = "NOPE!"; } ``` ## 구글링 훈련하기 🔥 - 자바스크립트 조건문 - 자바스크립트 if 문 - 자바스크립트 if-else 문 - 자바스크립트 else-if 문 - 자바스크립트 비교 연산자 - 자바스크립트 논리 연산자 - 자바스크립트 switch 문 - 자바스크립트 삼항 연산자