8일차[조건문 / 실습 예제]

진하의 메모장·2025년 1월 13일

복습 자바스크립트 조건문

공부일기

목록 보기

9/66

2025 / 01 / 13

오늘 수업에서는 조건문에 대해 배웠습니다.
조건문의 특징에 대해 배우고 실습예제를 풀어보는 시간을 가졌습니다.

💌조건문

조건문은 특정 조건에 따라 코드를 실행하거나 건너뛰도록 제어하는 데 사용됩니다.

1. if 문

주어진 조건이 참(true)인 경우에만 실행됩니다.

① 문법

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

② 예제

const age = 21;

if (age >= 20) {
  console.log("성인입니다.");
}

2. if-else 문

조건이 참(true)일 때와 거짓(false)일 때 각각 다른 코드를 실행합니다.

① 문법

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

② 예제

const age = 16;

if (age >= 20) {
  console.log("성인입니다.");
} else {
  console.log("미성년자입니다.");
}

3. if-else, else 문

여러 조건을 평가하고, 조건이 처음으로 참(true)인 경우만 실행됩니다.

① 문법

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

② 예제

const score = 85;

if (score >= 90) {
  console.log("A 등급입니다.");
} else if (score >= 80) {
  console.log("B 등급입니다.");
} else {
  console.log("C 등급입니다.");
}

4. 삼항 연산자

간단한 조건문은 삼항 연산자를 사용해 줄일 수 있습니다.

① 문법

조건 ? 참일 때 실행할 코드 : 거짓일 때 실행할 코드;

② 예제

const age = 20;
const message = age >= 18 ? "성인입니다." : "미성년자입니다.";
console.log(message);

5. switch 문

값에 따라 여러 경우(case) 중 하나를 실행합니다.
특정 값과 일치하는 경우를 실행하며, 기본값(default)도 설정할 수 있습니다.

① 문법

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

② 예제

const day = 3;

switch (day) {
  case 1:
    console.log("월요일");
    break;
  case 2:
    console.log("화요일");
    break;
  case 3:
    console.log("수요일");
    break;
  default:
    console.log("알 수 없는 요일");
}

💌 참고

조건문 작성 시 === (일치 연산자)를 사용하는 것이 == (동등 연산자)보다 더 엄격한 비교를 제공하므로 권장됩니다.

조건문은 가독성과 유지보수를 위해 간단하게 작성하는 것이 좋습니다. 복잡한 논리는 함수로 분리하는 것이 효율적입니다.

💌 실습 예제

피자 주문 프로그램

사용자에게 피자 사이즈(S, M, L)를 작성받습니다.

가격은 S - $15 / M - $20 / L - $25

옵션 - 페퍼로니 추가 / 치즈 크러스트 추가

페퍼로니 추가 - S에 페페로니 토핑 추가시 $2, M 또는 L은 $3

치즈 크러스트 추가 - $1

결제방식을 선택하여(현금,카드) 카드결제시 2% 수수료를 추가하여 출력한다.

주문 내역과 가격을 출력한다.

1. 사이즈 입력 받기

사용자에게 피자 사이즈(S, M, L)를 작성받습니다.

사용자의 입력을 받아서 유효한 옵션인지 확인하고 반환하는 함수를 만들어 예외처리

// 사용자의 입력을 받아서 유효한 옵션인지 확인하고 반환하는 함수
function getInput(promptMessage, Options) {
	let input;
	while (true) {
		input = prompt(promptMessage); // 사용자가 입력한 값을 가져옴
		input = input ? input.toUpperCase() : " "; // 입력값을 대문자로 변환 (옵션과 비교하기 위해) / 빈 값은 공백 처리
		if (Options.includes(input)) { // 입력값이 허용된 옵션 안에 있는지 확인
			return input; // 유효한 값이면 반환
		} else {
			alert("잘못된 입력입니다. 다시 시도해주세요."); // 잘못된 입력시 경고창 띄움
		}
	}
}

// 사용자 입력을 통해 피자 주문 정보 수집
let size = getInput("피자 사이즈를 입력해 주세요 S, M, L", ["S", "M", "L"]); // 피자 사이즈 입력
let pepperoni = getInput("페퍼로니 토핑을 추가하시겠습니까? Y or N", ["Y", "N"]); // 페퍼로니 추가 여부
let cheese = getInput("치즈크러스트를 추가하시겠습니까? Y or N", ["Y", "N"]); // 치즈크러스트 추가 여부
let cash = getInput("결제 방식을 입력해주세요 카드 or 현금", ["카드", "현금"]); // 결제 방식 선택

