3.2.1 switch 기본 사용법 - 여러 개의 문을 깔끔하게 열어보는 열쇠

3. 선택하고 결정하기 (조건문)/3.2 여러 선택지 중에서 고르기 (switch)

3.2.1 switch 기본 사용법 - 여러 개의 문을 깔끔하게 열어보는 열쇠

thejavascript4kids 2025. 6. 30. 04:44

📘 3.2.1 switch 기본 사용법 - 여러 개의 문을 깔끔하게 열어보는 열쇠

어떤 순간에는 선택이 명확해집니다. 메뉴판 앞에서 "1번을 누르면 콜라, 2번을 누르면 사이다"라고 적혀있을 때처럼, 하나의 값에 따라 정확히 정해진 길로 가야 하는 순간들이 있습니다.

지금까지 우리는 if, else, else if로 여러 가지 조건들을 처리하는 방법을 배웠습니다. 하지만 때로는 하나의 값에 따라서 여러 가지 경우 중 하나를 선택해야 하는 상황이 있어요. 예를 들어 "1번을 누르면 콜라, 2번을 누르면 사이다, 3번을 누르면 주스"처럼 번호에 따라 다른 일을 해야 할 때 말이에요.

이런 상황에서 switch라는 도구를 사용하면 else if보다 훨씬 깔끔하고 읽기 쉬운 코드를 만들 수 있습니다.

🧠 새로운 단어들과 친해지기

switch와 관련된 새로운 단어들을 차근차근 알아보겠습니다.

단어	뜻
switch	"전환하다"라는 뜻으로, 하나의 값에 따라서 여러 가지 경우 중 하나를 선택하는 특별한 명령어입니다.
case	"경우"라는 뜻으로, switch에서 각각의 선택지를 나타내는 키워드입니다. 마치 "만약 1번이라면", "만약 2번이라면" 할 때처럼요.
break	"멈춰!"라는 뜻으로, 해당 경우의 일을 다 마치고 switch에서 나가라는 명령어입니다.
default	"기본값"이라는 뜻으로, 모든 경우에 해당하지 않을 때 하는 일을 정하는 키워드입니다.

switch는 영어로 "전환하다"라는 뜻입니다. 마치 TV 리모컨으로 채널을 바꾸는 것처럼, 값에 따라서 실행할 코드를 바꾸어 준다는 의미에서 이런 이름이 붙었어요.

✨ switch문이 뭔지 알아보기

switch문은 하나의 값을 가지고 여러 개의 선택지 중에서 딱 맞는 하나를 고르는 도구입니다. else if로도 같은 일을 할 수 있지만, 같은 변수를 여러 값과 비교할 때는 switch문이 훨씬 깔끔하고 읽기 쉬워요.

switch문의 가장 중요한 특징은 정확히 똑같은지만 확인한다는 것입니다. "크다, 작다" 같은 비교는 할 수 없고, "1과 똑같니?", "사과와 똑같니?" 이런 식으로만 확인할 수 있어요. 대신 메뉴 선택, 요일별 처리, 등급 분류 같은 명확한 선택지가 있는 상황에서는 정말 유용합니다!

또 하나 특별한 점은 break의 역할입니다. 각 case의 끝에 break를 써주지 않으면 다음 경우까지 계속 실행되는 신기한 일이 일어나요. 마치 도미노가 넘어지듯이 말이에요. 이걸 막으려면 반드시 break를 써줘야 합니다!

일상 속 비유: 학교의 자판기

switch문을 더 쉽게 이해하기 위해 '학교의 자판기' 이야기를 들려드릴게요.

우리 학교 식당에는 정말 좋은 자판기가 있습니다. 학생들이 동전을 넣고 버튼을 누르면 자판기가 즉시 반응해요.

자판기의 서비스:

1번 버튼 🔴 → "따끈따끈한 코코아가 나왔어요!" ☕
2번 버튼 🟡 → "시원한 호박 주스가 나왔어요!" 🥤
3번 버튼 🟢 → "달콤한 딸기 우유가 나왔어요!" 🍓
4번 버튼 🔵 → "상쾌한 레몬 에이드가 나왔어요!" 🍋
다른 버튼 ❓ → "죄송해요, 그 메뉴는 없어요!" 😅

자판기는 누른 버튼 번호를 정확히 확인하고 그에 딱 맞는 음료를 내어줍니다. 1번을 눌렀는데 2번 음료가 나오지는 않죠. 그리고 음료가 나오면 딱 멈춰요. 다른 음료까지 줄줄 나오지 않습니다.

switch (누른버튼) {
    case 1:
        console.log("따끈따끈한 코코아가 나왔어요!");
        break; // 여기서 멈춰요!
    case 2:
        console.log("시원한 호박 주스가 나왔어요!");
        break; // 여기서 멈춰요!
    case 3:
        console.log("달콤한 딸기 우유가 나왔어요!");
        break; // 여기서 멈춰요!
    case 4:
        console.log("상쾌한 레몬 에이드가 나왔어요!");
        break; // 여기서 멈춰요!
    default:
        console.log("죄송해요, 그 메뉴는 없어요!");
        break;
}

우리가 만드는 switch문도 이 자판기처럼 정확한 선택을 하고 깔끔하게 멈춰주는 도구입니다!

🎯 왜 switch문을 사용할까요?

혹시 "그냥 else if문을 여러 개 쓰면 안 되나요?"라고 궁금해하시는 분들이 계실까요? switch문을 사용하는 이유는 생각보다 깊습니다.

첫 번째 이유는 깔끔하고 읽기 쉽게 하기 위해서입니다. 메뉴 선택 같은 상황에서 else if문을 10개씩 쓰면 코드가 너무 길고 복잡해집니다. 하지만 switch문을 쓰면 마치 메뉴판처럼 깔끔하게 정리됩니다.

