상세 컨텐츠

본문 제목

[Codecademy-JavaScript] 3장 CONDITIONALS

22-23/22-23 리액트 스타터 3

by YUZ 유즈 2022. 9. 22. 10:01

본문

728x90

[CONDITIONALS]

우리는 일상생활에서 다양한 상황에 따라 어떻게 행동할지 결정을 내립니다. 예를 들어 아침에 일어나서 피곤하다면 우리는 다시 잠에 드는 선택을 할 것이고, 피곤하지 않다면 하루를 시작할 것입니다. 이번 장에서는 조건문을 통해 이러한 상황들을 코드로 만들어 봅시다.

 

3-1. If Statement

우리는 종종 조건에 따라 작업을 수행합니다. 프로그래밍에서는 If문을 사용하여 조건에 따라 작업을 수행할 수 있습니다.

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

위의 예시를 통해서 If문의 구성 요소를 알아봅시다.

  • If 키워드는 () 뒤에 코드블럭인 { }로 구성됩니다.
  • ( ) 안에는 true이나 false로 평가되는 조건이 제공됩니다.
  • 조건이 true일 경우 { } 내부의 코드가 실행됩니다.
  • 조건이 false일 경우 { } 안의 코드가 실행되지 않습니다.

 

3-2. If..Else Statement

조건이 false일 경우 실행될 코드들은 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!

 

3-3. Comparison Operators

조건문을 작성할 때, 값들을 비교하기 위해서는 다양한 연산자들이 필요합니다. 이것을 비교 연산자라고 부릅니다.

비교 연산자는 연산자를 기준으로 왼쪽과 오른쪽에 있는 값을 비교합니다.

 

다음은 몇 가지 유용한 비교 연산자입니다.

비교 연산자 구문
< Less than (보다 적은)
> Greater than (보다 큰)
<= Less than or equal to (작거나 같은)
>= Greater than or equal to (크거나 같은)
=== Is equal to (같은)
!== Is not equal to (같지 않은)

 

3-4. Logical Operators

조건부를 사용한다는 것은 true와 false의 부울값을 사용한다는 것을 의미합니다. 이런 부울 값으로 작동하는 연산자를 논리 연산자라고 합니다. 논리 연산자는 더욱 정교한 작업을 가능하게 합니다. 아래는 세가지 논리 연산자입니다.

  • (&&) : and 연산자
  • ( || ) : or 연산자
  • ( ! ) : not 연산자 
if (stopLight === 'green' && pedestrians === 0) {
  console.log('Go!');
} else {
  console.log('Stop');
}

(&&) 연산자는 두 조건이 모두 true일 때  true로 평가되고, 둘 중 하나라도 false라면 false로 평가됩니다.

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

( || ) 연산자는 조건 중 하나라도 true라면 true로 평가됩니다. 두 조건이 모두 false일 때 false로 평가됩니다.

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

( ! ) 연산자는 true 값 false로 반환하고, false 값을 true로 반환합니다.

 

3-5. Truthy and Falsy

부울이 아닌 데이터 유형인 문자열이나 숫자의 경우 조건 내에서 어떻게 평가되는지 알아봅시다. 변수의 값이 정확히 부울값 true를 같지 않아도 부울이나 조건의 맥락에서 non-falsy 값을 갖고 있다면 true로 평가됩니다. falsy 형태의 값을 가진다면 false로 평가됩니다. 다음은 falsy 값을 가지는 목록입니다.

  • 0
  • "  ", '  '와 같은 빈 문자열
  • null
  • undefined
  • NaN

 

3-6. Ternary Operator

If...else 문을 삼항연산자를 통해 간단하게 표현 할 수 있습니다.

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

위의 If...else문을 삼항연산자를 통해 표현하면 이렇게 됩니다.

isNightTime ? console.log('Turn on the lights!') : console.log('Turn off the lights!');
  • 조건 isNightTime? 전에 배치합니다.
  • ? 다음에 : 을 통해 나누고 앞에는 true일 경우 실행될 문장을 배치합니다.
  • : 뒤에는 false일 경우 실행될 문장을 배치합니다.

 

3-7. Else If Statements

더 많은 조건을 추가하고 싶다면 else if문을 사용할 수 있습니다. 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!');
}

else if문을 통해 우리는 다양한 결과를 얻을 수 있습니다. if / else if/ else 문은 위에서 아래로 읽히므로, 위에서 아래에서 참으로 평가되는 첫 번째 조건의 블럭이 실행됩니다. 위의 예시에서 stopLight === 'yellow' 가 참으로 평가되기 때문에 해당 else if 문에 해당하는 블럭의 코드가 실행됩니다. 

 

3-8. Switch

else if구문을 통해 다양한 조건을 확인 할수 있지만, 100개의 다른 값을 위해 else if문을 작성한다고 한다면 너무 힘들 것입니다. 그럴 때 우리는 Switch 키워드를 통해 여러값을 확인하고 그 값을 각각 다르게 처리할 수 있습니다. Switch 문은 읽고 쓰기가 쉬운 대체 구문을 제공합니다.

let groceryItem = 'papaya';
 
if (groceryItem === 'tomato') {
  console.log('Tomatoes are $0.49');
} else if (groceryItem === 'papaya'){
  console.log('Papayas are $1.29');
} else {
  console.log('Invalid item');
}

위의 else if문을 Switch문을 통해 아래처럼 표현할 수 있습니다.

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;
}
 
// Prints 'Papayas are $1.29'
  • switch 키워드 다음에 위치하는 (...)에는 case 에서 비교될 값이 위치합니다.
  • {  } 안에는 다양한 case 들이 위치하게 됩니다.
  • break 키워드는 블럭 안의 다른 case들을 더 확인할 필요 없음을 컴퓨터에게 전달하여 블럭을 빠져나가게 합니다.
  • switch문의 끝에는 default문이 위치하며, 모든 case가 true가 아닐 경우 default값이 실행됩니다.
728x90

관련글 더보기