[JavaScript]
기초
- [JS] Js기초
- [JS] Js기초 변수
- [JS] Js기초 자료형
- [JS] Js기초 형변환
- [JS] Js기초 연산자
- [JS] Js기초 반복문
- [JS] Js기초 switch
- [JS] Js기초 function
- [JS] Js기초 객체
- [JS] Js기초 배열
중급
- [JS] Js중급 호이스팅(Hoisting)과 TDZ(Temporal Dead Zone)
- [JS] Js중급 생성자함수
- [JS] 객체 메소드(Object methods), 계산된 프로퍼티(Computed property)
- [JS] 심볼(Symbol)
- [JS] WeakMap WeakSet
- [JS] 숫자, 수학 method (Number, Math)
- [JS] 문자열 메소드(String methods)
- [JS] 배열 메소드(Array methods)
- [JS] 구조 분해 할당 (Destructuring assignment)
- [JS] 매개변수 리스트와 전개 문법(Rest parameters and spread syntax)
- [JS] 클로저(Closure)
- [JS] setTimeout / setInterval
- [JS] call / apply / bind
- [JS] 상속, 프로토타입(Prototype)
- [JS] 클래스(Class)
- [JS] 클로미스(Promise)
- [JS] 비동기 처리(Async/Await)
- [JS] Generator
- [JS] 메모리 릭(Memory Leak)
이제 switch문을 배워볼까?
if문의 사촌 같은 친구인데, 조건이 많을 때 더 깔끔하게 쓸 수 있어! 😎
1. 기본 switch문
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| let fruit = "사과";
switch (fruit) {
case "사과":
console.log("🍎 아삭아삭!");
break;
case "바나나":
console.log("🍌 달달해!");
break;
case "오렌지":
console.log("🍊 상큼해!");
break;
default:
console.log("🤔 어떤 과일이지?");
}
// 결과: 🍎 아삭아삭!
|
2. break 없이 쓰기 (의도적으로!)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| let grade = "A";
switch (grade) {
case "A":
console.log("와우! 최고등급!");
// break 없으니까 밑으로 쭉 내려감
case "B":
console.log("잘했어!");
// 여기도 break 없음
case "C":
console.log("합격!");
break;
default:
console.log("재시험...");
}
// 결과:
// 와우! 최고등급!
// 잘했어!
// 합격!
|
3. 여러 케이스를 하나로!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| let emoji = "🎮";
switch (emoji) {
case "⚽":
case "🎮":
case "🎨":
console.log("취미생활!");
break;
case "📱":
case "💻":
console.log("디지털기기!");
break;
default:
console.log("뭘까요?");
}
// 결과: 취미생활!
|
4. 실전 예제: 게임 캐릭터 상태!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| let status = "공격";
let character = "🦸♂️";
switch (status) {
case "공격":
console.log(`${character} 파이어볼! 발사!`);
break;
case "방어":
console.log(`${character} 방패 들기!`);
break;
case "회복":
console.log(`${character} 포션 마시기! (체력 +50)`);
break;
case "도망":
console.log(`${character} 도망가기! 🏃♂️`);
break;
default:
console.log(`${character} 멍때리기...`);
}
|
5. 월별 일수 확인하기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| let month = 2;
let year = 2024;
let days;
switch (month) {
case 2: // 2월은 특별 취급!
days = year % 4 === 0 ? 29 : 28;
break;
case 4:
case 6:
case 9:
case 11:
days = 30;
break;
default:
days = 31;
}
console.log(`${month}월은 ${days}일까지 있어요!`);
// 2024년 2월은 29일! (윤년이라서!)
|
꿀팁! 🍯
- if문이랑 비교
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| // if문으로 쓸 때
if (fruit === "사과") {
console.log("빨간색!");
} else if (fruit === "바나나") {
console.log("노란색!");
} else {
console.log("다른 색!");
}
// switch문으로 쓸 때 (더 깔끔하지 않아?)
switch (fruit) {
case "사과":
console.log("빨간색!");
break;
case "바나나":
console.log("노란색!");
break;
default:
console.log("다른 색!");
}
|
- 객체로 대체하기 (모던한 방법! 😎)
1
2
3
4
5
6
7
8
| // switch 대신 객체 사용하기
const fruitColors = {
사과: "빨간색",
바나나: "노란색",
오렌지: "주황색",
};
console.log(fruitColors[fruit] || "모르는 색!");
|
switch문은 이런 느낌이야! 조건이 딱딱 떨어질 때 쓰면 완전 좋아!
특히 메뉴 선택이나 상태 관리할 때 많이 쓴다구! 😉