고급 조건문 패턴 (Advanced Conditional Patterns)
자바스크립트에서 조건문은 프로그램 흐름을 제어하는 데 핵심적인 역할을 한다. 단순한 if-else 구조를 넘어 고급 패턴을 사용하면 코드의 가독성과 유지보수성을 높이고 성능을 개선할 수 있다. 고급 조건문 패턴의 개념과 다양한 접근법을 코드와 함께 단계적으로 알아보자.
조건문을 잘 활용하면 복잡한 로직도 간결하고 명확하게 정리된다. 기본부터 심화된 기법까지 차근차근 다뤄보자.
조건문의 기본 구조
자바스크립트에서 조건문은 주로 if, else if, else로 구성된다. 다음 코드를 보자:
const score = 85;
if (score >= 90) {
console.log("A");
} else if (score >= 80) {
console.log("B");
} else {
console.log("C");
} // "B"
이 방식은 직관적이지만 조건이 늘어나면 복잡해질 수 있다. 더 나은 방법을 찾아보자.
1. Early Return 패턴
Early Return은 조건이 충족되면 즉시 함수를 끝내며 불필요한 중첩을 줄이는 방식이다. 두 가지 접근을 비교해보자:
// 중첩된 구조
function checkUser(user) {
if (user) {
if (user.age >= 18) {
console.log("성인입니다.");
} else {
console.log("미성년자입니다.");
}
} else {
console.log("사용자가 없습니다.");
}
}
// Early Return 사용
function checkUserOptimized(user) {
if (!user) return console.log("사용자가 없습니다.");
if (user.age < 18) return console.log("미성년자입니다.");
console.log("성인입니다.");
}
checkUserOptimized({ "age": 20 }); // "성인입니다."
Early Return은 코드의 깊이를 줄여 이해하기 쉽게 만들고 불필요한 검사를 피한다.
2. 객체 맵(Object Map) 패턴
조건이 많을 때 if-else 대신 객체를 사용하면 로직이 간단해진다. 다음 코드를 보자:
// 긴 조건 분기
function getGrade(score) {
if (score >= 90) return "A";
else if (score >= 80) return "B";
else if (score >= 70) return "C";
else if (score >= 60) return "D";
else return "F";
}
// 객체 맵 적용
const gradeMap = {
90: "A",
80: "B",
70: "C",
60: "D",
0: "F"
};
function getGradeOptimized(score) {
for (const threshold in gradeMap) {
if (score >= threshold) return gradeMap[threshold];
}
}
console.log(getGradeOptimized(85)); // "B"
객체 맵은 조건을 데이터로 바꿔 관리하기 편리하게 만든다.
3. 삼항 연산자와 간소화
간단한 조건은 삼항 연산자(?:)로 줄일 수 있다. 다음 코드를 보자:
// 일반적인 분기
let message;
if (age >= 18) {
message = "성인";
} else {
message = "미성년자";
}
// 삼항 연산자 사용
const age = 20;
const messageOptimized = age >= 18 ? "성인" : "미성년자";
console.log(messageOptimized); // "성인"
삼항 연산자는 코드 길이를 줄이지만, 지나치게 중첩하면 읽기 어려울 수 있으니 적절히 사용하자.
4. 논리 연산자 활용
&&와 ||를 사용하면 조건문을 더 간결하게 표현할 수 있다. 다음 코드를 보자:
// 일반적인 조건
function greet(name) {
if (name) {
console.log(`안녕, ${name}!`);
} else {
console.log("안녕, 손님!");
}
}
// 논리 연산자 적용
function greetOptimized(name) {
console.log(`안녕, ${name || "손님"}!`);
}
greetOptimized("철수"); // "안녕, 철수!"
greetOptimized(); // "안녕, 손님!"
||는 기본값을 설정하는 데 유용하고, &&는 조건에 따른 동작을 간소화한다:
const user = { "active": true };
user.active && console.log("활성 사용자"); // "활성 사용자"
5. Switch 대체 패턴
switch 대신 객체 또는 함수 맵 으로 로직을 구성할 수 있다. 다음 코드를 보자:
// switch 사용
function getAction(command) {
switch (command) {
case "start":
return "시작";
case "stop":
return "정지";
default:
return "알 수 없음";
}
}
// 함수 맵 사용
const actions = {
"start": () => "시작",
"stop": () => "정지",
default: () => "알 수 없음"
};
function getActionOptimized(command) {
return (actions[command] || actions.default)();
}
console.log(getActionOptimized("start")); // "시작"
함수 맵은 동적인 로직을 추가하기 쉬워 유연성이 뛰어나다.
6. 패턴 매칭 스타일
자바스크립트는 공식 패턴 매칭을 지원하지 않지만, 객체 분해로 비슷한 효과를 낼 수 있다:
function describeUser({ age, name } = {}) {
return age >= 18 && name
? `성인 ${name}`
: age < 18 && name
? `미성년자 ${name}`
: "정보 없음";
}
console.log(describeUser({ age: 20, name: "영희" })); // "성인 영희"
구조 분해를 활용하면 조건과 데이터를 깔끔하게 연결할 수 있다.
7. 상태 기반 조건문
상태 객체를 사용해 조건문을 체계적으로 관리할 수 있다:
const state = {
"isLoggedIn": true,
"isAdmin": false,
"hasPermission": true
};
function checkAccess(state) {
if (!state.isLoggedIn) return "로그인 필요";
if (state.isAdmin) return "관리자 접근 허용";
if (state.hasPermission) return "일반 접근 허용";
return "접근 불가";
}
console.log(checkAccess(state)); // "일반 접근 허용"
상태 기반 접근은 복잡한 조건을 구조적으로 정리한다.
8. 다양한 상황에서의 활용
고급 조건문 패턴을 여러 상황에 적용한 코드를 살펴보자.
1. 사용자 권한 확인
const roles = {
"admin": () => "모든 권한",
"editor": () => "편집 권한",
"viewer": () => "보기 권한",
default: () => "권한 없음"
};
function getPermission(user) {
if (!user || !user.role) return roles.default();
return (roles[user.role] || roles.default)();
}
console.log(getPermission({ role: "editor" })); // "편집 권한"
2. 상태에 따른 출력
const renderContent = (status) => {
const contentMap = {
"loading": "로딩 중...",
"success": "데이터 로드 완료",
"error": "오류 발생"
};
return contentMap[status] || "알 수 없는 상태";
};
console.log(renderContent("success")); // "데이터 로드 완료"
성능과 가독성에 미치는 영향
고급 패턴은 코드의 성능과 가독성에 영향을 준다:
- 성능: 객체 맵은 O(1) 조회 속도를 제공하며, 긴 if-else나 switch보다 효율적일 수 있다.
- 가독성: 중첩을 줄이고 로직을 데이터로 변환하면 코드를 더 쉽게 파악할 수 있다.
Early Return과 객체 맵은 특히 자주 활용되는 패턴으로 주목할 만하다.
마무리
고급 조건문 패턴은 자바스크립트에서 코드 품질을 높이는 데 중요한 도구다. Early Return, 객체 맵, 논리 연산자 등 다양한 방법을 코드와 함께 다뤘으니, 이를 활용해 더 나은 코드를 작성해보자.
'코딩 공부 > 자바스크립트' 카테고리의 다른 글
| 54. 자바스크립트 스위치 문 활용 (Advanced Switch Statement Usage) (3) | 2025.03.18 |
|---|---|
| 53. 자바스크립트 루프 최적화 (Loop Optimization) (1) | 2025.03.17 |
| 51. 자바스크립트 배열 성능 최적화 (Array Performance Optimization) (2) | 2025.03.16 |
| 50. 자바스크립트 WeakSet과 WeakMap (WeakSet and WeakMap) (1) | 2025.03.15 |
| 49. 자바스크립트 Set과 Map (Set and Map) (0) | 2025.03.15 |