[JavaScript] 지저분한 if-else 쳐내기: Object(Map)를 활용한 조건문 리팩토링

프론트엔드 개발을 하다 보면 특정 조건에 따라 데이터를 필터링해야 하는 경우가 참 많습니다. 특히 연도별로 다른 코드나 데이터를 보여줘야 하는 상황이라면 어떨까요?

처음에는 간단한 if문으로 시작하지만, 연도가 쌓일수록 코드는 걷잡을 수 없이 길어집니다. 오늘은 이렇게 길어지는 if-else 조건문을 객체(Object) 매핑을 통해 우아하게 리팩토링하는 방법을 알아보겠습니다.

🚨 문제 상황: 끝없이 늘어나는 if-else

예를 들어, 특정 사업 신청 페이지에서 선택한 연도(Year)에 따라 허용되는 사업 코드(Code) 목록이 다르다고 가정해 보겠습니다.

가장 직관적으로 작성하면 아래와 같은 코드가 나옵니다.

// 서버에서 받아온 전체 코드 리스트
var dcCodeList = data.dcCmncddtlCodeList;
var selectedYear = $('#years').val(); // 유저가 선택한 연도

for (var i = 0; i < dcCodeList.length; i++) {
    var item = dcCodeList[i];
    var isTarget = false;

    // 😱 연도가 추가될 때마다 else if가 계속 늘어남!
    if (selectedYear === '2025' && ['AIN01', 'GRE09'].indexOf(item.code) !== -1) {
        isTarget = true;
    } else if (selectedYear === '2026' && ['AIN02', 'SMF01'].indexOf(item.code) !== -1) {
        isTarget = true;
    } 
    // ... 2027년, 2028년이 되면?

    if (isTarget) {
        // 조건에 맞는 option 태그 생성 로직...
    }
}

이 방식은 당장 돌아가긴 하지만, 치명적인 단점이 있습니다.

1. 가독성 저하: 로직과 데이터가 강하게 결합되어 있어 코드를 읽기 힘듭니다.
2. 유지보수 지옥: 내년에 2027년도 사업이 추가되면 또다시 소스 코드를 열어 else if를 추가해야 합니다. (실수할 확률 100%!)

---

💡 해결책: Object(Map)를 활용한 데이터 매핑

이럴 때 사용할 수 있는 멋진 패턴이 바로 객체(Object)를 Map처럼 활용하는 방법입니다. 조건(로직)과 데이터(연도별 코드)를 분리하는 것이 핵심입니다.

위 코드를 객체를 활용해 리팩토링해 보겠습니다.

// 1. 데이터(설정)와 로직의 분리
const yearCodeMap = {
    '2025': ['AIN01', 'GRE09'],
    '2026': ['AIN02', 'SMF01'],
    // 💡 2027년이 추가되면 여기만 수정하면 끝!
    // '2027': ['ABC01', 'XYZ02'] 
};

// 2. 선택된 연도 가져오기
const selectedYear = $('#years').val();

// 3. 해당 연도의 대상 코드 배열 가져오기 (없으면 빈 배열 반환)
const targetCodes = yearCodeMap[selectedYear] || [];

// 4. 깔끔해진 반복문
for (let i = 0; i < dcCodeList.length; i++) {
    let item = dcCodeList[i];

    // 타겟 코드 배열에 현재 코드가 포함되어 있는지 확인
    if (targetCodes.indexOf(item.code) !== -1) {
        // 조건에 맞는 option 태그 생성 로직...
        console.log("매칭 성공:", item.codeNm);
    }
}

✨ 무엇이 좋아졌을까요?

1. 로직과 데이터의 분리 (Separation of Concerns): 이제 어떤 연도에 어떤 코드가 들어가는지 확인하려면 복잡한 if문 속을 헤맬 필요 없이, 상단의 yearCodeMap 객체만 확인하면 됩니다.
2. O(1) 접근: if-else 체인을 위에서부터 순차적으로 검사하는 대신, yearCodeMap[selectedYear]를 통해 필요한 데이터에 즉시(O(1)) 접근하므로 이론적으로 성능도 더 좋습니다.
3. 확장성(Scalability): 새로운 연도 데이터가 추가되더라도 로직(for문 내부)은 단 한 줄도 수정할 필요가 없습니다. 단순히 객체에 키와 값만 추가하면 됩니다.