두 번째 이유는 의도를 명확하게 하기 위해서입니다. switch문을 보면 "이 여러 선택지 중에서 딱 하나만 고른다"는 뜻이 분명해집니다. 마치 "오늘 점심 메뉴 중에서 하나만 고르기"처럼요.

세 번째 이유는 관리하기 쉽게 하기 위해서입니다. 새로운 메뉴를 추가하거나 기존 메뉴를 바꿀 때 한 곳에서 쉽게 수정할 수 있어요.

마지막 이유는 실생활과의 유사성 때문입니다. 우리도 "1번을 누르면 이것, 2번을 누르면 저것" 이런 식으로 생각하잖아요. 그래서 자연스럽고 이해하기 쉽습니다.

⚙️ switch 사용법 배우기

switch문의 기본 형태는 마치 메뉴판을 만드는 것 같습니다.

switch (확인할_값) {
    case 첫번째_경우:
        // 첫 번째 경우일 때 할 일
        break;
    case 두번째_경우:
        // 두 번째 경우일 때 할 일
        break;
    case 세번째_경우:
        // 세 번째 경우일 때 할 일
        break;
    default:
        // 모든 경우에 해당하지 않을 때 할 일
        break;
}

각 부분의 의미:

switch: "선택해라"라는 명령 단어
(확인할_값): 비교할 값을 넣는 곳 (괄호 안에 써야 해요)
case: "만약 이 경우라면"이라는 뜻
break: "여기서 끝!"이라는 뜻 (정말 중요해요!)
default: "다른 모든 경우"라는 뜻

중요한 규칙들:

정확히 똑같은지만 확인해요 (===와 같은 방식)
break를 꼭 써줘야 해요 (안 쓰면 다음 경우까지 실행돼요!)
default는 선택사항이지만 써주는 게 안전해요

🧪 직접 해보면서 배우기

이제 실제로 switch문을 사용해서 여러 가지 상황을 처리하는 완전한 프로그램들을 만들어보겠습니다.

🔹 Ex1) 요일에 따라 "월요일 수업!", "화요일 수업!", "수요일 수업!" 메시지를 띄워보자

우리의 첫 번째 연습은 요일에 따라서 각 요일의 특별한 수업을 안내하는 프로그램을 만드는 것입니다.

// 오늘의 요일 설정하기
let today = "수요일";           // 요일을 저장하는 상자

console.log("=== 📚 학교 시간표 시스템 ===");
console.log(`오늘은 ${today}이에요!`);                    // 오늘 요일 출력

console.log("오늘의 특별 수업을 확인해볼게요...");           // 확인 시작 메시지

// switch로 요일에 따른 수업 안내 (각 요일마다 다른 특별 수업!)
switch (today) {                                        // 요일 값을 확인해서
    case "월요일":                                       // 월요일이라면
        console.log("📖 월요일 특별 수업!");              // 월요일 수업 제목
        console.log("약초학 - 신기한 약초들을 배워요!");    // 수업 내용
        console.log("🌿 오늘은 치유의 약초를 키워봐요!");   // 활동 내용
        console.log("💪 새로운 한 주를 힘차게 시작해요!");  // 격려 메시지
        break;                                          // 여기서 끝! 다른 경우는 실행 안 됨

    case "화요일":                                       // 화요일이라면
        console.log("🔥 화요일 특별 수업!");              // 화요일 수업 제목
        console.log("과학 실험 - 안전하게 실험해요!");      // 수업 내용
        console.log("🧪 오늘은 색깔 변하는 실험을 해봐요!"); // 활동 내용
        console.log("🎨 창의적인 화요일이에요!");          // 격려 메시지
        break;                                          // 여기서 끝!

    case "수요일":                                       // 수요일이라면
        console.log("⚡ 수요일 특별 수업!");              // 수요일 수업 제목
        console.log("전기 공학 - 전기의 원리를 배워요!");   // 수업 내용
        console.log("💡 오늘은 LED 조명을 만들어봐요!");   // 활동 내용
        console.log("🔥 한 주의 중간! 더욱 화이팅!");      // 격려 메시지
        break;                                          // 여기서 끝!

    case "목요일":                                       // 목요일이라면
        console.log("🌟 목요일 특별 수업!");              // 목요일 수업 제목
        console.log("천체 관측 - 하늘의 별들을 공부해요!");  // 수업 내용
        console.log("🔭 오늘은 망원경으로 별을 봐요!");     // 활동 내용
        console.log("📚 목표를 향해 꾸준히 달려가요!");     // 격려 메시지
        break;                                          // 여기서 끝!

    case "금요일":                                       // 금요일이라면
        console.log("🎉 금요일 특별 수업!");              // 금요일 수업 제목
        console.log("요리 수업 - 주말 간식 만들어요!");     // 수업 내용
        console.log("🍪 오늘은 맛있는 쿠키를 만들어봐요!"); // 활동 내용
        console.log("🌟 즐거운 금요일! 주말이 기다려요!");  // 격려 메시지
        break;                                          // 여기서 끝!

    case "토요일":                                       // 토요일과
    case "일요일":                                       // 일요일은 같은 처리! (break 없이 연결)
        console.log("🏖️ 행복한 주말이에요!");             // 주말 인사
        console.log("🎮 자유 시간 - 좋아하는 활동해요!");   // 자유 활동
        console.log("👨‍👩‍👧‍👦 가족과 함께 - 소중한 시간 보내요!"); // 가족 시간
        console.log("😴 충분한 휴식 - 다음 주 준비해요!");   // 휴식 권장
        console.log("✨ 즐겁고 보람찬 주말 보내세요!");     // 주말 인사
        break;                                          // 여기서 끝!

    default:                                            // 위의 모든 경우에 해당하지 않으면
        console.log("❌ 올바른 요일을 입력해주세요!");       // 오류 메시지
        console.log("월요일, 화요일, 수요일, 목요일, 금요일, 토요일, 일요일 중 하나를 써주세요!"); // 안내
        break;                                          // 여기서 끝!
}

console.log("시간표 확인이 완료되었어요!");               // 프로그램 종료 메시지

