[Javascript] 매핑 객체 패턴으로 분기문 깔끔하게 사용하기 (Mapping Object Pattern)

매핑 객체 패턴으로 분기문 깔끔하게 사용하기 (Mapping Object Pattern)

"키-값 매핑"(Key-Value Mapping)이라고도 부를 수 있는 매핑 객체 패턴은  if-else문이나 switch-case문과 같은 분기처리가 가능한 문법 패턴입니다.

하지만 기존의 분기문 패턴에 비해 가독성이 뛰어나고 성능 면에서 효율이 더 좋아 요즘 애용하는 문법 패턴입니다.

매핑 객체 패턴의 특징

1. 명확한 의도 : if-else문이나 switch-case문에 비해서 가독성이 좋습니다.
2. 유연성 : 새로운 분기가 추가될 경우 객체 내에 키-값 쌍만 추가해 주면 됩니다.
3. 성능적 효율성 : 조건의 비교 없이 키를 통해 값을 가져올 수 있어서 성능면에서 효율적입니다.
4. 재사용성 : 기존의 분기문에 비해 객체를 여러 곳에서 재사용할 수 있습니다.

매핑 객체 패턴 활용하기

저는 주로 변수에 값을 할당하거나 간이 enum 클래스처럼 활용하곤 합니다.

 

기초적인 사용 방법은 아래와 같습니다.

매개변수를 받아서 각각 상황에 따른 값을 반환하는 경우를 예로 들어 볼게요.

먼저 전통적인 방식의 분기문입니다.

//if-else
function getClassByColor(color) {
    if (color === "green") {
        return "good";
    } else if (color === "yellow") {
        return "waring";
    } else if (color === "red") {
        return "danger";
    } else if (color === "gray") {
        return "info";
    } else {
        return "etc";
    }
}

//switch-case
function getClassByColor(color) {
    switch (color) {
        case "green" : 
            return "good";
            break;
        case "yellow" : 
            return "waring";
            break;
        case "red" : 
            return "danger";
            break;
        case "gray" : 
            return "info";
            break;
        default : 
            return "etc";
    }
}

다음은 매핑 객체 패턴을 적용한 경우의 코드입니다.

const classes = {
     green: "good",
    yellow: "warning",
       red: "danger",
      gray: "info",
}

function getClassByColor(color) {
    return classes[color] || "etc";
}

함수의 길이가 극적으로 짧아졌으며 classes 변수는 하나의 객체로서 재사용성을 확보하고 함수와의 결합도도 낮아집니다.

활용해보기

아래는 예제 코드들입니다.

const operations = {
       add: (a, b) => a + b,
  subtract: (a, b) => a - b,
  multiply: (a, b) => a * b,
    divide: (a, b) => b !== 0 ? a / b : 'Error: Division by zero',
};

function calculate(operation, a, b) {
  return (operations[operation] || (() => 'Invalid operation'))(a, b);
}

const dateFormats = {
  en: (date) => date.toLocaleDateString('en-US'),
  ko: (date) => date.toLocaleDateString('ko-KR'),
  fr: (date) => date.toLocaleDateString('fr-FR'),
};

function formatDate(date, lang) {
  return (dateFormats[lang] || dateFormats['en'])(date);
}

const discountStrategies = {
  regular: (price) => price, // 정가
  student: (price) => price * 0.8, // 20% 할인
  veteran: (price) => price * 0.7, // 30% 할인
};

function calculatePrice(price, userType) {
  const strategy = discountStrategies[userType];
  if (!strategy) throw new Error(`Unsupported user type: ${userType}`);
  return strategy(price);
}

const dashboardMapping = {
  admin: (user) => `Welcome ${user.name}, to the Admin Dashboard`,
  editor: (user) => `Hello ${user.name}, you have Editor privileges`,
  viewer: (user) => `Hi ${user.name}, enjoy viewing content`,
};

function getDashboard(role, user) {
  const handler = dashboardMapping[role];
  return handler ? handler(user) : `Sorry ${user.name}, Access Denied`;
}

 

확장성과 유지보수 면에서 매우 뛰어난 성능을 지니고 있으니 꼭 활용해 보셨으면 좋겠습니다.

감사합니다!