javascript 2일차 조건문 if / else / switch

2025. 12. 18. 21:46ㆍ대우개발원 수업 내용/Javascript

반응형

 

내용 정리

더보기

9.4 조건문 다루기

자바스크립트에서 조건문은 특정 조건에 따라 서로 다른 코드를 실행하기 위해 사용됩니다.
대표적인 조건문에는 if, else if, else, 그리고 switch 문이 있습니다.

1. if, else, else if 문

if 문

if 문은 조건식이 참(true) 으로 평가될 경우, 중괄호 {} 안의 코드를 실행하는 조건문입니다.

형식

if (조건식) {
  // 조건식이 참이면 실행
}
  • 조건식은 true 또는 false로 평가되는 식
  • 조건식이 참이면 블록문 실행, 거짓이면 실행하지 않음

블록문 (block statement)

  • 한 개 이상의 자바스크립트 코드를 중괄호 {}로 묶은 것
  • 블록 또는 코드 블록이라고 부름
  • 조건문, 반복문 등에서 함께 사용됨

else 문

else 문은 if 문의 조건식이 거짓(false) 일 때 실행되는 블록문입니다.

형식

if (조건식) {
  // 조건식이 참이면 블록문 실행
} else {
  // 조건식이 거짓이면 블록문 실행
}

else if 문

else if 문은 if 문에 추가 조건을 설정하고 싶을 때 사용합니다.

형식

if (조건식1) {
  // 조건식1이 참이면 블록문 실행
} else if (조건식2) {
  // 조건식2가 참이면 블록문 실행
} else {
  // 모든 조건식이 거짓이면 블록문 실행
}

분기 처리

  • 어떤 조건을 만족할 때 어떤 블록문을 실행할지 결정하는 것
  • if 문은 분기 처리의 흐름에 따라 중첩해서 사용할 수 있음

Quiz : IfElse.html

점수(score)에 따라 학점을 부여하는 조건문 예제

조건grade 값

score ≥ 90 "A"
80 이상 90 미만 "B"
70 이상 80 미만 "C"
60 이상 70 미만 "D"
60 미만 "F"

2. switch 문

switch 문은 switch 뒤의 값과 일치하는 case가 있을 때 해당 코드를 실행하는 조건문입니다.

기본 형식

switch (key) {
  case value1:
    // key가 value1일 때 실행할 블록문
    break;
  case value2:
    // key가 value2일 때 실행할 블록문
    break;
  default:
    // 아무것도 일치하지 않을 때 실행할 블록문
    break;
}

switch 문에서 break 문의 역할

  • break 문을 만나면 switch 문을 종료
  • break가 없으면 다음 case로 계속 실행됨

 

switch 문 예제 1 (break 생략)

let day = "월";

switch(day) {
  case "월":
  case "화":
  case "수":
  case "목":
  case "금":
    document.write("정상영업");
    break;
  case "토":
  case "일":
    document.write("휴일");
    break;
}

설명

  • 여러 case에 대해 같은 코드 실행
  • 의도적으로 break를 생략한 경우

실행 결과 예시

정상영업
  • (b) 여러 case에 대해 동일한 코드를 실행하도록 의도적으로 break를 생략한 경우

 

3. if 문과 조건식

  • if 문은 조건에 식(expression) 을 사용
  • 조건식에는 다음 연산자를 사용할 수 있음
    • 비교 연산자 (==, !=, <, >, <=, >=)
    • 논리 연산자 (&&, ||, !)

4. if 문 vs switch 문

구분특징

if 문 조건에 식(statement)을 사용, 범위 비교에 적합
switch 문 조건에 값(value)을 사용, 단일 값 비교에 적합

 

 

※ 해당 예제는 로컬 환경(localhost)에서 실행한 결과입니다. 실행 코드는 아래를 참고해주세요.

 

 

if.js

더보기 
let num = 0;
if(num % 2 === 0){
  console.log("변수 num에 할당된 숫자는 짝수입니다.");
} else {
  console.log("변수 num에 할당된 숫자는 홀수입니다.");
}

if (num > 0) {
  console.log("양수");
} else if (num < 0) {
  console.log("음수");
}else {
  console.log("0");
}