2. 금액 계산

가격은 S - $15 / M - $20 / L - $25
옵션 - 페퍼로니 추가 / 치즈 크러스트 추가
페퍼로니 추가 - S에 페페로니 토핑 추가시 $2, M 또는 L은 $3
치즈 크러스트 추가 - $1

let price = 0; // 기본 가격 초기화
let result = 0; // 최종 가격 초기화

// 선택한 사이즈에 따라 기본 가격 설정 및 옵션에 따른 추가 요금 계산
if (size === "S") { // Small 사이즈 선택
	price += 15; // 기본 금액 15원
	if (pepperoni === "Y" && cheese === "Y") {
		price += 3; // 페퍼로니 + 치즈크러스트 추가
	} else if (pepperoni === "N" && cheese === "Y") {
		price += 1; // 치즈크러스트만 추가
	} else if (pepperoni === "Y" && cheese === "N") {
		price += 2; // 페퍼로니만 추가
	}
} else if (size === "M") { // Medium 사이즈 선택
	price += 20; // 기본 금액 20원
	if (pepperoni === "Y" && cheese === "Y") {
		price += 4; // 페퍼로니 + 치즈크러스트 추가
	} else if (pepperoni === "N" && cheese === "Y") {
		price += 1; // 치즈크러스트만 추가
	} else if (pepperoni === "Y" && cheese === "N") {
		price += 3; // 페퍼로니만 추가
	}
} else if (size === "L") { // Large 사이즈 선택
	price += 25; // 기본 금액 25원
	if (pepperoni === "Y" && cheese === "Y") {
		price += 4; // 페퍼로니 + 치즈크러스트 추가
	} else if (pepperoni === "N" && cheese === "Y") {
		price += 1; // 치즈크러스트만 추가
	} else if (pepperoni === "Y" && cheese === "N") {
		price += 3; // 페퍼로니만 추가
	}
}

3. 결제 수수료 추가

결제방식을 선택하여(현금,카드) 카드결제시 2% 수수료를 추가하여 출력한다.

주문 내역과 가격을 출력한다.

if (cash === "카드") { // 카드 결제 선택
	result = price + price * 0.02; // 카드 수수료 2% 추가
	document.write(`전체 가격 : 기본금액 (${price}원)과 수수료 2% (${price * 0.02}원) 해서 (${result}원)입니다. <br><br>`); // 최종 금액 출력
	document.write(`선택하신 피자 사이즈는 ${size}입니다. <br>`); // 선택한 사이즈 출력
	document.write(`추가 옵션은 페퍼로니 추가(${pepperoni})와 치즈크러스트 추가(${cheese})입니다. <br>`); // 선택한 옵션 출력
	document.write(`총 구매 가격은 (${result}원)입니다. <br>`); // 최종 구매 가격 출력
} else if (cash === "현금") { // 현금 결제 선택
	document.write(`선택하신 피자 사이즈는 ${size}입니다. <br>`); // 선택한 사이즈 출력
	document.write(`추가 옵션은 페퍼로니 추가(${pepperoni})와 치즈크러스트 추가(${cheese})입니다. <br>`); // 선택한 옵션 출력
	document.write(`총 구매 가격은 (${price}원)입니다. <br>`); // 총 구매 가격 출력
}

💌 전체 코드

