9. 자바스크립트의 조건문

1. if문

• 조건문은 조건에 해당하는 경우 하위 로직을 실행한다.
• 조건의 참, 거짓에 따라 다르게 코드를 실행하는 기본적인 조건문
• 조건은 ‘ ( ) ’안에 작성하며, 조건이 참일 때만 실행할 코드를 ‘ { } ’안에 작성한다.

if (조건식) {
  // 조건식이 참일 때 실행될 코드
}

• 조건이 참인 경우, if 절 블록 내의 코드가 실행된다.

const score = 80;

if (score >= 70) {
  console.log('합격하셨군요! 축하합니다!');
}

// 결과
합격하셨군요! 축하합니다!

• 조건이 거짓인 경우, if 절 블록 내의 코드가 실행되지 않는다.

const score = 50; 

if (score >= 70) {
  console.log('합격하셨군요! 축하합니다!');
}

// 결과 없음 

+논리 연산자로 if문 조건 설정하기 (복습하기)
if 문의 조건에서 논리 연산자 &&와 ||를 사용해 여러 조건을 결합할 수 있다.

const score = 85;
const absence = 0;

if (score >= 80 && absence <= 4) {
  console.log('우수 학생');
}

// 결과
우수 학생

const score = 15;
const absence = 8;

if (score < 20 || absence >= 5) {
  console.log('재수강 필요');
}

// 결과
재수강 필요

2. if...else문

• if...else 문은 조건이 참일 때와 거짓일 때 각각 다른 코드를 실행하도록 하는 구문.

if (조건) {
  // 조건이 참일 때 실행될 코드
} else {
  // 조건이 거짓일 때 실행될 코드
}

• 조건이 참일 때 if 절의 코드가 실행된다.

const score = 70; 

if (score >= 70) {
  console.log('합격하셨군요. 축하합니다!');
} else {
  console.log('불합격하셨군요. 아쉽습니다!');
}

// 결과
합격하셨군요. 축하합니다!

• 조건이 거짓일 때, else 절의 코드가 실행된다.

const score = 50; 

if (score >= 70) {
  console.log('합격하셨군요. 축하합니다!');
} else {
  console.log('불합격하셨군요. 아쉽습니다!');
}

// 결과
불합격하셨군요. 아쉽습니다!

let isLoggedIn = true;
let hasPermission = false;

if (isLoggedIn && hasPermission) {
  console.log("Access granted.");
} else {
  console.log("Access denied.");
}

한번 더 정리
if...else 문에서 if 절은 반드시 필요하지만, else 절은 생략이 가능하다.
if 절 없이 else 절만 작성하면 에러가 발생한다.
if 절과 else 절만 작성할 경우, 둘 중 하나는 반드시 실행된다.
if 절과 else 절이 모두 실행될 수는 없다.

else {
  console.log('else 절이 실행됐습니다.');
}

// 결과
SyntaxError: Unexpected token 'else'

3. else if절

• else if 절은 if와 else 사이에 여러 조건을 추가하는 데 사용된다.
• else if 절은 여러 개 작성할 수 있다.

if (조건1) {
  // 조건1이 참일 때 실행될 코드
} else if (조건2) {
  // 조건1이 거짓이고, 조건2가 참일 때 실행될 코드
} else if (조건3) {
  // 조건1, 조건2가 거짓이고, 조건3이 참일 때 실행될 코드
} else if (조건4) {
  // 조건1, 조건2, 조건3이 거짓이고, 조건4가 참일 때 실행될 코드
} else {
  // 모든 조건이 거짓일 때 실행될 코드
}

• 첫 번째 조건이 거짓일 경우, else if로 추가한 조건들을 순차적으로 평가한다.
• 조건이 참인 else if 절을 만나면, 해당 절의 코드를 실행하고 if...else 문을 종료한다.
• 모든 조건이 거짓일 경우 마지막 else 절이 실행된다.

const score = 10;

if (score >= 70) {
  console.log('학생은 합격입니다!');
} else if (score >= 50) {
  console.log('학생은 재시험을 보세요.');
} else {
  console.log('학생... 힘내요.');
}

// 결과
학생... 힘내요.

let age = 18;

if (age >= 20) {
  console.log("You are an adult.");
} else if (age >= 13) {
  console.log("You are a teenager.");
} else {
  console.log("You are a child.");
}

4. 중첩 if문

• if...else 문 내에 다른 if...else 문을 포함시킬 수 있다.
• 중첩 if 문을 통해 세부적인 분기를 만들어, 보다 복잡한 조건을 처리할 수 있다.

const score = 85;

if (score >= 70) {
  if (score >= 90) {
    console.log('A학점입니다.');
  } else if (score >= 80) {
    console.log('B학점입니다.');
  } else {
    console.log('C학점입니다.');
  }
}

// 결과
B학점입니다.

5. switch문

