[JS] 조건문

조건문이란? 🤔

조건문은 간단히 말해서 "만약 ~라면, ~하고, 아니면 ~해"라는 일상적인 의사결정을 코드로 표현한 것입니다.

실생활 비유: 우산 챙기기 ☔

예를 들어, 아침에 나갈 때 이런 생각을 해봅시다:

• 만약 비가 오면, 우산을 챙긴다.
• 그렇지 않고, 만약 흐리면, 접이식 우산을 챙긴다.
• 둘 다 아니면, 우산을 챙기지 않는다.

자바스크립트의 조건문 기본 형태 📝

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

실생활 예시를 코드로 표현하기 💻

우산 챙기기 예시를 코드로 바꿔봅시다:

var 날씨 = "비";  // 변수에 현재 날씨 저장

if (날씨 === "비") {
    alert("우산을 챙긴다");
} else if (날씨 === "흐림") {
    alert("접이식 우산을 챙긴다");
} else {
    alert("우산을 챙기지 않는다");
}

비교 연산자: 조건을 만드는 도구 🔍

조건문에서는 다양한 비교를 할 수 있어요:

연산자	의미	예시
===	같다	나이 === 20 (나이가 20과 같다)
!==	같지 않다	이름 !== "철수" (이름이 철수가 아니다)
>	크다	점수 > 80 (점수가 80보다 크다)
<	작다	온도 < 0 (온도가 0보다 작다)
>=	크거나 같다	나이 >= 18 (나이가 18 이상이다)
<=	작거나 같다	금액 <= 1000 (금액이 1000 이하이다)

더 쉬운 예시: 놀이공원 입장 💌

키가 140cm 이상이면 모든 놀이기구를, 키가 120cm 이상 140cm 미만이면 일부 놀이기구를, 120cm 미만이면 키즈존만 이용할 수 있다고 해볼게요:

var 키 = 130;  // 센티미터 단위

if (키 >= 140) {
    alert("모든 놀이기구 이용 가능");
} else if (키 >= 120) {  // 이미 140 미만임이 확인되었으므로 다시 쓰지 않아도 됩니다
    alert("일부 놀이기구 이용 가능");
} else {  // 120 미만인 경우
    alert("키즈존만 이용 가능");
}

논리 연산자: 여러 조건 합치기 🔗

여러 조건을 동시에 확인하고 싶을 때 사용합니다:

연산자	의미	예시
&&	그리고(AND)	나이 >= 20 && 키 >= 160 (나이가 20 이상이고 키가 160 이상)
`		`
!	아님(NOT)	!(날씨 === "비") (날씨가 비가 아닌 경우)

예시: 놀이공원 할인 조건 🎪

놀이공원 할인 조건을 다양하게 설정해봅시다:

• 만약 어린이(12세 미만)이거나 노인(65세 이상)이면 50% 할인
• 만약 학생(13~24세)이면서 평일이면 30% 할인
• 만약 단체(10명 이상)면 20% 할인
• 그 외의 경우 정상가

var 나이 = 15;
var 평일여부 = true;
var 인원수 = 2;

if (나이 < 12 || 나이 >= 65) {
    alert("50% 할인 적용");
} else if (나이 >= 13 && 나이 <= 24 && 평일여부) {
    alert("30% 할인 적용");
} else if (인원수 >= 10) {
    alert("20% 할인 적용");
} else {
    alert("정상가 적용");
}

중첩 조건문: 조건 안의 조건 📦

조건문 안에 또 다른 조건문을 넣을 수도 있어요:

var 요일 = "토요일";
var 시간 = 14;  // 24시간 형식

if (요일 === "토요일" || 요일 === "일요일") {
    // 주말인 경우
    if (시간 >= 10 && 시간 <= 18) {
        alert("주말 오픈 시간입니다");
    } else {
        alert("주말 영업 시간이 아닙니다");
    }
} else {
    // 평일인 경우
    if (시간 >= 9 && 시간 <= 20) {
        alert("평일 오픈 시간입니다");
    } else {
        alert("평일 영업 시간이 아닙니다");
    }
}

실용적인 예시: 학점 계산기 📊

시험 점수에 따라 학점을 부여하는 프로그램:

var 점수 = 85;
var 학점;

if (점수 >= 90) {
    학점 = "A";
} else if (점수 >= 80) {
    학점 = "B";
} else if (점수 >= 70) {
    학점 = "C";
} else if (점수 >= 60) {
    학점 = "D";
} else {
    학점 = "F";
}

alert("당신의 학점은 " + 학점 + "입니다");

조건문의 작동 방식 이해하기 🧩

조건문은 위에서 아래로 차례대로 조건을 확인합니다:

1. 첫 번째 조건(if)을 확인
2. 참이면, 해당 블록 실행 후 조건문 전체 종료
3. 거짓이면, 다음 조건(else if)으로 넘어감
4. 모든 조건이 거짓이면, else 블록 실행
5. else가 없으면, 아무것도 실행하지 않고 넘어감

조건문 작성 시 주의사항 ⚠️

1. 순서가 중요합니다: 가장 구체적인 조건을 먼저 확인하세요.
2. // 잘못된 예 if (점수 >= 60) { 학점 = "D"; } else if (점수 >= 70) { // 이 조건은 절대 확인되지 않음 학점 = "C"; } // 올바른 예 if (점수 >= 70) { 학점 = "C"; } else if (점수 >= 60) { 학점 = "D"; }
3. 동등 비교는 === 사용:
4. if (변수 === "값") { // 값과 타입 모두 확인 // 코드 }
5. 중괄호 {} 잊지 말기: 여러 줄의 코드를 실행할 때는 중괄호로 묶으세요.

연습 문제: 스스로 해보기 🎯

문제 1: 가위바위보 게임

var 나의선택 = "가위";
var 컴퓨터선택 = "바위";

if (나의선택 === 컴퓨터선택) {
    alert("무승부!");
} else if ((나의선택 === "가위" && 컴퓨터선택 === "보") || 
           (나의선택 === "바위" && 컴퓨터선택 === "가위") || 
           (나의선택 === "보" && 컴퓨터선택 === "바위")) {
    alert("승리!");
} else {
    alert("패배!");
}

문제 2: 로그인 확인

var 아이디 = prompt("아이디를 입력하세요");
var 비밀번호 = prompt("비밀번호를 입력하세요");

var 저장된아이디 = "user123";
var 저장된비밀번호 = "pass456";

if (아이디 === 저장된아이디 && 비밀번호 === 저장된비밀번호) {
    alert("로그인 성공!");
} else if (아이디 !== 저장된아이디) {
    alert("아이디가 일치하지 않습니다.");
} else {
    alert("비밀번호가 일치하지 않습니다.");
}

조건문 이해 팁 💡

1. 손으로 따라가보기: 종이에 조건과 변수 값을 쓰고, 어떤 코드가 실행될지 예상해보세요.
2. 시각화하기: 조건문을 흐름도(flowchart)로 그려보세요.
3. 단순하게 시작하기: 처음에는 복잡한 조건보다 단순한 조건으로 연습하세요.
4. 실생활에 비유하기: 프로그램의 조건을 일상생활 상황으로 바꿔 생각해보세요.