[Codecademy] Learn JavaScript 2. Conditionals

2. Conditionals

● Conditional Statements

1. 조건문이란 무엇인가?

- 조건문이란 프로그램이 조건을 평가하여 결정을 내리고 코드에 논리를 넣는 것을 말한다.

 

2. IF문

 프로그래밍에서 if명령문을 사용하여 조건에 따라 작업을 수행할 수도 있다.

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

Instruction

1. let을 사용해서 변수를 선언한다.

2.if문을 작성하고 if문 안에 console.log()를 이용해 문자열을 넣는다.

3.sale을 false로 변경시킨 후 관찰한다.

let sale = true;

sale = false;

if (sale) {
  console.log('Time to buy!');
}코드

 

3. IF...Else문

else 예약어는 if문의 조건식에 부합하지 않는 경우의 동작을 추가할 때 사용한다.

하나의 else명령문은 if명령문과 짝을 이루어 if...else문이라고 한다.

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!

Instruction

1. if문에 else 명령문을 추가한다. 

let sale = true;

sale = false;

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

 

4. 비교연산자

조건문을 작성할 때 값을 비교하기 위해 다른 유형의 연산자를 사용해야 하는 경우에 사용하는 연산자이다.

 

• 미만: <
• 보다 큰: >
• 이하: <=
• 크거나 같음: >=
• 와 동등하다: ==, ===
• 같지 않음: !==

* == 와 === 의 차이점

 ==는 값이 같은지만 검사하고, ===는 값이 같은지와 더불어 자료형이 같은지도 검사한다.

Instruction

1. 변수를 만들고 그 수를 7로 설정한다.

2. if...else문에 비교 연산자를 사용하여 명령문을 작성한다.

let hungerLevel=7;
if(hungerLevel>7){
  console.log('Time to eat!');
}
else{
  console.log('We can eat later!');
}

 

---

5. 논리연산자

true와 false를 사용하여 조건부로 작성한다.

조건문에 더 정교한 논리를 추가할 수 있다.

• AND 연산자 : &&
• OR 연산자 : ||
• NOT 연산자 또는 bang 연산자 : !

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

Instruction

1. mood와 tirednessLevel이 모두 일치하는지에 따라 조건문을 만들고 true인 경우와 false인 경우에 따라 각각 문장을 출력한다.

let mood = 'sleepy';
let tirednessLevel = 6;

if (mood === 'sleepy' && tirednessLevel > 8) {
  console.log('time to sleep');
} else {
  console.log('not bed time yet');
}

 

---

6.  Truty and Falsy 진실과 거짓

boolean 형이 아닌 데이터가 조건식에 들어갔을 때 어떻게 평가되는지 알아보자.

 

■ 조건식에서 false를 반환하는 경우

• 0
• ""또는 ''같은 빈 문자열
• null 값이 전혀 없을 때를 나타낸다.
• undefined 선언된 변수에 값이 없는 경우를 나타낸다.
• NaN, 또는 숫자가 아님

다음은 숫자가 있는 예입니다.

let numberOfApples = 0;
 
if (numberOfApples){
   console.log('Let us eat apples!');
} else {
   console.log('No apples left!');
}
 
// Prints 'No apples left!'

Instruction

1. wordCount가 참이 되게 변경한 후 콘솔을 실행한다.

2. favoritePhrase가 계속 거짓이게 값을 변경하고 콘솔을 실행한다.

let wordCount = 1;

if (wordCount) {
  console.log("Great! You've started your work!");
} else {
  console.log('Better get to work!');
}


let favoritePhrase = '';

if (favoritePhrase) {
  console.log("This string doesn't seem to be empty.");
} else {
  console.log('This string is definitely empty.');
}

 

---

7. 진실과 거짓 할당

let defaultName;
if (username) {
  defaultName = username;
} else {
  defaultName = 'Stranger';
}

Instruction

1. 라인 주석을 추가하기

let wordCount = 1;

if (wordCount) {
  console.log("Great! You've started your work!");
} else {
  console.log('Better get to work!');
}


let favoritePhrase = '';

if (favoritePhrase) {
  console.log("This string doesn't seem to be empty.");
} else {
  console.log('This string is definitely empty.');
}

 

8. 삼항연산자

약식 구문으로 if...else문을 단순화 시켜준다.밑 두 코드가 같은 의미를 가지고 있다.

 

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

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

Instruction

1. if...else 삼항 연산자를 사용해서 첫 번째 블록을 변경시킨다.

2. if...else 삼항 연산자를 사용해서 두 번째 블록을 변경시킨다.

3. if...else 삼항 연산자를 사용해서 세 번째 블록을 변경시킨다.

let isLocked = false;

isLocked ? console.log('You will need a key to open the door.') : console.log('You will not need a key to open the door.');

let isCorrect = true;

isCorrect ? console.log('Correct!') : console.log('Incorrect!');

let favoritePhrase = 'Love That!';

favoritePhrase === 'Love That!' ? console.log('I love that!') : console.log("I don't love that!");

 

9. Else if문

if...else와 else if문 에 더 많은 조건을 추가할 수 있다.

 

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!');
}

Instruction

1. winter 계절에 따라서 환경이 어떻게 변화하는지를 else...if를 사용해서 표현한다.

2. fall 계절에 따라서 환경이 어떻게 변화하는지를 else...if를 사용해서 표현한다.

3. summer 계절에 따라서 환경이 어떻게 변화하는지를 else...if를 사용해서 표현한다.

let season = 'summer';

if (season === 'spring') {
  console.log('It\'s spring! The trees are budding!');
}
else if(season==='winter'){
  console.log('It\'s winter! Everything is covered in snow.');
} 
else if(season==='fall'){
  console.log('It\'s fall! Leaves are falling!');
} 
else if(season==='summer'){
  console.log('It\'s sunny and warm because it\'s summer!');
} 
else {
  console.log('Invalid season.');
}

10. Switch 키워드

각각의 case에 따라서 값이나 표현식을 보여준다.

 

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;
}
 
// Prints 'Papayas are $1.29'

Instruction

1. switch문 작성을 시작한다.

2. switch문 안에 3개의 case를 추가하고 각각의 case에 표현식을 적는다. (break을 적는 것을 잊지 말기!)

3. default문을 추가한다.

let athleteFinalPosition = 'first place';

switch (athleteFinalPosition) {
  case 'first place':
    console.log('You get the gold medal!');
    break;
  case 'second place':
    console.log('You get the silver medal!');
    break;
  case 'third place':
    console.log('You get the bronze medal!');
    break;
    default:
    console.log('No medal awarded.');
    break;
}

---

Corner React Starter #2

Editor 성민