[Javascript] 클린 코드 - if문, switch문을 object로 리팩토링하기

조건이 많아지면 많아질수록 if문과 switch문은 보기 더러워진다.

 

조건이 값식문같은 명확한 조건이면, if문이나 switch문을 쓰지 않고도 구현이 가능하다.

 

코드가 클린해지게 리팩토링해보자.

 

 

if문

코드를 보기만 해도 머리 아프다.

내부로직을 생략해서 그렇지 아찔하다.

if (category === 'total') {
	// ...
} else if (category === 'a') {
	// ...
} else if (category === 'b') {
	// ...
} else if (category === 'c') {
	// ...
} else if (category === 'd') {
	// ...
} else if (category === 'e') {
	// ...
} else {
    // ...
}

 

 

Switch문

if문보다는 그래도 가독성이 좋아졌다.

switch(category) {
  case: 'total':
	// ...
    break;
  case: 'a':
	// ...
    break;
  case: 'b':
	// ...
    break;
  case: 'c':
	// ...
    break;
  case: 'd':
	// ...
    break;
  case: 'e':
	// ...
    break;
  default:
    // ...
}

 

 

Object의 key, value를 이용한 방식

k:v 형태로 object에 담아주면 된다.

 

value를 익명함수로 넣어줬는데, 저렇게 하면 함수만 저장되고 연산을 미리 하지 않는 lazy한 특징을 띄게 된다.

obj 뒤에 소괄호를 붙여줘야 비로소 연산을 하게 되고 값으로 리턴된다.

// else 상황까지 object에 넣는 경우
const obj = {
  total: () => { ... },
  a: () => { ... },
  b: () => { ... },
  c: () => { ... },
  d: () => { ... },
  e: () => { ... },
  default: () => { ... },
}

const result = obj[category]() || obj['default']();




// key에 'default' 문자열이 들어갈까 걱정된다면
const obj = {
  total: () => { ... },
  a: () => { ... },
  b: () => { ... },
  c: () => { ... },
  d: () => { ... },
  e: () => { ... },
}

const result = obj[category]() || { ... }; // 뒤에 오는 함수는 else일 때의 함수이다.

 

 

이 외에도 Map을 이용하면 더 깔끔하게 가져올 수 있다고 한다.

object 형식의 문제점은 key에 string, number 타입만 사용할 수 있지만,

Map을 이용해 구현하면 어떤것이든 key로 활용할 수 있다는 장점이 있다.

 

하지만 이러한 방식은 object literal의 prototype에 접근할 수 있다는 문제가 있기에 주의해서 사용하자.