// 다른 요일로도 테스트해보기
console.log("\n=== 다른 요일 테스트 ===");
let testDay = "금요일";          // 테스트용 요일
console.log(`테스트 요일: ${testDay}`);

switch (testDay) {              // 금요일로 테스트
    case "금요일":              // 금요일 경우에 해당됨
        console.log("🎉 금요일 확인됨!");  // 이 부분이 실행됨
        break;
    case "월요일":              // 실행되지 않음
        console.log("월요일입니다.");
        break;
    default:                    // 실행되지 않음
        console.log("다른 요일입니다.");
        break;
}

이 예시에서 정말 중요한 점은 토요일과 일요일이 같은 처리를 받는다는 것입니다. 이처럼 여러 경우가 같은 결과를 가져야 할 때는 case를 연속으로 쓰고 마지막에만 break를 사용할 수 있어요!

🔹 Ex2) 메뉴 번호에 따라 "피자 주문!", "햄버거 주문!", "음료 주문!" 메시지를 보여주자

이번에는 음식점에서 메뉴 번호에 따라서 정확한 주문을 처리하는 프로그램을 만들어보겠습니다.

// 손님이 선택한 메뉴 번호
let menuNumber = 2;             // 메뉴 번호를 저장하는 상자

console.log("=== 🍕 맛있는 음식점 주문 시스템 ===");
console.log("메뉴 목록:");
console.log("1번 - 치즈 피자 (15,000원)");      // 1번 메뉴 안내
console.log("2번 - 맛있는 햄버거 (12,000원)");   // 2번 메뉴 안내
console.log("3번 - 상큼한 음료 (5,000원)");      // 3번 메뉴 안내
console.log("4번 - 바삭한 치킨 (8,000원)");      // 4번 메뉴 안내
console.log("5번 - 무지개 케이크 (10,000원)");   // 5번 메뉴 안내
console.log("==================");

console.log(`손님이 선택한 메뉴: ${menuNumber}번`);  // 선택된 메뉴 번호 출력

console.log("주문을 처리하고 있어요...");            // 주문 처리 시작 메시지

// switch로 메뉴 번호에 따른 주문 처리
switch (menuNumber) {                              // 메뉴 번호를 확인해서
    case 1:                                        // 1번이라면
        console.log("🍕 치즈 피자 주문 완료!");        // 피자 주문 확인
        console.log("따끈따끈한 치즈가 가득한 피자예요!"); // 메뉴 설명
        console.log("💰 가격: 15,000원");             // 가격 안내
        console.log("⏰ 조리 시간: 약 15분");          // 조리 시간 안내
        console.log("🔥 금방 만들어서 가져다 드릴게요!"); // 서비스 메시지
        break;                                     // 여기서 끝!

    case 2:                                        // 2번이라면
        console.log("🍔 맛있는 햄버거 주문 완료!");     // 햄버거 주문 확인
        console.log("특별한 소스가 들어간 햄버거예요!");  // 메뉴 설명
        console.log("💰 가격: 12,000원");             // 가격 안내
        console.log("⏰ 조리 시간: 약 10분");          // 조리 시간 안내
        console.log("✨ 정말 맛있는 맛을 느껴보세요!"); // 서비스 메시지
        break;                                     // 여기서 끝!

    case 3:                                        // 3번이라면
        console.log("🧊 상큼한 음료 주문 완료!");       // 음료 주문 확인
        console.log("신선한 과일로 만든 음료예요!");     // 메뉴 설명
        console.log("💰 가격: 5,000원");              // 가격 안내
        console.log("⏰ 준비 시간: 약 3분");           // 준비 시간 안내
        console.log("🌟 마시면 기분이 좋아져요!");      // 서비스 메시지
        break;                                     // 여기서 끝!

    case 4:                                        // 4번이라면
        console.log("🍗 바삭한 치킨 주문 완료!");       // 치킨 주문 확인
        console.log("바삭하고 맛있는 치킨이에요!");      // 메뉴 설명
        console.log("💰 가격: 8,000원");              // 가격 안내
        console.log("⏰ 조리 시간: 약 12분");          // 조리 시간 안내
        console.log("🔥 바삭한 맛을 좋아하신다면 강추!"); // 서비스 메시지
        break;                                     // 여기서 끝!

    case 5:                                        // 5번이라면
        console.log("🌈 무지개 케이크 주문 완료!");      // 케이크 주문 확인
        console.log("7가지 색깔로 만든 예쁜 케이크예요!"); // 메뉴 설명
        console.log("💰 가격: 10,000원");             // 가격 안내
        console.log("⏰ 준비 시간: 약 5분");           // 준비 시간 안내
        console.log("🎂 생일이나 특별한 날에 완벽해요!"); // 서비스 메시지
        break;                                     // 여기서 끝!

    default:                                       // 1~5번이 아닌 다른 번호라면
        console.log("❌ 잘못된 메뉴 번호예요!");        // 오류 메시지
        console.log("🔢 1번부터 5번 사이의 번호를 선택해주세요!"); // 올바른 범위 안내
        console.log("📋 메뉴를 다시 확인해보세요!");     // 재확인 요청
        break;                                     // 여기서 끝!
}

console.log("주문 처리가 완료되었어요!");             // 프로그램 종료 메시지
console.log("맛있게 드세요! 😊");                   // 마무리 인사

// 잘못된 번호로도 테스트해보기
console.log("\n=== 잘못된 번호 테스트 ===");
let wrongNumber = 10;            // 없는 메뉴 번호
console.log(`테스트 번호: ${wrongNumber}번`);

switch (wrongNumber) {           // 10번으로 테스트
    case 1:                      // 해당 없음
    case 2:                      // 해당 없음
    case 3:                      // 해당 없음
    case 4:                      // 해당 없음
    case 5:                      // 해당 없음
        console.log("정상 메뉴");
        break;
    default:                     // 이 부분이 실행됨
        console.log("❌ 10번 메뉴는 없어요!");
        break;
}

