📘 3.2.2 break의 중요성 - 정확한 곳에서 멈추는 스위치
어떤 순간에는 멈춤이 더 중요합니다. 마치 정확한 버스 정거장에서 내려야 목적지에 도착할 수 있듯이, 프로그램도 정확한 지점에서 멈춰야 우리가 원하는 결과를 얻을 수 있어요.
지난 시간에 switch문의 기본 사용법을 배우면서 각 case의 끝에 break라는 키워드를 계속 써주었죠? 혹시 여러분 중에 "이게 꼭 필요한 건가?"라고 생각해본 분들이 있나요?
오늘은 정말 중요한 비밀을 알려드릴 것입니다. break가 얼마나 중요한지, 그리고 break 없이는 어떤 일들이 일어나는지를 함께 알아볼 거예요. break 하나로 프로그램이 완전히 다르게 동작할 수 있다는 사실을 발견해보세요!
🧠 새로운 단어들과 친해지기
break의 중요성을 이해하는 데 필요한 새로운 단어들을 차근차근 알아보겠습니다.
| 단어 | 뜻 |
|---|---|
| break | "멈춰!"라는 뜻으로, switch문에서 일을 다 마치고 바깥으로 나가라는 명령어입니다. 마치 버스에서 내릴 정거장에서 "정차!"라고 하는 것과 같아요. |
| 연달아 실행 | break가 없어서 선택하지 않은 다른 경우들까지 줄줄이 실행되는 현상입니다. 마치 도미노가 넘어지듯이 계속 이어져요. |
| 의도적으로 연결하기 | 여러 경우에서 같은 일을 하고 싶을 때 일부러 break를 빼는 방법입니다. |
| 무한 실행 | break 없이 모든 경우가 연달아 실행되는 상황입니다. 마치 멈추지 않는 기차처럼 끝까지 가버려요. |
break는 영어로 "부수다", "멈추다"라는 뜻입니다. 자동차의 브레이크처럼, 프로그램이 정확한 지점에서 멈춰주는 역할을 해요. 마치 정확한 정거장에서 버스를 세워주는 운전기사의 브레이크와 같습니다!
✨ break가 뭔지 알아보기
break는 switch문에서 "이제 그만! 여기서 끝!"이라고 말해주는 정말 중요한 도구입니다! 만약 break가 없다면 해당 경우부터 시작해서 아래에 있는 모든 경우들이 줄줄이 실행되는 일이 일어나요.
이런 현상을 "연달아 실행"이라고 부르는데, 마치 도미노가 넘어지듯이 한 번 시작되면 멈추지 않고 계속 이어집니다. 때로는 이런 특성이 유용할 수 있어요. 예를 들어 여러 경우에서 같은 일을 해야 할 때 일부러 break를 빼서 코드를 간단하게 만들 수 있거든요.
하지만 대부분의 경우에는 각 선택지가 독립적으로 실행되어야 하므로, break를 빼먹으면 우리가 원하지 않는 이상한 결과가 나올 수 있어요. 마치 1번 버튼을 눌렀는데 2번, 3번, 4번까지 모두 나오는 자판기처럼요!
일상 속 비유: 학교 엘리베이터의 브레이크
break의 중요성을 더 쉽게 이해하기 위해 '학교 엘리베이터' 이야기를 들려드릴게요.
여러분이 학교 엘리베이터를 타고 3층 음악실에 가고 싶어서 3층 버튼을 눌렀다고 상상해보세요.
정상적인 엘리베이터 (break 있음) ✅
- 1층에서 출발 🏢
- 2층을 지나가며 "2층입니다" 📢
- 3층에서 딱! 멈춤 🛑
- "띵동~ 3층 음악실입니다" 🎵
- 문이 열리고 원하는 곳에 정확히 도착! 😊
고장난 엘리베이터 (break 없음) ❌
- 1층에서 출발 🏢
- 2층을 지나가며 "2층입니다" 📢
- 3층을 지나가며 "3층입니다" 📢 (멈추지 않음!)
- 4층을 지나가며 "4층입니다" 📢 (여전히 안 멈춤!)
- 5층을 지나가며 "5층입니다" 📢 (계속 올라감!)
- 옥상까지 가버림! 😱 "음악실은 언제 가지?"
switch (누른층) {
case 3:
console.log("3층 음악실에 도착했어요!");
break; // 🛑 여기서 정확히 멈춤! 음악 수업 들으러 가자!
case 4:
console.log("4층 과학실에 도착했어요!");
break; // 🛑 여기서 정확히 멈춤!
case 5:
console.log("5층 도서관에 도착했어요!");
break; // 🛑 여기서 정확히 멈춤!
}break는 엘리베이터의 브레이크와 같습니다. 우리가 원하는 정확한 층에서 멈춰주는 고마운 안전장치예요!
🎯 왜 break를 사용해야 할까요?
혹시 "그럼 break가 왜 이렇게 중요한 거예요?"라고 궁금해하시는 분들이 계실까요? 정말 중요한 이유들이 많이 있습니다!
첫 번째 이유는 정확한 일만 하게 하기 위해서입니다. 1번을 선택했으면 1번에 해당하는 일만 하고, 2번이나 3번의 일까지 하면 안 되잖아요. break가 있어야 우리가 원하는 일만 딱 하고 끝낼 수 있어요.
두 번째 이유는 컴퓨터가 빨라지게 하기 위해서입니다. 필요 없는 일들을 하지 않으니까 컴퓨터가 더 빠르게 동작하고, 전력도 덜 사용해요. 마치 필요 없는 방의 불을 끄는 것처럼요.
세 번째 이유는 여러 경우를 묶을 때 사용하기 위해서입니다. 가끔은 일부러 break를 빼서 토요일과 일요일을 "주말"로 함께 처리하거나, 봄과 여름을 "따뜻한 계절"로 함께 처리할 수 있어요.
마지막 이유는 실수를 방지하기 위해서입니다. break를 제대로 쓰면 예상하지 못한 이상한 일들이 일어나지 않아서 안전한 프로그램을 만들 수 있어요.
⚙️ break 사용법 배우기
break가 어떻게 동작하는지 자세히 알아보겠습니다.
break가 있는 정상적인 switch문:
switch (선택한값) {
case 첫번째:
// 첫 번째 경우일 때 할 일
break; // ✅ 여기서 멈춤!
case 두번째:
// 두 번째 경우일 때만 할 일
break; // ✅ 여기서 멈춤!
case 세번째:
// 세 번째 경우일 때만 할 일
break; // ✅ 여기서 멈춤!
}break가 없는 위험한 상황:
switch (선택한값) {
case 첫번째:
// 첫 번째 경우일 때 할 일
// ❌ break 없음! 아래로 계속 실행됨!
case 두번째:
// 첫 번째를 선택해도 여기도 실행됨!
// ❌ break 없음! 아래로 계속 실행됨!
case 세번째:
// 첫 번째를 선택해도 여기도 실행됨!
break; // 여기서야 겨우 멈춤
}의도적으로 연결하기 (같은 일 처리):
switch (요일) {
case "토요일":
case "일요일": // 토요일과 일요일 모두
console.log("🏖️ 신나는 주말이에요!");
break; // 여기서 멈춤
case "월요일":
case "화요일":
case "수요일":
case "목요일":
case "금요일": // 평일 모두
console.log("📚 열심히 공부하는 평일이에요!");
break; // 여기서 멈춤
}🧪 직접 해보면서 배우기
이제 실제로 break의 중요성을 생생하게 경험해보는 실험을 해보겠습니다.
🔹 Ex1) break 있을 때와 없을 때 비교해보기 - 자판기 실험
첫 번째 실험에서는 똑같은 자판기에서 break가 있을 때와 없을 때의 차이를 직접 비교해보겠습니다.
// 학교 자판기에서 음료 선택하기
let choiceButton = 2; // 학생이 2번 버튼을 눌렀어요
console.log("=== 🧪 break 비교 실험을 시작해요! ===");
console.log("학교 자판기 메뉴:");
console.log("1번 - 🥤 콜라");
console.log("2번 - 🧃 오렌지 주스"); // 학생이 선택한 음료
console.log("3번 - 🥛 딸기 우유");
console.log("4번 - 💧 생수");
console.log("");
console.log(`학생이 ${choiceButton}번 버튼을 눌렀어요!`);
console.log("");
// ❌ break가 없는 고장난 자판기
console.log("❌ 고장난 자판기 (break 없음):");
console.log("이 자판기는 break가 고장나서 멈출 줄 몰라요!");
switch (choiceButton) { // 2번을 확인해서
case 1: // 1번이 아니므로 넘어감
console.log("🥤 콜라가 나왔어요!");
// break가 없어서 아래로 계속!
case 2: // 2번이므로 여기서 시작!
console.log("🧃 오렌지 주스가 나왔어요!"); // 원하던 음료 (정상)
// break가 없어서 아래로 계속 실행됨!
case 3: // 2번인데도 실행됨!
console.log("🥛 딸기 우유가 나왔어요!"); // 원하지 않았는데 나옴!
// break가 없어서 아래로 계속 실행됨!
case 4: // 2번인데도 실행됨!
console.log("💧 생수가 나왔어요!"); // 이것도 원하지 않았는데!
// break가 없어서 아래로 계속 실행됨!
default: // 2번인데도 실행됨!
console.log("❓ 이상한 음료가 나왔어요!"); // 이것도 나옴!
}
console.log("😱 2번만 눌렀는데 모든 음료가 다 나왔어요!");
console.log("🚨 자판기가 고장나서 돈만 많이 나갔어요!");
console.log("");
// ✅ break가 있는 정상적인 자판기
console.log("✅ 정상적인 자판기 (break 있음):");
console.log("이 자판기는 정확한 곳에서 멈출 줄 알아요!");
switch (choiceButton) { // 2번을 확인해서
case 1: // 1번이 아니므로 넘어감
console.log("🥤 콜라가 나왔어요!");
break; // 1번일 때 여기서 멈춤
case 2: // 2번이므로 여기서 시작!
console.log("🧃 오렌지 주스가 나왔어요!"); // 원하던 음료 (정상)
break; // 2번일 때 여기서 딱 멈춤! ✅
case 3: // 이미 위에서 끝났으므로 실행 안 됨
console.log("🥛 딸기 우유가 나왔어요!");
break; // 3번일 때 여기서 멈춤
case 4: // 이미 위에서 끝났으므로 실행 안 됨
console.log("💧 생수가 나왔어요!");
break; // 4번일 때 여기서 멈춤
default: // 이미 위에서 끝났으므로 실행 안 됨
console.log("❓ 이상한 음료가 나왔어요!");
break; // 기본값일 때 여기서 멈춤
}
console.log("😊 2번만 눌렀으니까 오렌지 주스만 딱 나왔어요!");
console.log("💰 돈도 아끼고 원하는 음료만 받았어요!");
console.log("");
console.log("🎯 실험 결과:");
console.log("break 없음 = 선택하지 않은 것들까지 모두 나옴 (큰일남!)");
console.log("break 있음 = 선택한 것만 정확히 나옴 (완벽!)");
console.log("💡 break 하나가 자판기 전체를 바꿀 수 있어요!");
// 다른 번호로도 테스트해보기
console.log("\n=== 1번으로 테스트해보기 ===");
let testChoice = 1; // 1번 콜라 선택
console.log(`이번엔 ${testChoice}번을 눌러봐요!`);
switch (testChoice) { // 1번을 확인해서
case 1: // 1번이므로 여기서 시작!
console.log("🥤 콜라가 나왔어요!"); // 원하던 음료 (정상)
break; // 1번일 때 여기서 딱 멈춤! ✅
case 2: // 실행되지 않음
console.log("오렌지 주스");
break;
case 3: // 실행되지 않음
console.log("딸기 우유");
break;
}
console.log("✅ 1번만 선택했으니까 콜라만 나왔어요!");이 실험을 통해 break의 유무가 얼마나 극적인 차이를 만드는지 확실히 알 수 있어요. 단 하나의 키워드가 전체 프로그램의 동작을 완전히 바꿀 수 있다니 정말 놀랍죠?
🔹 Ex2) 의도적으로 연결하기 - 요일별 활동 시스템
두 번째 실험에서는 break를 일부러 빼서 여러 경우를 묶어서 처리하는 방법을 배워보겠습니다.
// 오늘의 요일에 따른 활동 계획
let today = "토요일"; // 오늘은 토요일이에요
console.log("=== 📅 요일별 활동 계획 시스템 ===");
console.log(`오늘은 ${today}이에요!`);
console.log("");
console.log("🎯 의도적으로 연결하는 방법:");
// 의도적으로 break를 빼서 그룹별로 처리하기
switch (today) { // 토요일을 확인해서
case "월요일": // 월요일이 아니므로 넘어감
console.log("📝 새로운 한 주 계획 세우기!"); // 월요일 특별 활동
console.log("💪 이번 주 목표 정하기!");
// break 없음 - 평일 공통 활동도 함께 하기 위해서
case "화요일": // 화요일이 아니므로 넘어감
case "수요일": // 수요일이 아니므로 넘어감
case "목요일": // 목요일이 아니므로 넘어감
case "금요일": // 금요일이 아니므로 넘어감
console.log("💼 평일 공통 활동:"); // 평일 공통 활동
console.log(" - 오전 9시: 학교나 학원 가기 🏫");
console.log(" - 오후 12시: 맛있는 점심 먹기 🍽️");
console.log(" - 오후 3시: 숙제나 공부하기 📚");
console.log(" - 저녁 시간: 가족과 저녁 먹기 👨👩👧👦");
console.log("😊 평일이니까 일찍 잠자리에 들어요!");
break; // 평일 처리 완료, 여기서 멈춤
case "토요일": // 토요일이므로 여기서 시작!
console.log("🧹 토요일 특별 활동:"); // 토요일만의 특별한 일
console.log(" - 방 청소해서 깔끔하게 만들기!");
console.log(" - 일주일 동안 입은 옷 세탁하기!");
console.log(" - 다음 주에 쓸 준비물 챙기기!");
// break 없음 - 주말 공통 활동도 함께 하기 위해서
case "일요일": // break가 없어서 일요일도 실행됨
console.log("🌈 즐거운 주말 공통 활동:"); // 주말 공통 활동
console.log(" - 오전: 평소보다 늦잠 자며 휴식 😴");
console.log(" - 오후: 좋아하는 게임이나 취미 🎮");
console.log(" - 저녁: 가족과 함께 영화 보기 🎬");
console.log(" - 밤: 다음 주 마음의 준비하기 💭");
console.log("🎉 주말이니까 충분히 즐기고 쉬어요!");
break; // 주말 처리 완료, 여기서 멈춤
default: // 다른 값이라면
console.log("❓ 올바른 요일을 말해주세요!");
console.log("월요일부터 일요일까지 중 하나를 선택하세요!");
break; // 에러 처리 완료
}
console.log("");
console.log("🔍 의도적 연결의 결과 분석:");
console.log("• 토요일 선택 → '토요일 특별 활동' + '주말 공통 활동' 모두 실행!");
console.log("• 일요일 선택 → '주말 공통 활동'만 실행!");
console.log("• 월요일 선택 → '새 주 계획' + '평일 공통 활동' 모두 실행!");
console.log("• 화~금요일 선택 → '평일 공통 활동'만 실행!");
// 다른 요일로도 테스트해보기
console.log("\n=== 일요일 테스트 ===");
let testDay = "일요일"; // 일요일로 테스트
console.log(`테스트 요일: ${testDay}`);
switch (testDay) { // 일요일을 확인해서
case "토요일": // 토요일이 아니므로 넘어감
console.log("토요일 특별 활동"); // 실행되지 않음
// break 없음
case "일요일": // 일요일이므로 여기서 시작!
console.log("🌈 일요일은 주말 공통 활동만!"); // 이 부분만 실행됨
break; // 여기서 멈춤
}
console.log("✅ 일요일은 특별 활동 없이 공통 활동만 했어요!");🔹 Ex3) break 빼먹기로 인한 실제 버그 상황과 해결 과정
세 번째 실험에서는 실제로 일어날 수 있는 break를 빼먹은 버그를 재현하고, 그 해결 과정을 직접 체험해보겠습니다.
// 게임 캐릭터 능력치 설정하는 시스템
let characterJob = "법사"; // 플레이어가 선택한 직업
console.log("=== 🎮 판타지 게임 캐릭터 능력치 시스템 ===");
console.log(`플레이어가 선택한 직업: ${characterJob}`);
console.log("");
// ❌ 개발자가 실수로 break를 빼먹은 버그 코드
console.log("❌ 심각한 버그 상황 (break를 깜빡했어요!):");
let power = 0; // 힘 능력치
let magic = 0; // 마법 능력치
let speed = 0; // 스피드 능력치
let defense = 0; // 방어력 능력치
switch (characterJob) { // 법사를 확인해서
case "전사": // 전사가 아니므로 넘어감
power = 10; // 전사의 힘
magic = 2; // 전사의 마법
speed = 5; // 전사의 스피드
defense = 8; // 전사의 방어력
console.log("⚔️ 전사 능력치 설정 완료!");
// ❌ break 없음! 아래 직업들의 능력치도 계속 추가됨!
case "법사": // 법사이므로 여기서 시작!
power = power + 3; // 법사의 힘이 기존에 추가됨 (0+3=3)
magic = magic + 10; // 법사의 마법이 기존에 추가됨 (0+10=10)
speed = speed + 6; // 법사의 스피드가 기존에 추가됨 (0+6=6)
defense = defense + 4; // 법사의 방어력이 기존에 추가됨 (0+4=4)
console.log("🔮 법사 능력치 설정 완료!");
// ❌ break 없음! 아래 직업들의 능력치도 계속 추가됨!
case "도둑": // 법사인데도 실행됨!
power = power + 6; // 도둑의 힘이 추가됨 (3+6=9)
magic = magic + 4; // 도둑의 마법이 추가됨 (10+4=14)
speed = speed + 10; // 도둑의 스피드가 추가됨 (6+10=16)
defense = defense + 3; // 도둑의 방어력이 추가됨 (4+3=7)
console.log("🗡️ 도둑 능력치 설정 완료!");
// ❌ break 없음! 아래 직업의 능력치도 계속 추가됨!
case "궁수": // 법사인데도 실행됨!
power = power + 5; // 궁수의 힘이 추가됨 (9+5=14)
magic = magic + 5; // 궁수의 마법이 추가됨 (14+5=19)
speed = speed + 8; // 궁수의 스피드가 추가됨 (16+8=24)
defense = defense + 5; // 궁수의 방어력이 추가됨 (7+5=12)
console.log("🏹 궁수 능력치 설정 완료!");
break; // 여기서야 비로소 멈춤
default: // 실행되지 않음
console.log("❓ 알 수 없는 직업이에요!");
break;
}
console.log("");
console.log("😱 심각한 버그 결과 (법사 하나만 선택했는데...):");
console.log(`💪 힘: ${power} (정상: 3, 실제: ${power}) 😨`); // 3+6+5 = 14
console.log(`🔮 마법: ${magic} (정상: 10, 실제: ${magic}) 😨`); // 10+4+5 = 19
console.log(`⚡ 스피드: ${speed} (정상: 6, 실제: ${speed}) 😨`); // 6+10+8 = 24
console.log(`🛡️ 방어력: ${defense} (정상: 4, 실제: ${defense}) 😨`); // 4+3+5 = 12
console.log("");
console.log("🚨 법사 + 도둑 + 궁수의 능력치가 모두 합쳐졌어요!");
console.log("😭 법사만 선택했는데 다른 직업 능력까지 다 받았어요!");
console.log("⚖️ 이럼 게임이 공평하지 않아요!");
console.log("");
console.log("✅ 문제를 해결한 올바른 코드:");
// 능력치를 다시 0으로 초기화
power = 0;
magic = 0;
speed = 0;
defense = 0;
switch (characterJob) { // 법사를 확인해서
case "전사": // 전사가 아니므로 넘어감
power = 10; // 전사만의 고유한 힘
magic = 2; // 전사만의 고유한 마법
speed = 5; // 전사만의 고유한 스피드
defense = 8; // 전사만의 고유한 방어력
console.log("⚔️ 전사 능력치 설정 완료!");
break; // ✅ 전사 설정 후 즉시 멈춤
case "법사": // 법사이므로 여기서 시작!
power = 3; // 법사만의 고유한 힘
magic = 10; // 법사만의 고유한 마법
speed = 6; // 법사만의 고유한 스피드
defense = 4; // 법사만의 고유한 방어력
console.log("🔮 법사 능력치 설정 완료!");
break; // ✅ 법사 설정 후 즉시 멈춤
case "도둑": // 이미 위에서 끝났으므로 실행 안 됨
power = 6; // 도둑만의 고유한 힘
magic = 4; // 도둑만의 고유한 마법
speed = 10; // 도둑만의 고유한 스피드
defense = 3; // 도둑만의 고유한 방어력
console.log("🗡️ 도둑 능력치 설정 완료!");
break; // ✅ 도둑 설정 후 즉시 멈춤
case "궁수": // 이미 위에서 끝났으므로 실행 안 됨
power = 5; // 궁수만의 고유한 힘
magic = 5; // 궁수만의 고유한 마법
speed = 8; // 궁수만의 고유한 스피드
defense = 5; // 궁수만의 고유한 방어력
console.log("🏹 궁수 능력치 설정 완료!");
break; // ✅ 궁수 설정 후 즉시 멈춤
default: // 이미 위에서 끝났으므로 실행 안 됨
console.log("❓ 알 수 없는 직업이에요!");
power = 1; // 기본 능력치
magic = 1;
speed = 1;
defense = 1;
break; // ✅ 기본값 설정 후 멈춤
}
console.log("");
console.log("😊 올바른 결과 (법사만 선택했을 때):");
console.log(`💪 힘: ${power} (완벽!) ✅`); // 3
console.log(`🔮 마법: ${magic} (완벽!) ✅`); // 10
console.log(`⚡ 스피드: ${speed} (완벽!) ✅`); // 6
console.log(`🛡️ 방어력: ${defense} (완벽!) ✅`); // 4
console.log("🎉 법사 전용 능력치만 정확히 적용되었어요!");🔄 break 사용하는 순서 정리하기
지금까지 배운 break 사용법을 차근차근 정리해보겠습니다.
첫 번째 단계는 "각 경우별로 할 일 정하기"입니다. 1번을 선택하면 무엇을 할지, 2번을 선택하면 무엇을 할지 명확히 정해요.
두 번째 단계는 "실행할 코드 작성하기"입니다. 각 case에서 처리할 일들을 console.log나 다른 명령어들로 구체적으로 써요.
세 번째 단계는 "break 배치하기"입니다. 이게 가장 중요한 과정으로, 각 case의 실행 코드 다음에 break 키워드를 정확히 써줘야 해요.
네 번째 단계는 "의도적 연결 확인하기"입니다. 여러 case를 일부러 연결할지 신중히 결정해요. 토요일과 일요일처럼 같은 처리를 해야 한다면 의도적으로 break를 빼도 돼요.
다섯 번째 단계는 "여러 값으로 테스트하기"입니다. 각 case가 독립적으로 잘 실행되는지 여러 값으로 확인해봐요.
마지막 단계는 "break 누락 검사하기"입니다. break를 빼먹었거나 잘못 배치한 곳이 없는지 꼼꼼히 점검해요.
🧚♀️ 이야기로 다시 배우기: 기차역의 정확한 정차 시스템
지금까지 배운 내용을 따뜻한 이야기로 다시 정리해볼게요.
한 학생이 3번 플랫폼 표를 들고 기차를 타고 있습니다. 목적지에 정확히 도착하려면 기차가 적절한 곳에서 멈춰야겠죠?
정상적인 기차 (break 있음) ✅
- 1번 플랫폼을 지나가며 "1번 플랫폼입니다" 📢🚂💨
- 2번 플랫폼을 지나가며 "2번 플랫폼입니다" 📢🚂💨
- 3번 플랫폼에서 정확히 정차! "3번 플랫폼입니다. 문이 열립니다" 📢🚂🛑
- 학생이 안전하게 내려서 목적지에 도착! 😊🎒
브레이크 고장 기차 (break 없음) ❌
- 1번 플랫폼 지나감 "1번 플랫폼입니다" 📢🚂💨
- 2번 플랫폼 지나감 "2번 플랫폼입니다" 📢🚂💨
- 3번 플랫폼도 그냥 지나감 "3번 플랫폼입니다" 📢🚂💨
- 4번 플랫폼도 지나감 "4번 플랫폼입니다" 📢🚂💨
- 5번 플랫폼도 지나감 "5번 플랫폼입니다" 📢🚂💨
- 끝까지 가버림! 학생은 목적지를 놓쳐버림 😱🚂
switch (플랫폼번호) {
case 1:
console.log("1번 플랫폼에 도착했어요!");
break; // 🛑 1번에서 정확히 정차!
case 2:
console.log("2번 플랫폼에 도착했어요!");
break; // 🛑 2번에서 정확히 정차!
case 3:
console.log("3번 플랫폼에 도착했어요!");
break; // 🛑 3번에서 정확히 정차!
}break는 기차의 브레이크와 똑같습니다. 학생이 원하는 정거장에서 정확히 멈춰주는 안전하고 믿을 수 있는 장치예요! 모든 승객이 원하는 곳에 정확히 도착할 수 있게 해주는 고마운 존재랍니다.
🧠 자주 하는 실수와 주의할 점
break를 사용할 때 자주 실수하는 부분들을 미리 알아두면 더 쉽게 코딩할 수 있어요.
❌ 실수 1: 마지막 case에만 break를 넣고 나머지는 빼먹기
가장 흔한 실수는 마지막 case에만 break를 넣고 중간의 break들을 모두 빼먹는 것입니다.
let color = "빨강";
// 잘못된 코드 (중간 break들을 모두 깜빡함!)
switch (color) {
case "빨강":
console.log("🔴 빨간색이에요!");
// break 없음! 아래로 계속 실행됨!
case "노랑":
console.log("🟡 노란색이에요!");
// break 없음! 아래로 계속 실행됨!
case "파랑":
console.log("🔵 파란색이에요!");
// break 없음! 아래로 계속 실행됨!
case "초록":
console.log("🟢 초록색이에요!");
break; // 마지막에만 break
}
// 결과: 빨강을 선택했는데 "빨간색!", "노란색!", "파란색!", "초록색!" 모두 출력됨!
// 올바른 코드 (모든 case에 break 포함!)
switch (color) {
case "빨강":
console.log("🔴 빨간색이에요!");
break; // ✅ 빨강 처리 후 즉시 멈춤
case "노랑":
console.log("🟡 노란색이에요!");
break; // ✅ 노랑 처리 후 즉시 멈춤
case "파랑":
console.log("🔵 파란색이에요!");
break; // ✅ 파랑 처리 후 즉시 멈춤
case "초록":
console.log("🟢 초록색이에요!");
break; // ✅ 초록 처리 후 즉시 멈춤
}
// 결과: "🔴 빨간색이에요!" 만 출력됨 (올바른 결과!)❌ 실수 2: break 위치를 잘못 놓기
break를 실행할 코드보다 먼저 쓰면 그 코드들이 실행되지 않습니다.
let weather = "맑음";
// 잘못된 break 위치
switch (weather) {
case "맑음":
case "흐림":
break; // ❌ 여기에 break가 있으면 아래 코드가 실행되지 않음!
console.log("☀️ 좋은 날씨예요!"); // 실행되지 않음
console.log("밖에 나가서 놀아요!"); // 실행되지 않음
case "비":
console.log("☔ 우산을 챙기세요!");
break;
}
// 맑음을 선택해도 아무것도 출력되지 않음!
// 올바른 break 위치
switch (weather) {
case "맑음":
case "흐림":
console.log("☀️ 좋은 날씨예요!"); // 실행됨
console.log("밖에 나가서 놀아요!"); // 실행됨
break; // ✅ 실행할 코드 다음에 break
case "비":
console.log("☔ 우산을 챙기세요!");
break; // ✅ 실행할 코드 다음에 break
}✏️ 연습 문제들
때로는 작은 실수가 큰 깨달음을 주기도 합니다. 마치 퍼즐을 맞출 때 하나의 조각이 잘못 놓이면 전체 그림이 달라지듯, 프로그래밍에서도 작은 break 하나가 전체 흐름을 바꿀 수 있습니다. 이제 직접 연습해보며 그 차이를 손으로 느껴보세요.
Ex1) break를 모두 제거하면 어떤 결과가 나올까요?
// 성적 등급 확인하기
let grade = "B"; // B 등급을 받은 학생
console.log(`학생의 성적 등급: ${grade}`);
// 모든 break를 제거했을 때 어떻게 될까요?
switch (grade) { // B를 확인해서
case "A": // A가 아니므로 넘어감
console.log("🏆 90점 이상 - 최우수!");
// break;를 제거했다면? (실행되지 않음)
case "B": // B이므로 여기서 시작!
console.log("⭐ 80점 이상 - 우수!"); // 실행됨 (정상)
// break;를 제거했다면? (아래로 계속 실행됨!)
case "C": // B인데도 실행됨!
console.log("😊 70점 이상 - 보통!"); // 실행됨 (문제!)
// break;를 제거했다면? (아래로 계속 실행됨!)
case "D": // B인데도 실행됨!
console.log("😐 60점 이상 - 노력 필요!"); // 실행됨 (문제!)
// break;를 제거했다면? (아래로 계속 실행됨!)
default: // B인데도 실행됨!
console.log("📚 60점 미만 - 더 열심히!"); // 실행됨 (문제!)
}
console.log("성적 확인 완료!");정답: B를 선택했는데 "⭐ 80점 이상 - 우수!", "😊 70점 이상 - 보통!", "😐 60점 이상 - 노력 필요!", "📚 60점 미만 - 더 열심히!" 모두 출력됩니다.
(B부터 끝까지 모든 case가 연속으로 실행되기 때문이에요)
Ex2) 주말과 평일을 구분하는 switch문에서 의도적으로 연결해보자
// 오늘의 요일
let dayOfWeek = "토요일"; // 토요일 선택
console.log(`오늘은 ${dayOfWeek}이에요!`);
// 의도적 연결을 사용해서 주말과 평일 구분하기
switch (dayOfWeek) { // 토요일을 확인해서
case "토요일": // 토요일이므로 여기서 시작!
case "일요일": // break가 없어서 일요일도 연결됨
console.log("🏖️ 행복한 주말이에요!"); // 주말 메시지 (실행됨)
console.log("늦잠 자고 놀아도 돼요!"); // 주말 활동 (실행됨)
break; // 주말 처리 완료, 여기서 멈춤
case "월요일": // 실행되지 않음
case "화요일": // 실행되지 않음
case "수요일": // 실행되지 않음
case "목요일": // 실행되지 않음
case "금요일": // 실행되지 않음
console.log("💼 열심히 일하는 평일이에요!"); // 실행되지 않음
console.log("학교나 학원에 가야 해요!"); // 실행되지 않음
break; // 평일 처리 완료
default: // 실행되지 않음
console.log("❓ 올바른 요일을 말해주세요!"); // 실행되지 않음
break; // 기본값 처리 완료
}
console.log("요일별 활동 안내 완료!");결과: "🏖️ 행복한 주말이에요!"와 "늦잠 자고 놀아도 돼요!" 만 출력됩니다.
(토요일이 선택되었고, break가 없어서 일요일 case도 함께 실행되지만, 토요일과 일요일이 같은 내용이므로 주말 메시지만 나옵니다)
Ex3) 다음 코드의 문제점을 찾고 고쳐보자
// 신호등 색깔에 따른 행동 안내
let lightColor = "빨강"; // 빨간 신호등
console.log(`신호등 색깔: ${lightColor}`);
// 문제가 있는 코드
switch (lightColor) { // 빨강을 확인해서
case "빨강": // 빨강이므로 여기서 시작!
console.log("🔴 정지하세요!"); // 실행됨 (정상)
// ❌ break 없음! 아래로 계속 실행됨!
case "노랑": // 빨강인데도 실행됨!
console.log("🟡 주의하세요!"); // 실행됨 (문제!)
// ❌ break 없음! 아래로 계속 실행됨!
case "초록": // 빨강인데도 실행됨!
console.log("🟢 출발하세요!"); // 실행됨 (문제!)
break; // 여기서야 멈춤
}문제점: 빨간 신호등을 선택했는데 "🔴 정지하세요!", "🟡 주의하세요!", "🟢 출발하세요!" 모두 출력됩니다.
해결방법: 각 case에 break를 추가하기
// 고친 코드
switch (lightColor) { // 빨강을 확인해서
case "빨강": // 빨강이므로 여기서 시작!
console.log("🔴 정지하세요!"); // 실행됨 (정상)
break; // ✅ 빨강 처리 후 즉시 멈춤
case "노랑": // 실행되지 않음
console.log("🟡 주의하세요!");
break; // ✅ 노랑 처리 후 즉시 멈춤
case "초록": // 실행되지 않음
console.log("🟢 출발하세요!");
break; // ✅ 초록 처리 후 즉시 멈춤
default: // 실행되지 않음
console.log("❓ 알 수 없는 신호등이에요!");
break; // ✅ 기본값 처리 후 멈춤
}결과: "🔴 정지하세요!" 만 출력됩니다. (올바른 결과!)
🔄 2단원 복습 문제 - 잊지 않도록 다시 한번!
지금까지 3단원을 차근차근 공부했으니, 2단원에서 배운 중요한 내용들을 복습해볼까요?
복습 문제 1: 할당 연산자 사용하기
// 2단원에서 배운 할당 연산자를 다시 연습해보아요!
let playerScore = 100; // 게임 점수
let bonusPoints = 50; // 보너스 점수
console.log("=== 2단원 복습: 할당 연산자 ===");
console.log(`시작 점수: ${playerScore}점`);
console.log(`보너스 점수: ${bonusPoints}점`);
// 2단원에서 배운 할당 연산자들 사용하기
playerScore += bonusPoints; // playerScore = playerScore + bonusPoints
console.log(`보너스 추가 후: ${playerScore}점 (+=를 사용했어요)`);
playerScore -= 20; // playerScore = playerScore - 20
console.log(`실수로 점수 차감: ${playerScore}점 (-=를 사용했어요)`);
playerScore *= 2; // playerScore = playerScore * 2
console.log(`더블 점수 이벤트: ${playerScore}점 (*=를 사용했어요)`);
// 3단원에서 배운 switch와 함께 사용해보기
let eventType = "보너스";
switch (eventType) {
case "보너스":
playerScore += 100; // 2단원에서 배운 += 연산자 활용
console.log("🎉 보너스 이벤트! 100점 추가 (2단원 += 활용)");
console.log(`현재 점수: ${playerScore}점`);
break;
case "페널티":
playerScore -= 50; // 2단원에서 배운 -= 연산자 활용
console.log("😅 페널티 이벤트! 50점 차감 (2단원 -= 활용)");
console.log(`현재 점수: ${playerScore}점`);
break;
case "더블":
playerScore *= 2; // 2단원에서 배운 *= 연산자 활용
console.log("💎 더블 이벤트! 점수 2배 (2단원 *= 활용)");
console.log(`현재 점수: ${playerScore}점`);
break;
default:
console.log("❓ 알 수 없는 이벤트입니다!");
break;
}복습 문제 2: 타입 변환 다시 확인하기
// 2단원에서 배운 타입 변환을 다시 확인해보아요!
let userInput = "25"; // 사용자가 입력한 나이 (문자열)
let currentYear = 2024; // 현재 연도 (숫자)
console.log("=== 2단원 복습: 타입 변환 ===");
console.log(`사용자 입력: ${userInput} (타입: ${typeof userInput})`);
console.log(`현재 연도: ${currentYear} (타입: ${typeof currentYear})`);
// 2단원에서 배운 타입 변환
let userAge = Number(userInput); // 문자열을 숫자로 변환
let birthYear = currentYear - userAge;
console.log(`변환된 나이: ${userAge} (타입: ${typeof userAge})`);
console.log(`출생 연도: ${birthYear}년`);
// 3단원 switch에서 2단원 타입 변환 활용하기
let ageCategory = "";
// 나이에 따른 카테고리 분류
if (userAge >= 20) {
ageCategory = "성인";
} else if (userAge >= 13) {
ageCategory = "청소년";
} else {
ageCategory = "어린이";
}
switch (ageCategory) {
case "성인":
console.log("🎓 성인입니다! (2단원 Number() 변환으로 계산)");
console.log("모든 권리와 의무를 가지고 있어요!");
break;
case "청소년":
console.log("🧑 청소년입니다! (2단원 Number() 변환으로 계산)");
console.log("꿈을 키워나가는 중요한 시기예요!");
break;
case "어린이":
console.log("👶 어린이입니다! (2단원 Number() 변환으로 계산)");
console.log("호기심 가득한 나이예요!");
break;
default:
console.log("❓ 나이를 다시 확인해주세요!");
break;
}복습 해답과 설명:
- 할당 연산자 (2단원):
+=,-=,*=,/=등을 사용해서 값을 간편하게 변경할 수 있습니다. - 타입 변환 (2단원):
Number(),String(),Boolean()등을 사용해서 데이터 타입을 변환할 수 있습니다. - 연결점: 2단원에서 배운 할당 연산자와 타입 변환이 3단원의
switch조건문에서 값을 처리할 때 정말 중요하게 사용됩니다!
우리는 지금까지 break의 모든 비밀과 중요성을 알아봤습니다. break는 switch문에서 정확한 곳에서 멈춰주는 정말 중요한 도구입니다. 가장 중요한 것은 각 case의 끝에 반드시 break를 쓰는 습관을 기르는 것입니다!
처음에는 어려울 수 있지만, 계속 연습하다 보면 자연스럽게 사용할 수 있게 될 것입니다. 마치 자전거를 타면서 균형을 잡는 법을 익히듯, 손이 기억할 때까지 반복하면 어느 순간 자연스럽게 흘러나올 것입니다.
다음 시간에는 switch문의 더 고급 기능들에 대해 배워볼 예정입니다. 오늘도 함께 해주셔서 고맙습니다! 🎉
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!
| 학습 내용 | 이해했나요? |
|---|---|
| break의 기본 개념 | ✅ |
| 기본 사용법과 문법 | ✅ |
| 주요 특징과 차이점 | ✅ |
| 자주 하는 실수들 | ✅ |
| 실전 예제 이해 | ✅ |
| 2단원 복습 내용 | ✅ |
📂 마무리 정보
오늘 배운 3.2.2 내용이 여러분의 자바스크립트 지식 상자에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!
기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.
🚀 더 체계적인 JavaScript 학습을 원하신다면?
이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
📝 실시간 코드 실행
📊 학습 진도 관리
👥 체계적 커리큘럼
📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작
'3. 선택하고 결정하기 (조건문) > 3.2 여러 선택지 중에서 고르기 (switch)' 카테고리의 다른 글
| 3.2.3 `default` - switch문의 마지막 안전망 (0) | 2025.06.30 |
|---|---|
| 3.2.1 switch 기본 사용법 - 여러 개의 문을 깔끔하게 열어보는 열쇠 (0) | 2025.06.30 |