let score = 90;
if(score >= 90 && score < 100){
    console.log("A++ 학점");
}
if(score >= 90 || score <= 100){
    console.log("A++ 학점")
}

실행결과

변수 num에 할당된 숫자는 짝수입니다.
0
A++ 학점
A++ 학점

 

ifelse.js

더보기 
var age=30;
undefined
if(age>=60){
  console.log('노약자 무료')
}else if(age>=20){
  console.log('성인 요금');
}else if(age>=13){
  console.log('청소년 요금');
}else if(age>=8){
  console.log('어린이 요금');
}else{
  console.log('유아 무료');
}

 

실행결과

성인 요금

 

 

ifelse.html

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>if-else</title>
</head>
<body>
  <h3>if-else를 이용한 학점 매기기</h3>
  <hr>
  <script>
    let grade;
    let score = prompt('점수를 입력하세요', 100)
    if (score >= 90){
      grade = "A";
    } else if (score >= 80){
      grade = "B";
    } else if (score >= 70){
      grade = "C";
    } else if (score >= 60){
      grade = "D";
    } else {
      grade = "F";
    }
    document.write(score + "는 " + grade + "입니다.");
  </script>
</body>
</html>

 

 

switch.js

더보기 
let food = "melon";
switch (food) {
  case "melon":
    console.log("fruit");
    break;
  case "apple":
    console.log("fruit");
    break;
  case "banana":
    console.log("fruit");
    break;
  case "carrot":
    console.log("vegetables");
    break;
  default:
    console.log("It's not fruit and vegetables.")
    break;
}
////////////////////////////////////////////////////////////////////////////////
// 아래 더 간단하게 작성
  switch (food) {
    case "melon":
    case "apple":
    case "banana":
      console.log("fruit");
      break;
    case "carrot":
      console.log("vegetable");
      break;
    default:
      console.log("It's not fruit and vegetables.")
      break;
  }

////////////////////////////////////////////////////////////////////////////////
let score = 90;
switch (score){
  case 90:  case 91:  case 92:  case 93:  case 94:
  case 95:  case 96:  case 97:  case 98:  case 99:
    console.log("A++ 학점")
    break;
  default:
    break;
}
////////////////////////////////////////////////////////////////////////////////

let city = "Seoul";
switch (city) {
  case "Seoul":
    console.log("서울");
    break;
  case "NewYork":
    console.log("뉴욕");
    break;
  case "Paris":
    console.log("파리");
    break;
}//값이 3개 밖에 없다면 default문은 생략이 가능

let city1 = "Seoul";
switch (city1) {
  case "Seoul":
    console.log("서울");
    //break;
  case "NewYork":
    console.log("뉴욕");
    break;
  case "Paris":
    console.log("파리");
    break;
}

 

실행결과

 
fruit
fruit
A++ 학점
서울
서울
뉴욕

 

 

 

Switch_coffee.html

더보기

http://localhost:52330/js2/Switch_coffee.html

<!DOCTYPE html>
<html>

<head>
  <title>switch</title>
</head>

<body>
  <h3>switch 문으로 커피 주문</h3>
  <hr>
  <script>
    let price
      = 0;
    let coffee
      = prompt("무슨 커피 드릴까요?", "");
    switch (coffee) {
      case "espresso":
      case "에스프레소": price = 2000;
        break;
      case "카푸치노" : price  = 3000;
        break;
      case "카페라떼" : price  = 3500;
        break;
      default:
        //document.write(coffee + "는 없습니다.");
        alert(coffee + "는 없습니다.");
}
    if (price != 0)
      document.write(coffee + "는" + price + "원입니다.");
  </script>
</body>

</html>

설명

  • "espresso" 또는 "에스프레소" 입력 시 동일한 가격 적용
  • 여러 case를 하나의 결과로 묶는 전형적인 switch 활용 예

 

연습문제 4 ex4.html

더보기

