[JavaScript] 02. CONDITIONALS

I. CONDITIONAL STATEMENTS

 

 01  What are Conditional Statements?

우리는 인생을 살아가면서 상황에 맞는 선택을 자주 합니다. 피곤하면 잠자리에 들고, 그렇지 않으면 일어나서 하루를 시작합니다. JavaScript에서는 if-else 조건문을 통해 조건에 따른 다른 상황들을 표현할 수 있습니다.

 

2. if Statement / if 문

if문은 ( ) 안의 내용이 true일 때 실행됩니다. ( ) 안에는 true 또는 false로 평가되는 조건이 제공됩니다. 중괄호 { } 안의 코드는 조건이 true면 실행되고, false면 실행되지 않습니다.

if (true) {
  console.log('This message will print!'); 
}
// Output: This message will print!

 

3. if...else Statements / if...else 문

조건을 제시하는 if 문의 결과값이 false면 else 문의 코드가 실행됩니다. else 문은 반드시 if 문과 쌍을 이루어야 합니다.

if (false) {
  console.log('The code in this block will not run.');
} else {
  console.log('But the code in this block will!');
}
// Prints: But the code in this block will!

 

4. Comparison Operators / 비교 연산자

Comparison Operators(비교 연산자)는 조건문을 작성할 때 값을 비교하기 위해 사용하는 연산자입니다. 참(true)과 거짓(false)을 판별할 때 사용됩니다.

연산자	의미	연산자	의미
>	~ 초과	<	~ 미만
>=	~ 크거나 작다	<=	~ 작거나 같다
===	~ 와 같다.	!==	~ 와 같지 않다.

 

5. Logical Operators / 논리 연산자

Logical Operators(논리 연산자)는 참(true)과 거짓(false) 값을 사용하는 부울 값으로 작동하는 연산자입니다. 논리 연산자를 사용하여 조건문에 보다 정교한 논리를 만들 수 있습니다.

• && : AND 연산자, 전체 조건이 true이면 true 값을 반환합니다.
• ||    : OR 연산자, 전체 조건 중 하나의 조건이라도 true이면 true 값을 반환합니다.
• !     : NOT 연산자 또는  bang 연산자, 부울 값을 뒤집거나 부정합니다.

let stopLight = 'green' 
if (stopLight === 'green' && pedestrians === 0) {
  console.log('Go!');
} else {
  console.log('Stop');
} // Output: Go!

let sleepy = false;
console.log(!sleepy); // Output: true

 

6. Truthy and Falsy / 진실과 거짓

JavaScript에서는 부울(boolean)이 아닌 자료형이 조건문에서 검사 될 때의 값이 지정되어있습니다. 변수의 값이 할당되었을 경우 true로 평가됩니다.

let myVariable = 'I Exist!';

if (myVariable) {
   console.log(myVariable)
} else {
   console.log('The variable does not exist.')
} // Output: I Exist!

 

다음의 경우는 조건문에서 검사 시 false 값을 반환합니다.

• 0
• ""이나 ''와 같은 빈 문자열
• null
• undefined 
• NaN (Not a Number)

let numberOfApples = 0;

if (numberOfApples){
   console.log('Let us eat apples!');
} else {
   console.log('No apples left!');
} // Output: No apples left!

 

7. Truthy and Falsy Assignment / 진실과 거짓 할당

조건문을 활용하여 변수에 값을 할당할 수도 있습니다.

let username = '';
let defaultName;

if (username) {
  defaultName = username;
} else {
  defaultName = 'Stranger';
} 
console.log(defaultName); // Output: Stranger

 

8. Ternary Operator / 삼항 연산자

Ternary Operator(삼항 연산자)를 사용하여 if...else 문을 단순화할 수 있습니다. 조건? (실행문1) : (실행문2) 로 표현합니다. 조건이 true라면 실행문1을 실행되고, 조건이 false라면 실행문2가 실행됩니다.

let isNightTime = true;
 
if (isNightTime) {
  console.log('Turn on the lights!');
} else {
  console.log('Turn off the lights!');
} //Output: Turn on the lights!

 

9. Else If Statements / else if 문

else if 문을 통하여 if...else에 더 많은 조건을 추가할 수 있습니다. else if 문은 항상 if 문 뒤와 else 문 앞에 위치합니다.

let stopLight = 'yellow';

if (stopLight === 'red') {
  console.log('Stop!');
} else if (stopLight === 'yellow') {
  console.log('Slow down.');
} else if (stopLight === 'green') {
  console.log('Go!');
} else {
  console.log('Caution, unknown!');
} // Output: Slow down.

 

10. The switch keyword / Switch 키워드

조건이 많은 경우 else if 문을 통해 조건들을 나열하는 것은 비효율적입니다. switch 키워드를 통해 여러 값을 확인하고 각 값에 대해 다르게 처리할 수 있습니다. 

let groceryItem = 'papaya';
 
switch (groceryItem) {
  case 'tomato':
    console.log('Tomatoes are $0.49');
    break;
  case 'lime':
    console.log('Limes are $1.49');
    break;
  case 'papaya':
    console.log('Papayas are $1.29');
    break;
  default:
    console.log('Invalid item');
    break;
} // Output: 'Papayas are $1.29'

---

Quiz

1. 조건을 제시하는 if 문의 결과값이 (________)면 else 문의 코드가 실행됩니다. else 문은 반드시 if 문과 쌍을 이루어야 합니다.
   
   
2. && 연산자는 AND 연산자로, 조건 중 하나라도 false일 경우 (________) 값을 반환합니다.
   
   
3. 당신은 오늘의 날씨에 맞게 필요한 준비물을 알려주는 프로그램을 작성하고 싶습니다.
   1) todayWeather 이라는 변수에 날씨 값을 저장할 수 있습니다.
   2) Sunny 날씨는 시원한 물을 가져가라고 출력합니다.
   3) Rain 날씨는 우산을 가져가라고 출력합니다.
   4) Windy 날씨는 겉옷을 가져가라고 출력합니다.
   5) 날씨가 제공되지 않으면 가방을 가져가라고 출력합니다.