이 예시에서는 메뉴 번호라는 하나의 값에 따라서 완전히 다른 주문 처리가 이루어집니다. 2번을 선택했으니 햄버거 주문만 처리되고, 다른 메뉴는 전혀 관련이 없죠!

🔹 Ex3) 성적 등급에 따라 "최우수상!", "우수상!", "노력상!", "격려상!" 메시지를 띄워보자

마지막으로 성적 등급에 따라서 각각에 맞는 상을 수여하는 프로그램을 만들어보겠습니다.

// 학생의 성적 등급 설정하기
let grade = "B";                // 성적 등급을 저장하는 상자

console.log("=== 🏆 학교 시상식 ===");
console.log(`${grade} 등급을 받은 학생을 위한 시상식입니다!`); // 등급 안내

console.log("어떤 상을 받게 될지 확인해볼게요...");         // 확인 시작 메시지

// switch로 성적 등급에 따른 상 수여
switch (grade) {                                        // 성적 등급을 확인해서
    case "A":                                           // A 등급이라면
        console.log("🏆 최우수상을 수여합니다!");            // 최고 상 수여
        console.log("✨ 정말 좋은 성적이에요!");             // 칭찬 메시지
        console.log("📚 모든 과목에서 뛰어난 실력을 보였어요!"); // 성과 설명
        console.log("🎖️ 상금: 도서문화상품권 50,000원");     // 상금 안내
        console.log("📜 교장선생님의 추천서도 드려요!");      // 추가 혜택
        console.log("👏 앞으로도 이런 좋은 성적 기대할게요!"); // 격려
        break;                                          // 여기서 끝!

    case "B":                                           // B 등급이라면
        console.log("⭐ 우수상을 수여합니다!");             // 우수상 수여
        console.log("👍 정말 잘했어요!");                  // 칭찬 메시지
        console.log("📖 꾸준히 노력한 결과가 보여요!");       // 노력 인정
        console.log("🎖️ 상금: 도서문화상품권 30,000원");     // 상금 안내
        console.log("📝 담임선생님의 칭찬 편지도 드려요!");    // 추가 혜택
        console.log("💪 조금만 더 노력하면 A등급도 가능해요!"); // 동기부여
        break;                                          // 여기서 끝!

    case "C":                                           // C 등급이라면
        console.log("🌟 노력상을 수여합니다!");             // 노력상 수여
        console.log("😊 열심히 공부한 모습이 보여요!");       // 격려 메시지
        console.log("📚 기초가 탄탄해지고 있어요!");         // 진전 인정
        console.log("🎖️ 상금: 도서문화상품권 20,000원");     // 상금 안내
        console.log("✏️ 학습 도우미 선생님을 배정해드려요!");  // 지원 제공
        console.log("🎯 다음 학기에는 더 좋은 성적 기대해요!"); // 미래 격려
        break;                                          // 여기서 끝!

    case "D":                                           // D 등급이라면
        console.log("💝 격려상을 수여합니다!");             // 격려상 수여
        console.log("💪 포기하지 않고 끝까지 해낸 것이 대단해요!"); // 완주 칭찬
        console.log("📖 기본기를 더 탄탄히 해봐요!");         // 방향 제시
        console.log("🎖️ 상금: 도서문화상품권 10,000원");     // 상금 안내
        console.log("👨‍🏫 개별 맞춤 지도를 받을 수 있어요!");    // 특별 지원
        console.log("🌈 실패는 성공의 어머니! 다시 화이팅!"); // 격려와 희망
        break;                                          // 여기서 끝!

    case "F":                                           // F 등급이라면
        console.log("🤗 참가상을 수여합니다!");             // 참가상 수여
        console.log("👏 시험에 참여해준 것만으로도 의미있어요!"); // 참여 의미 부여
        console.log("📚 기초부터 차근차근 다시 시작해봐요!");   // 재시작 격려
        console.log("🎖️ 상금: 학용품 세트");               // 실용적 상품
        console.log("📖 여름방학 특별 보충 수업을 들을 수 있어요!"); // 학습 기회 제공
        console.log("🌟 다음에는 꼭 더 좋은 결과 있을 거예요!"); // 희망적 메시지
        break;                                          // 여기서 끝!

    default:                                            // A,B,C,D,F가 아닌 경우
        console.log("❌ 올바른 성적 등급을 입력해주세요!");    // 오류 메시지
        console.log("🔤 A, B, C, D, F 중 하나를 입력해주세요!"); // 올바른 형식 안내
        break;                                          // 여기서 끝!
}

console.log("시상식이 완료되었어요!");                    // 프로그램 종료 메시지
console.log("🎉 모든 학생들 수고하셨어요!");              // 마무리 격려

// 다른 등급으로도 테스트해보기
console.log("\n=== 다른 등급 테스트 ===");
let testGrade = "A";             // 최고 등급으로 테스트
console.log(`테스트 등급: ${testGrade}`);

switch (testGrade) {             // A 등급으로 테스트
    case "A":                    // A 등급에 해당됨
        console.log("🏆 A등급 확인! 최우수상!"); // 이 부분이 실행됨
        break;
    case "B":                    // 실행되지 않음
        console.log("우수상");
        break;
    default:                     // 실행되지 않음
        console.log("다른 등급");
        break;
}

이 예시에서는 성적 등급이라는 문자에 따라서 완전히 다른 상과 메시지를 제공합니다. B등급 학생은 우수상과 관련된 내용만 받고, 다른 등급의 내용은 전혀 실행되지 않아요!

🔄 switch 사용하는 순서 정리하기

지금까지 배운 switch문 사용 과정을 차근차근 정리해보겠습니다.

첫 번째 단계는 "무엇을 비교할지 정하기"입니다. 메뉴 번호, 요일, 성적 등급처럼 명확한 값을 가진 변수를 준비합니다.

