[리팩토링]Replace switch statement with Object

참고한 글

https://ultimatecourses.com/blog/deprecating-the-switch-statement-for-object-literals

 

아래와 같은 코드에서 보통 switch case 문을 사용해서 개발을 한다.

function getDrink (type) {
  if (type === 'coke') {
    type = 'Coke';
  } else if (type === 'pepsi') {
    type = 'Pepsi';
  } else if (type === 'mountain dew') {
    type = 'Mountain Dew';
  } else if (type === 'lemonade') {
    type = 'Lemonade';
  } else if (type === 'fanta') {
    type = 'Fanta';
  } else {
    // acts as our "default"
    type = 'Unknown drink!';
  }
  return 'You\'ve picked a ' + type;
}

이렇게 특정 상태에 따라서 동작이 달라지는 경우 if 문을 쓰면 코드가 길어진다.

그리고 type에 대해서 직접 문자열 값을 적는 것은 오타의 위험이 있다.

 

아래 처럼 switch case 문을 사용하면 각각의 case 에 맞춰서 더 편리하게 코드를 작성 할 수 있다.

var type = 'coke';
var drink;
switch(type) {
case 'coke':
  drink = 'Coke';
  break;
case 'pepsi':
  drink = 'Pepsi';
  break;
default:
  drink = 'Unknown drink!';
}
console.log(drink); // 'Coke'

그런데 여기엔 문제가 있다.

계속 break 문을 붙여줘야 한다. 그리고 대부분의 자바스크립트 코드는 () 괄호를 사용한다. 그런데 switch case 만 {} 를 사용한다. 

자바 스크립트에서는 json 형태의 Object를 아주 편리하게 다룰 수 있다.

이걸 사용하면 switch case 문보다 간결하게 케이스를 나눌 수 있다.

function getDrink (type) {
  var drinks = {
    'coke': 'Coke',
    'pepsi': 'Pepsi',
    'lemonade': 'Lemonade',
    'default': 'Default item'
  };
  return 'The drink I chose was ' + (drinks[type] || drinks['default']);
}

var drink = getDrink('coke');
// The drink I chose was Coke
console.log(drink);

이렇게 getDrink 함수를 만들고 type을 보낸다.

drinks[type]을 사용하면 바로 원하는 케이스 값을 얻을 수 있다.

 

이걸 더 줄일 수도 있다.

function getDrink (type) {
  return 'The drink I chose was ' + {
    'coke': 'Coke',
    'pepsi': 'Pepsi',
    'lemonade': 'Lemonade'
  }[type];
}

여기서 조금 더 확장하면 json의 값 부분에 함수를 적을 수도 있다.

case에 따른 동작을 바로 정의하는 것이다.

var type = 'coke';

var drinks = {
  'coke': function () {
    return 'Coke';
  },
  'pepsi': function () {
    return 'Pepsi';
  },
  'lemonade': function () {
    return 'Lemonade';
  }
};

이렇게 바뀌었다면 drink를 호출하는 부분이 바뀌어야 함수를 쓸 수 있다.

 

drinks[type]();

 

함수 선언을 다른곳에 한다면 더 깔끔하게 쓸 수 있다.

 

const funA = () => {
    return 'hello a';
}
const funB = () => {
    return 'hello b';
}
const funC = () => {
    return 'hello c';
}

const method = () => {
    const json = {
        'A': funA(),
        'B': funB(),
        'C': funC()
    }
    console.log(json['A']);
}

method();

funA의 return 값인 아래 문구가 출력되는 것을 확인 할 수 있다.

hello a