else if 피하기

ljjunh·2024년 11월 15일

clean-code-javascript

목록 보기

14/38

1. ⚠️ 흔히 발견되는 문제 코드

const x = 1;

if (x >= 0) {
    console.log('x는 0과 같거나 크다');
} else if (x > 0) {
    console.log('x는 0보다 크다');
}

1.1 🤔 Promise와의 혼동

else-if를 Promise의 then 체이닝처럼 생각하는 경우가 있음

// Promise의 then 체이닝
.then.then.then.catch
// ➡️ 각각의 then이 순차적으로 실행됨

하지만 else-if는 완전히 다른 방식으로 동작함

2. else-if의 실제 동작

const x = 1;

if (x >= 0) {
    console.log('x는 0과 같거나 크다');
} else {
    if (x > 0) {
        console.log('x는 0보다 크다');
    }
}

else-if는 단순히 else 안에 if문이 있는 구조
위의 두 코드는 논리적으로 완전히 동일
즉, else-if는 첫 조건이 false일 때만 실행

3. 💡else-if 사용의 문제점

명확하지 않은 조건 처리
- else-if를 계속 사용한다는 것은 조건에 대해 명확하게 생각하지 못하고 있는 것일수도 있다
코드 복잡도 증가
- else-if가 늘어날수록 switch-case문과 다를 바 없어짐
- 오히려 switch-case가 더 명확함

4. ✨ 더 나은 해결책

const x = 1;

// 👍 독립적인 조건문으로 분리
if (x >= 0) {
    console.log('x는 0과 같거나 크다');
}
if (x > 0) {
    console.log('x는 0보다 크다');
}

장점

각 조건이 명확하게 분리됨
조건의 의도가 더 잘 드러남
불필요한 중첩을 피할 수 있음

5. ⚠️ else-if 사용을 피해야 하는 이유

논리적 모호성
1. else-if 는 조건들 간의 관계를 모호하게 만듦
2. 조건의 우선순위가 암묵적으로 존재
유지보수의 어려움
1. 새로운 조건을 추가할 때 기존 로직에 영향을 줄 수 있음
2. 디버깅이 복잡해짐
확장성 문제
1. else-if가 늘어날수록 코드의 복잡도가 증가
2. 조건 추가,수정 시 전체 로직을 검토해야 함

6. 🔄 조건이 많은 경우 대안: switch-case 활용

const status = 'SUCCESS';

// 👍 명확한 switch-case 구문
switch(status) {
    case 'SUCCESS':
        handleSuccess();
        break;
    case 'ERROR':
        handleError();
        break;
    case 'LOADING':
        handleLoading();
        break;
    default:
        handleDefault();
}