두 번째 단계는 "가능한 경우들 나열하기"입니다. 1번~~5번 메뉴, 월요일~~일요일, A~F 등급처럼 가능한 모든 경우를 생각해봅니다.

세 번째 단계는 "각 경우별 할 일 정하기"입니다. 각 case마다 무엇을 할지 상세히 계획합니다.

네 번째 단계는 "break 꼭 쓰기"입니다. 각 case의 끝에 break를 쓰지 않으면 다음 경우까지 실행되는 문제가 생깁니다.

다섯 번째 단계는 "default 추가하기"입니다. 예상하지 못한 값이 들어왔을 때의 처리를 해줍니다.

마지막 단계는 "모든 경우 테스트하기"입니다. 각 case와 default가 올바르게 동작하는지, break가 제대로 작동하는지 확인해봅니다.

🧚‍♀️ 이야기로 다시 배우기: 레스토랑의 웨이터

지금까지 배운 내용을 따뜻한 이야기로 다시 정리해볼게요.

우리 동네에는 정말 특별한 레스토랑이 있습니다. 이 레스토랑의 웨이터는 정말 좋아서 손님이 메뉴 번호만 말하면 즉시 서비스를 제공합니다.

웨이터의 서비스:

손님: "2번 메뉴 주세요!"

switch (손님의_주문) {
    case "1번":
        피자_주문처리();
        break; // 피자 서비스 완료!
    case "2번":
        파스타_주문처리();  // 이 부분이 실행됨!
        break; // 파스타 서비스 완료!
    case "3번":
        샐러드_주문처리();
        break; // 샐러드 서비스 완료!
    default:
        "죄송해요, 그 메뉴는 없어요!";
        break;
}

웨이터의 좋은 점들:

첫째, 정확한 주문만 처리합니다. 2번을 주문했으면 파스타만 가져다주고, 피자나 샐러드는 가져다주지 않아요.

둘째, 서비스가 끝나면 깔끔하게 멈춥니다. 파스타를 가져다주고 나서 "아, 그러고 보니 피자도..."라고 하면서 다른 음식까지 가져다주지 않아요.

셋째, 예상하지 못한 주문에도 친절하게 대응합니다. "100번 메뉴"처럼 없는 메뉴를 주문해도 당황하지 않고 안내해줍니다.

넷째, 빠르고 정확합니다. 메뉴 번호만 들으면 즉시 무엇을 해야 할지 알고 행동합니다.

우리가 만드는 switch문도 이 웨이터처럼 정확하고 빠르고 친절한 프로그래밍 도구입니다!

🧠 자주 하는 실수와 주의할 점

switch문을 사용할 때 자주 실수하는 부분들을 미리 알아두면 더 쉽게 코딩할 수 있어요.

❌ 실수 1: break를 빼먹어서 다음 경우까지 실행되기

가장 흔하고 큰 실수는 break를 빼먹는 것입니다.

let color = "빨강";

// 잘못된 코드 (break 빼먹음!)
switch (color) {
    case "빨강":
        console.log("사과 색깔!");        // 여기가 실행되고
        // break가 없어서 아래도 계속 실행됨! 😱
    case "노랑":
        console.log("바나나 색깔!");      // 여기도 실행됨!
        // break가 없어서 아래도 계속 실행됨!
    case "초록":
        console.log("잎사귀 색깔!");      // 여기도 실행됨!
        break;
}
// 결과: "사과 색깔!", "바나나 색깔!", "잎사귀 색깔!" 모두 출력됨 (잘못!)

// 올바른 코드 (break 포함!)
switch (color) {
    case "빨강":
        console.log("사과 색깔!");        // 여기만 실행되고
        break;                          // 여기서 멈춤!
    case "노랑":
        console.log("바나나 색깔!");      // 실행되지 않음
        break;
    case "초록":
        console.log("잎사귀 색깔!");      // 실행되지 않음
        break;
}
// 결과: "사과 색깔!" 만 출력됨 (올바름!)

기억하세요: 각 case의 끝에 반드시 break를 써야 합니다!

❌ 실수 2: default를 빼먹어서 예상 못한 값 처리 안 하기

예상하지 못한 값이 들어왔을 때를 대비하지 않는 경우가 있습니다.

let animalSound = "야옹";  // 예상하지 못한 동물 소리

// 문제가 있는 코드 (default 없음!)
switch (animalSound) {
    case "멍멍":
        console.log("강아지!");
        break;
    case "야옹":
        console.log("고양이!");
        break;
    case "음메":
        console.log("소!");
        break;
}
// "야옹"은 처리되지만, 만약 "꽥꽥"이 들어오면 아무것도 안 나옴!

// 안전한 코드 (default 포함!)
switch (animalSound) {
    case "멍멍":
        console.log("🐕 강아지!");
        break;
    case "야옹":
        console.log("🐱 고양이!");        // 이 부분이 실행됨
        break;
    case "음메":
        console.log("🐄 소!");
        break;
    default:                          // 안전장치!
        console.log("❓ 무슨 동물인지 모르겠어요!");
        console.log("다른 동물 소리를 들려주세요!");
        break;
}

❌ 실수 3: switch문으로 할 수 없는 일 시도하기

switch문은 정확히 똑같은지만 확인할 수 있어요. "크다, 작다" 같은 비교는 할 수 없습니다.

let age = 15;

// 잘못된 사용 (switch로는 안 됨!)
switch (age) {
    case age >= 18:             // 이런 식으로 쓸 수 없어요! ❌
        console.log("성인");
        break;
    case age >= 13:             // 이런 식으로 쓸 수 없어요! ❌
        console.log("청소년");
        break;
}

// 올바른 방법 1: if-else if 사용 (크기 비교할 때)
if (age >= 18) {
    console.log("성인");
} else if (age >= 13) {
    console.log("청소년");
} else {
    console.log("어린이");
}