위에 작성한 코드를 모두 합쳐놓은 것입니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 사용자의 입력을 받아서 유효한 옵션인지 확인하고 반환하는 함수
      function getInput(promptMessage, Options) {
        let input;
        while (true) {
          input = prompt(promptMessage); // 사용자가 입력한 값을 가져옴
          input = input ? input.toUpperCase() : " "; // 입력값을 대문자로 변환 (옵션과 비교하기 위해) / 빈 값은 공백 처리
          if (Options.includes(input)) { // 입력값이 허용된 옵션 안에 있는지 확인
            return input; // 유효한 값이면 반환
          } else {
            alert("잘못된 입력입니다. 다시 시도해주세요."); // 잘못된 입력이면 경고창 띄움
          }
        }
      }

      // 사용자 입력을 통해 피자 주문 정보 수집
      let size = getInput("피자 사이즈를 입력해 주세요 S, M, L", ["S", "M", "L"]); // 피자 사이즈 입력
      let pepperoni = getInput("페퍼로니 토핑을 추가하시겠습니까? Y or N", ["Y", "N"]); // 페퍼로니 추가 여부
      let cheese = getInput("치즈크러스트를 추가하시겠습니까? Y or N", ["Y", "N"]); // 치즈크러스트 추가 여부
      let cash = getInput("결제 방식을 입력해주세요 카드 or 현금", ["카드", "현금"]); // 결제 방식 선택

      let price = 0; // 기본 가격 초기화
      let result = 0; // 최종 가격 초기화

      // 선택한 사이즈에 따라 기본 가격 설정 및 옵션에 따른 추가 요금 계산
      if (size === "S") { // Small 사이즈 선택
        price += 15; // 기본 금액 15원
        if (pepperoni === "Y" && cheese === "Y") {
          price += 3; // 페퍼로니 + 치즈크러스트 추가
        } else if (pepperoni === "N" && cheese === "Y") {
          price += 1; // 치즈크러스트만 추가
        } else if (pepperoni === "Y" && cheese === "N") {
          price += 2; // 페퍼로니만 추가
        }
      } else if (size === "M") { // Medium 사이즈 선택
        price += 20; // 기본 금액 20원
        if (pepperoni === "Y" && cheese === "Y") {
          price += 4; // 페퍼로니 + 치즈크러스트 추가
        } else if (pepperoni === "N" && cheese === "Y") {
          price += 1; // 치즈크러스트만 추가
        } else if (pepperoni === "Y" && cheese === "N") {
          price += 3; // 페퍼로니만 추가
        }
      } else if (size === "L") { // Large 사이즈 선택
        price += 25; // 기본 금액 25원
        if (pepperoni === "Y" && cheese === "Y") {
          price += 4; // 페퍼로니 + 치즈크러스트 추가
        } else if (pepperoni === "N" && cheese === "Y") {
          price += 1; // 치즈크러스트만 추가
        } else if (pepperoni === "Y" && cheese === "N") {
          price += 3; // 페퍼로니만 추가
        }
      }

      // 결제 방식에 따른 최종 금액 계산 및 출력
      if (cash === "카드") { // 카드 결제 선택
        result = price + price * 0.02; // 카드 수수료 2% 추가
        document.write(`전체 가격 : 기본금액 (${price}원)과 수수료 2% (${price * 0.02}원) 해서 (${result}원)입니다. <br><br>`); // 최종 금액 출력
        document.write(`선택하신 피자 사이즈는 ${size}입니다. <br>`); // 선택한 사이즈 출력
        document.write(`추가 옵션은 페퍼로니 추가(${pepperoni})와 치즈크러스트 추가(${cheese})입니다. <br>`); // 선택한 옵션 출력
        document.write(`총 구매 가격은 (${result}원)입니다. <br>`); // 최종 구매 가격 출력
      } else if (cash === "현금") { // 현금 결제 선택
        document.write(`선택하신 피자 사이즈는 ${size}입니다. <br>`); // 선택한 사이즈 출력
        document.write(`추가 옵션은 페퍼로니 추가(${pepperoni})와 치즈크러스트 추가(${cheese})입니다. <br>`); // 선택한 옵션 출력
        document.write(`총 구매 가격은 (${price}원)입니다. <br>`); // 총 구매 가격 출력
      }

      console.log(price); // 기본 금액 콘솔에 출력 (디버깅 용도)
    </script>
  </body>
</html>

💌 결과 확인

8일차 후기

조건문을 사용해서 문제를 풀어나가는건 괜찮았는데 항상 예외처리가 어려운 것 같다.

오늘 선생님께서 다른 사람의 코드도 시간나면 한 번씩 보라고 하셨다.

기상천외한 코드도 있다고 말씀하시면서 나를 빤히 보셨는데 나의 착각이겠죠?

다른 사람이 사용한 Options.includes(input)를 사용해보았는데 진짜 천재인 것 같다.

계속 문제 풀어보고 자주 사용하면 나도 언젠가 자바스크립트에 익숙해질 수 있겠지? ε=(｡ﾉ･ω･)ﾉ