switch문에 대해

• if문은 논리형 조건식을 걸었고 true/false 각각 실행할 내용을 작성했는데
  switch는 기준을 설정하고 case를 지정.
• 특정 변수(표현식)와 일치하는 값에 해당하는 코드를 실행하는 조건문.
• 하나의 변수를 여러 고정된 값과 비교하는 경우 if 문보다 switch 문이 적합하다.
• if...else 문을 사용해 여러 개의 분기를 만들면 코드가 복잡해질 수 있다.
• 조건이 논리형 표현식이 아닌 단순한 값일 때 switch 문으로 작성하면 더 간결하다.

switch (표현식) {
  case 값1:
    // 표현식이 값1과 일치할 때 실행될 코드
    break;
    
  case 값2:
    // 표현식이 값2와 일치할 때 실행될 코드
    break;
    
  case 값3:
    // 표현식이 값3과 일치할 때 실행될 코드
    break;
    
  default:
    // 어떤 case도 일치하지 않을 때 실행될 코드
}

if/else if
중괄호{}많아지고 코드가 복잡해진다.

switch/case
여러 상황에서 변수를 비교, 코드가 간결해진다.

if문은 논리형 조건식을 걸었다. (true/false)
각각 실행할 내용을 따로 작성했음
switch문은 명확한 값을 기준을 설정하고 기준에 맞는case를 지정해서 실행한다.

prompt함수는
1 alert과 같은 경고창 형식으로
2 사용자가 입력할 입력 블록을 지정
3 입력한 값을 변수에 넣어준다.

switch(season) {}
여기서 season은 기준으로 정할 변수의 값이나 수식
{}는 case활용: season의 값을 예상하고 실제 시즌의 값이 일치할 경우 코드를 작성

switch문의 사용법

• switch 문의 괄호 안에 비교할 표현식(변수)을 작성한다.
• case 키워드 옆에는 표현식과 일치 여부를 비교할 값을 작성한다.
• case 키워드 다음 문장에는 표현식이 case의 값과 일치할 때 실행할 코드를 작성한다.
• default는 어떤 case에도 해당되지 않을 경우에 실행된다.
• 각 case의 끝에 break를 작성해 해당 case만 실행하고 switch 문을 종료한다.
• break를 작성하지 않으면 일치하는 case를 실행한 후, 다음 case도 이어서 실행한다.

const season = 'summer';

switch (season) {
  case 'spring':
    console.log('봄에는 쑥을 드세요.');
  
  case 'summer':
    console.log('여름에는 수박을 드세요.');
  
  case 'autumn':
    console.log('가을에는 사과를 드세요.');
 
  case 'winter':
    console.log('겨울에는 딸기를 드세요.');
 
  default:
    console.log('계절을 입력해 주세요.');
}

// 결과
여름에는 수박을 드세요.
가을에는 사과를 드세요.
겨울에는 딸기를 드세요.
계절을 입력해 주세요.

• season의 값이 'summer'이므로, '여름에는 수박을 드세요.'가 출력된다.
• 코드에 break가 없기 때문에, summer 이후의 case도 모두 순차적으로 실행된다.
• break를 사용하면 각 계절에 맞는 메시지만 출력하고 switch 문을 종료할 수 있다.

const season = 'summer';

switch (season) {
  case 'spring':
    console.log('봄에는 쑥을 드세요.');
    break;

  case 'summer':
    console.log('여름에는 수박을 드세요.');
    break;

  case 'autumn':
    console.log('가을에는 사과를 드세요.');
    break;

  case 'winter':
    console.log('겨울에는 딸기를 드세요.');
    break;

  default:
    console.log('계절을 입력해 주세요.');
}

// 결과
여름에는 수박을 드세요.

• season의 값이 'summer'이므로, '여름에는 수박을 드세요.'가 출력된다.
• 문장 출력 후 break를 만나 switch 문 전체가 종료된다.

let color = "red";

switch (color) {
  case "red":
    console.log("The color is red.");
    break;
  case "blue":
    console.log("The color is blue.");
    break;
  default:
    console.log("Unknown color.");
}

➕ 여러 case에서 같은 코드를 실행해야 할 경우

• 같은 코드를 실행하는 조건을 그룹화해서 중복 코드를 줄일 수 있다.
  같은 그룹의 case를 연속으로 나열하고, case의 본문을 생략한다.
  그룹의 마지막 case 내에 공통으로 실행할 코드를 작성한다.
  각 그룹의 마지막에 break를 작성해 switch 문을 종료한다.

const grade = 'B';

switch (grade) {
  case 'A+':
  case 'A':
  case 'A-':
    console.log('훌륭합니다!');
    break;

  case 'B+':
  case 'B':
  case 'B-':
    console.log('잘했습니다!');
    break;

  default:
    console.log('노력이 필요합니다.');
}

// 결과
잘했습니다!