// 올바른 방법 2: switch가 적절한 경우 (정확한 값 비교)
let favoriteColor = "파랑";
switch (favoriteColor) {
    case "빨강":
        console.log("🔴 빨간색 좋아해요!");
        break;
    case "파랑":                 // 이 부분이 실행됨
        console.log("🔵 파란색 좋아해요!");
        break;
    case "노랑":
        console.log("🟡 노란색 좋아해요!");
        break;
    default:
        console.log("특별한 색깔을 좋아하시네요!");
        break;
}

✏️ 연습 문제들

때로는 작은 연습이 큰 이해로 이어집니다. 마치 피아노를 배울 때 매일 조금씩 손가락을 움직여야 하는 것처럼, 프로그래밍도 작은 문제들을 하나씩 풀어가며 익숙해지는 것이 좋습니다. 지금부터 함께 해볼 연습들은 여러분의 마음에 차근차근 새겨질 것입니다.

Ex1) 숫자에 따라 "월요일!", "화요일!", "수요일!" 메시지를 띄워보자

// 요일 번호 설정하기 (1=월요일, 2=화요일, ...)
let dayNumber = 3;              // 확인할 요일 번호

console.log(`확인할 요일 번호: ${dayNumber}`);         // 번호 출력

// switch로 번호에 따른 요일 출력하기
switch (dayNumber) {                                 // 요일 번호를 확인해서
    case 1:                                          // 1이라면
        console.log("📅 월요일!");                    // 월요일 출력
        console.log("새로운 한 주의 시작이에요!");      // 추가 메시지
        break;                                       // 여기서 끝!
    case 2:                                          // 2라면
        console.log("📅 화요일!");                    // 화요일 출력
        console.log("화이팅하는 화요일이에요!");        // 추가 메시지
        break;                                       // 여기서 끝!
    case 3:                                          // 3이라면
        console.log("📅 수요일!");                    // 수요일 출력 (이 부분 실행됨)
        console.log("한 주의 중간점이에요!");          // 추가 메시지
        break;                                       // 여기서 끝!
    case 4:                                          // 4라면
        console.log("📅 목요일!");                    // 목요일 출력
        console.log("목표를 향해 달려가요!");          // 추가 메시지
        break;                                       // 여기서 끝!
    case 5:                                          // 5라면
        console.log("📅 금요일!");                    // 금요일 출력
        console.log("신나는 주말이 기다려요!");        // 추가 메시지
        break;                                       // 여기서 끝!
    case 6:                                          // 6이라면
        console.log("📅 토요일!");                    // 토요일 출력
        console.log("즐거운 주말이에요!");             // 추가 메시지
        break;                                       // 여기서 끝!
    case 7:                                          // 7이라면
        console.log("📅 일요일!");                    // 일요일 출력
        console.log("휴식하는 일요일이에요!");          // 추가 메시지
        break;                                       // 여기서 끝!
    default:                                         // 1~7이 아닌 다른 번호라면
        console.log("❌ 올바른 요일 번호가 아니에요!"); // 오류 메시지
        console.log("1~7 사이의 번호를 입력해주세요!"); // 안내 메시지
        break;                                       // 여기서 끝!
}

console.log("요일 확인 완료!");                       // 종료 메시지

Ex2) 좋아하는 동물에 따라 "멍멍!", "야옹!", "음메!" 소리를 내보자

let favoriteAnimal = "고양이";   // 좋아하는 동물

console.log(`좋아하는 동물: ${favoriteAnimal}`);       // 동물 이름 출력

// switch로 동물에 따른 소리 내기
switch (favoriteAnimal) {                             // 동물 이름을 확인해서
    case "강아지":                                     // 강아지라면
        console.log("🐕 멍멍!");                       // 강아지 소리
        console.log("꼬리를 흔들며 반가워해요!");        // 특징 설명
        break;                                        // 여기서 끝!
    case "고양이":                                     // 고양이라면
        console.log("🐱 야옹!");                       // 고양이 소리 (이 부분 실행됨)
        console.log("우아하게 걸어다녀요!");           // 특징 설명
        break;                                        // 여기서 끝!
    case "소":                                        // 소라면
        console.log("🐄 음메!");                       // 소 소리
        console.log("큰 몸집으로 걸어다녀요!");         // 특징 설명
        break;                                        // 여기서 끝!
    case "돼지":                                      // 돼지라면
        console.log("🐷 꿀꿀!");                       // 돼지 소리
        console.log("진흙에서 뒹굴기를 좋아해요!");      // 특징 설명
        break;                                        // 여기서 끝!
    default:                                          // 다른 동물이라면
        console.log("❓ 무슨 소리를 낼까요?");           // 궁금증 표현
        console.log("특별한 동물을 좋아하시는군요!");     // 긍정적 반응
        break;                                        // 여기서 끝!
}

console.log("동물 소리 내기 완료!");                   // 종료 메시지

Ex3) 계절에 따라 "따뜻해요!", "더워요!", "시원해요!", "추워요!" 메시지를 보여주자

let season = "여름";             // 현재 계절

console.log(`현재 계절: ${season}`);                   // 계절 출력

// switch로 계절에 따른 날씨 메시지
switch (season) {                                     // 계절을 확인해서
    case "봄":                                        // 봄이라면
        console.log("🌸 따뜻해요!");                   // 봄 날씨
        console.log("꽃이 예쁘게 피는 계절이에요!");     // 계절 특징
        break;                                        // 여기서 끝!
    case "여름":                                      // 여름이라면
        console.log("☀️ 더워요!");                     // 여름 날씨 (이 부분 실행됨)
        console.log("수영하기 좋은 계절이에요!");       // 계절 특징
        break;                                        // 여기서 끝!
    case "가을":                                      // 가을이라면
        console.log("🍂 시원해요!");                   // 가을 날씨
        console.log("단풍이 아름다운 계절이에요!");      // 계절 특징
        break;                                        // 여기서 끝!
    case "겨울":                                      // 겨울이라면
        console.log("❄️ 추워요!");                     // 겨울 날씨
        console.log("눈이 내리는 계절이에요!");         // 계절 특징
        break;                                        // 여기서 끝!
    default:                                          // 다른 값이라면
        console.log("❓ 어떤 계절인지 모르겠어요!");      // 궁금증 표현
        console.log("봄, 여름, 가을, 겨울 중 하나를 말해주세요!"); // 안내
        break;                                        // 여기서 끝!
}

