52. 자바스크립트 고급 조건문 패턴 (Advanced Conditional Patterns)

고급 조건문 패턴 (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, 객체 맵, 논리 연산자 등 다양한 방법을 코드와 함께 다뤘으니, 이를 활용해 더 나은 코드를 작성해보자.