http://localhost:52330/js2/ex4.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>연습문제4</title>
</head>
<body>
  <script>
    const date = new Date()
    //const hour = date.getHours() //현재시간
    let hour = 9; // 시간을 임의로 정해서 확인
    console.log(hour); //콘솔창에서 제대로 나오는지 검증할 때

    //if else문으로 쓸 때
    if (hour < 11){
      alert('아침 먹을 시간입니다.');
    } else if (hour <= 14) {
      alert('점심 먹을 시간입니다.');
    } else {
     alert('저녁 먹을 시간입니다.');
    }
    
    // // switch case문으로 쓸 때
     //     switch (true) {
    //   case hour < 11:
    //     alert("아침 먹을 시간");
    //     break;
    //   case hour < 14:
    //     alert("점심 먹을 시간");
    //     break;
    //   default:
    //     alert("저녁 먹을 시간");
    //     break;
    // }
  </script>
</body>
</html>

형 변환 후 확인

ifelse.html 다시

더보기

http://localhost:52330/js2/IfElse.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>if-else</title>
</head>
<body>
  <h3>if-else를 이용한 학점 매기기</h3>
  <hr>
  <script>
    let grade;
    let score = prompt('점수를 입력하세요', 100)
    console.log(typeof(score));
    score = parseInt(score); // 문자열을 숫자로 바꿈
    console.log(typeof(score));
    if (score >= 90){
      grade = "A";
    } else if (score >= 80){
      grade = "B";
    } else if (score >= 70){
      grade = "C";
    } else if (score >= 60){
      grade = "D";
    } else {
      grade = "F";
    }
    document.write(score + "는 " + grade + "입니다.");
  </script>
</body>
</html>

연습문제 5
• 숫자 2개를 입력 받아 첫 번째 입력 받은 숫자가 큰지, 두 번째 입력
받은 숫자가 큰지, 또는 같은지를 구하는 프로그램을 작성하세요.

ex5.html

더보기

http://localhost:52330/js2/ex5.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>연습문제 5</title>
</head>

<body>
  <script>
    // let num1 = prompt('첫 번째 숫자');
    // num1 = parseInt(num1); // 문자열을 숫자로 바꿈
    // let num2 = prompt('두 번째 숫자')
    // num2 = parseInt(num2);

    const num1 = Number(prompt('첫 번째 숫자','')) // 문자열을 숫자로 변환하는 함수
    const num2 = Number(prompt('두 번째 숫자','')) // 명시적 형 변환
    
    // if문 사용
    if (num1 > num2) {
      alert("첫 번째 입력한 숫자 가 더 큽니다.");
    } else if (num1 < num2) {
      alert("두 번째 입력한 숫자 가 더 큽니다.");
    } else {
      alert("두 숫자가 같습니다.");
    }

    // // 삼항 연산자 사용
    // let result =
    //   num1 > num2 ? "첫 번째 입력한 숫자가 더 큽니다."
    //     : num1 < num2 ? "두 번째 입력한 숫자가 더 큽니다."
    //       : "두 숫자가 같습니다.";

    // alert(result);

  </script>
</body>

</html>

연습문제 6 

ex6.html

더보기

http://localhost:52330/js2/ex6.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>연습문제 6</title>
</head>

<body>
  <script>
    const month = parseInt(prompt('월을 입력해주세요', ''));

    // if문 사용
    // if (month >= 3 && month <= 5) {
    //   alert("봄입니다.");
    // } else if (month >= 6 && month <= 8) {
    //   alert("여름입니다.");
    // } else if (month >= 9 && month <= 11) {
    //   alert("가을입니다.");
    // } else {
    //   alert("겨울입니다.");
    // }

    //switch case문 사용
    switch (month) {
      case 3: case 4: case 5:
        alert("봄입니다.");
        break;
      case 6: case 7: case 8:
        alert("여름입니다.");
        break;
      case 9: case 10: case 11:
        alert("가을입니다.");
        break;
      default:
        alert("겨울입니다.");
        break;
    }
  </script>
</body>

</html>

 

'대우개발원 수업 내용 > Javascript' 카테고리의 다른 글

Javascript 6일차 함수 return문 / 스코프 / 호이스팅  (1) 2025.12.24
Javascript 5일차 함수(function)  (0) 2025.12.23
Javascript 4일차 array / for in / break / continue  (0) 2025.12.22
Javascript 3일차 조건문 연습 / 반복문  (1) 2025.12.19
Javascript 1일차 코드 작성 및 실행 방법 / 변수 / 상수  (1) 2025.12.17

관련글

티스토리툴바