console.log("계절별 날씨 확인 완료!");                 // 종료 메시지

🔄 2단원 복습 문제 - 잊지 않도록 다시 한번!

지금까지 3단원을 차근차근 공부했으니, 2단원에서 배운 중요한 내용들을 복습해볼까요?

복습 문제 1: 연산자 사용하기

// 2단원에서 배운 연산자들을 다시 연습해보아요!

let firstNumber = 10;           // 첫 번째 숫자
let secondNumber = 3;           // 두 번째 숫자

console.log("=== 2단원 복습: 산술 연산자 ===");
console.log(`첫 번째 숫자: ${firstNumber}`);
console.log(`두 번째 숫자: ${secondNumber}`);

// 2단원에서 배운 산술 연산자들 사용하기
console.log("연산 결과:");
console.log(`${firstNumber} + ${secondNumber} =`, firstNumber + secondNumber);   // 더하기
console.log(`${firstNumber} - ${secondNumber} =`, firstNumber - secondNumber);   // 빼기
console.log(`${firstNumber} * ${secondNumber} =`, firstNumber * secondNumber);   // 곱하기
console.log(`${firstNumber} / ${secondNumber} =`, firstNumber / secondNumber);   // 나누기
console.log(`${firstNumber} % ${secondNumber} =`, firstNumber % secondNumber);   // 나머지

// 3단원에서 배운 switch와 함께 사용해보기
let operation = "+";  // 연산자

switch (operation) {
    case "+":
        console.log("🔢 더하기 연산! 2단원에서 배운 + 연산자를 사용했어요!");
        console.log("결과:", firstNumber + secondNumber);
        break;
    case "-":
        console.log("🔢 빼기 연산! 2단원에서 배운 - 연산자를 사용했어요!");
        console.log("결과:", firstNumber - secondNumber);
        break;
    case "*":
        console.log("🔢 곱하기 연산! 2단원에서 배운 * 연산자를 사용했어요!");
        console.log("결과:", firstNumber * secondNumber);
        break;
    case "/":
        console.log("🔢 나누기 연산! 2단원에서 배운 / 연산자를 사용했어요!");
        console.log("결과:", firstNumber / secondNumber);
        break;
    default:
        console.log("❌ 올바른 연산자를 입력해주세요!");
        break;
}

복습 문제 2: 논리 연산자 다시 확인하기

// 2단원에서 배운 논리 연산자를 다시 확인해보아요!

let isRaining = false;          // 비가 오는지 여부
let hasUmbrella = true;         // 우산이 있는지 여부

console.log("=== 2단원 복습: 논리 연산자 ===");
console.log(`비가 오나요: ${isRaining}`);
console.log(`우산이 있나요: ${hasUmbrella}`);

// 2단원에서 배운 논리 연산자 && (그리고)
console.log("비가 오고 우산이 있나요:", isRaining && hasUmbrella);

// 2단원에서 배운 논리 연산자 || (또는)
console.log("비가 오거나 우산이 있나요:", isRaining || hasUmbrella);

// 2단원에서 배운 논리 연산자 ! (반대)
console.log("비가 안 오나요:", !isRaining);

// 3단원 switch에서 2단원 논리 연산자 활용하기
let weatherStatus = isRaining && hasUmbrella ? "준비완료" : 
                   isRaining && !hasUmbrella ? "우산없음" : 
                   !isRaining ? "맑음" : "기타";

switch (weatherStatus) {
    case "준비완료":
        console.log("☔ 비가 오지만 우산이 있어요! (2단원 && 연산자 활용)");
        break;
    case "우산없음":
        console.log("😅 비가 오는데 우산이 없어요! (2단원 && ! 연산자 활용)");
        break;
    case "맑음":
        console.log("☀️ 맑은 날씨예요! (2단원 ! 연산자 활용)");
        break;
    default:
        console.log("❓ 날씨 상태를 확인할 수 없어요!");
        break;
}

복습 해답과 설명:

산술 연산자 (2단원): +, -, *, /, % 등을 사용해서 계산할 수 있습니다.
논리 연산자 (2단원): &&(그리고), ||(또는), !(반대)를 사용해서 참/거짓을 판단할 수 있습니다.
연결점: 2단원에서 배운 연산자들이 3단원의 switch 조건문에서 계산 결과나 조건을 만들 때 정말 중요하게 사용됩니다!

우리는 지금까지 switch문을 배워서 하나의 값에 따라 여러 선택지 중 하나를 깔끔하게 선택하는 방법을 익혔습니다. switch문은 메뉴 선택, 요일별 처리, 등급 분류 같은 상황에서 else if보다 훨씬 읽기 쉽고 관리하기 좋은 코드를 만들어줍니다.

가장 중요한 것은 break를 빼먹지 않는 것입니다! 처음에는 어려울 수 있지만, 계속 연습하다 보면 자연스럽게 사용할 수 있게 될 것입니다. 마치 악기를 배울 때처럼, 손가락이 기억할 때까지 반복하면 어느 순간 자연스럽게 흘러나올 것입니다.

다음 시간에는 switch문의 더 고급 기능들에 대해 배워볼 예정입니다. 오늘도 함께 해주셔서 고맙습니다! 🎉

✅ 학습 완료 체크리스트

이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!

학습 내용	이해했나요?
switch의 기본 개념	✅
기본 사용법과 문법	✅
주요 특징과 차이점	✅
자주 하는 실수들	✅
실전 예제 이해	✅
2단원 복습 내용	✅

📂 마무리 정보

오늘 배운 3.2.1 내용이 여러분의 자바스크립트 지식 상자에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!

