[Javascript] Codecademy 2. Conditionals

2. Conditionals

일상생활에서 우리는 상황에 따라 결정을 내립니다. 예를 들어, 피곤하면 잠을 자고 그렇지 않으면 일어나서 하루를 시작합니다. 이러한 if-else 결정은 조건문을 작성하여 코드로 모델링할 수 있습니다. 조건문은 특정 조건을 검사하고 조건에 따라 작업을 수행합니다.

---

2-1. if 문

if 옆 괄호 () 안에 참 또는 거짓으로 평가하는 조건이 제공됩니다. 해당 조건의 결과가 true이면 중괄호 {} 안의 코드가 실행되고 조건의 결과가 false이면 중괄호 안의 블록이 실행되지 않습니다.

if (true) {
  console.log('Time to buy!'); 
}

 

2-2. if…else 문

if 문의 조건의 결과가 false일 때 else문의 코드가 실행됩니다.

if (false) {
  console.log('Time to buy!');
} else {
  console.log('Time to wait for a sale.');
}

 

2-3. 비교 연산자(comparison operators)

비교 연산자는 값을 비교하기 위한 연산자를 말합니다. 비교 연산자는 왼쪽 값과 오른쪽의 값을 비교합니다. 비교 진술을 질문으로 생각하는 것이 도움이 될 수 있습니다. 답이 "예"일 때 진술은 참으로 평가되고, "아니오"일 때 진술은 거짓으로 평가됩니다.

~보다 작다(Less than) : <	~보다 크다(Greater than) : >
~보다 작거나 같다(Less than or equal to) : <=	~보다 크거나 같다(Greater than or equal to) : >=
~와 같다(Is equal to) : ===	~와 같지 않다(Is not equal to) : !==

 

문자열과 같은 다양한 데이터 유형에도 비교 연산자를 사용할 수 있습니다. 아래의 예는 연산자(===)를 사용하여 문자열 'dogs'와 문자열 'hotdog’가 동일한지 확인하는 예입니다. 두 문자열이 동일하지 않기 때문에 비교 문은 false로 평가됩니다.

10 < 20 // Evaluates to true
'dogs' === 'hotdog' // false

 

2-4. 논리 연산자(logical operators)

자바스크립트에는 논리 연산자로 알려진 부울 값으로 작동하는 연산자가 있습니다. 논리 연산자를 사용하면 조건에 더 복잡한 논리를 추가할 수 있습니다. 

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

&& 연산자는 조건이 모두 참일 때, 참으로 평가됩니다. 두 조건 중 하나가 거짓이면 && 조건이 거짓으로 평가되고 다른 블록이 실행됩니다.

 

두 조건 중 하나만 참일 경우에는 || 연산자를 사용할 수 있습니다.

if (day === 'Saturday' || day === 'Sunday') {
  console.log('Enjoy the weekend!');
} else {
  console.log('Do some work.');
}

|| 연산자는 조건 중 하나만 참이어도 참으로 평가됩니다. 위의 코드 예제에서 day === 'Saturday' 또는 day === 'Sunday' 중 하나를 참으로 평가하면 if의 조건이 참으로 평가되고, 해당 코드 블록이 실행됩니다. day === 'Saturday'가 거짓으로 평가된 경우에만 day === 'Sunday'가 평가됩니다. 두 비교가 모두 거짓으로 평가될 경우에만 else 문의 코드가 실행됩니다.

 

! not 연산자는 부울 값을 반전시키거나 부정합니다. 기본적으로 ! 연산자는 참 값을 거짓 값으로 되넘기거나 거짓 값을 참 값으로 되넘깁니다.

let excited = true;
console.log(!excited); // Prints false

 

2-5. Truthy와 Falsy

조건 내에서 문자열이나 숫자와 같은 non-boolean 데이터 유형이 어떻게 평가되는지 생각해 보겠습니다.

let myVariable = 'I Exist!';

if (myVariable) {
   console.log(myVariable)
} else {
   console.log('The variable does not exist.')
}

if 문의 코드 블록은 myVariable에 truthy 값이 있기 때문에 실행됩니다. myVariable의 값이 명시적으로 true가 아니더라도 부울 또는 조건적인 맥락에서 사용될 경우 non-falsy 값이 할당되었기 때문에 true로 평가됩니다. 0과 “”, ‘’, null, NaN, 선언된 변수에 값이 없는 경우 등은 false로 평가됩니다.

 

2-6. 삼항 연산자(ternary operators)

3항 연산자를 사용하여 if...else 문을 단순화할 수 있습니다. 조건은 ? 왼편에 제공되고 두 식은 콜론으로 구분됩니다. 조건이 true이면 첫 번째 식이 실행되고, 조건이 false이면 두 번째 식이 실행됩니다.

isNightTime ? console.log('Turn on the lights!') : console.log('Turn off the lights!');

 

2-7. switch 구문

switch 문은 여러 값을 확인하고 각각 다르게 처리해야 할 필요가 있을 때 많이 쓰입니다. 위의 예시에서 case 뒤에 오는 지정된 값들을 groceryItem의 값 'papaya'와 일치하는지 확인합니다. break는 코드 블록 내의 다른 사례를 확인하지 않도록 지시합니다. 각 switch 문의 끝에는 default 문이 있는데 사례가 모두 참이 아니면 default 문이 실행됩니다.

let groceryItem = 'papaya';

switch (groceryItem) {
  case 'tomato':
    console.log('Tomatoes are $0.49');
    break;
  case 'lime':
    console.log('Limes are $1.49');
    break;
default:
    console.log('Invalid item');
    break;
}

 

 

---

Corner React Starter #1

Editor dori

 

 

 

다른 포스트 바로가기

2021.09.25 - [분류 전체보기] - 환영합니다!