기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.

🚀 더 체계적인 JavaScript 학습을 원하신다면?

이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.

📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼

📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

💻 무료로 학습하러 가기

'3. 선택하고 결정하기 (조건문) > 3.2 여러 선택지 중에서 고르기 (switch)' 카테고리의 다른 글

3.2.3 `default` - switch문의 마지막 안전망 (0)	2025.06.30
3.2.2 break의 중요성 - 정확한 곳에서 멈추는 스위치 (0)	2025.06.30

현재글3.2.1 switch 기본 사용법 - 여러 개의 문을 깔끔하게 열어보는 열쇠

초중고등학생 자바스크립트 교재

이 교재는 초등학생부터 성인까지, 누구나 자바스크립트를 쉽게 배우고 스스로 코딩을 즐겁게 경험할 수 있도록 AI와 함께 정성껏 설계하였습니다. 프로그래밍이 처음이신가요? 걱정하지 않으셔도 됩니다.

Export, Promise, 비동기, 산술연산자, 자바스크립트교재, 중등코딩교육, 싱글턴패턴, setTimeout, 연산자, 자바스크립트, ES6모듈, 모듈, 코딩교재, 초등코딩, async_await, 논리연산자, JavaScript, 모듈패턴, Import, 비교연산자,

Today :
Yesterday :

초중고등학생 자바스크립트 교재

3.2.1 switch 기본 사용법 - 여러 개의 문을 깔끔하게 열어보는 열쇠

📘 3.2.1 switch 기본 사용법 - 여러 개의 문을 깔끔하게 열어보는 열쇠

🧠 새로운 단어들과 친해지기

✨ switch문이 뭔지 알아보기

일상 속 비유: 학교의 자판기

🎯 왜 switch문을 사용할까요?

⚙️ switch 사용법 배우기

🧪 직접 해보면서 배우기

🔹 Ex1) 요일에 따라 "월요일 수업!", "화요일 수업!", "수요일 수업!" 메시지를 띄워보자

🔹 Ex2) 메뉴 번호에 따라 "피자 주문!", "햄버거 주문!", "음료 주문!" 메시지를 보여주자

🔹 Ex3) 성적 등급에 따라 "최우수상!", "우수상!", "노력상!", "격려상!" 메시지를 띄워보자

🔄 switch 사용하는 순서 정리하기

🧚‍♀️ 이야기로 다시 배우기: 레스토랑의 웨이터

🧠 자주 하는 실수와 주의할 점

❌ 실수 1: break를 빼먹어서 다음 경우까지 실행되기

❌ 실수 2: default를 빼먹어서 예상 못한 값 처리 안 하기

❌ 실수 3: switch문으로 할 수 없는 일 시도하기

✏️ 연습 문제들

Ex1) 숫자에 따라 "월요일!", "화요일!", "수요일!" 메시지를 띄워보자

Ex2) 좋아하는 동물에 따라 "멍멍!", "야옹!", "음메!" 소리를 내보자

Ex3) 계절에 따라 "따뜻해요!", "더워요!", "시원해요!", "추워요!" 메시지를 보여주자

🔄 2단원 복습 문제 - 잊지 않도록 다시 한번!

복습 문제 1: 연산자 사용하기

복습 문제 2: 논리 연산자 다시 확인하기

✅ 학습 완료 체크리스트

📂 마무리 정보

'3. 선택하고 결정하기 (조건문) > 3.2 여러 선택지 중에서 고르기 (switch)' 카테고리의 다른 글

'3. 선택하고 결정하기 (조건문)/3.2 여러 선택지 중에서 고르기 (switch)'의 다른글

티스토리툴바

« 2025/08 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

3.2.1 switch 기본 사용법 - 여러 개의 문을 깔끔하게 열어보는 열쇠

📘 3.2.1 switch 기본 사용법 - 여러 개의 문을 깔끔하게 열어보는 열쇠

🧠 새로운 단어들과 친해지기

✨ switch문이 뭔지 알아보기

일상 속 비유: 학교의 자판기

🎯 왜 switch문을 사용할까요?

⚙️ switch 사용법 배우기

🧪 직접 해보면서 배우기

🔹 Ex1) 요일에 따라 "월요일 수업!", "화요일 수업!", "수요일 수업!" 메시지를 띄워보자

🔹 Ex2) 메뉴 번호에 따라 "피자 주문!", "햄버거 주문!", "음료 주문!" 메시지를 보여주자

🔹 Ex3) 성적 등급에 따라 "최우수상!", "우수상!", "노력상!", "격려상!" 메시지를 띄워보자

🔄 switch 사용하는 순서 정리하기

🧚‍♀️ 이야기로 다시 배우기: 레스토랑의 웨이터

🧠 자주 하는 실수와 주의할 점

❌ 실수 1: break를 빼먹어서 다음 경우까지 실행되기

❌ 실수 2: default를 빼먹어서 예상 못한 값 처리 안 하기

❌ 실수 3: switch문으로 할 수 없는 일 시도하기

✏️ 연습 문제들

Ex1) 숫자에 따라 "월요일!", "화요일!", "수요일!" 메시지를 띄워보자

Ex2) 좋아하는 동물에 따라 "멍멍!", "야옹!", "음메!" 소리를 내보자

Ex3) 계절에 따라 "따뜻해요!", "더워요!", "시원해요!", "추워요!" 메시지를 보여주자

🔄 2단원 복습 문제 - 잊지 않도록 다시 한번!

복습 문제 1: 연산자 사용하기

복습 문제 2: 논리 연산자 다시 확인하기

✅ 학습 완료 체크리스트

📂 마무리 정보

'3. 선택하고 결정하기 (조건문) > 3.2 여러 선택지 중에서 고르기 (switch)' 카테고리의 다른 글

'3. 선택하고 결정하기 (조건문)/3.2 여러 선택지 중에서 고르기 (switch)'의 다른글

관련글

티스토리툴바