[JavaScript][clean-code] Lookup Table

* lookup table (순람표)

• key와 value로 관리된 배열이 나열된 형태이다.
• excel의 lookup을 생각하면 된다.

* 일반적인 if else예시

function getUserType(type) {
  if (type === 'ADMIN') {
    return '관리자';
  } else if (type === 'INSTRUCTOR') {
    return '강사';
  } else if (type === 'STUDENT') {
    return '수강생';
  } else {
    return '해당 없음';
  }
}

- 이렇게 if else가 길어질 경우 switch case를 사용하는것을 권한다.

* switch case예시

function getUserType(type) {
  switch(key) {
    case 'ADMIN':
      return '관리자';
    case 'INSTRUCTOR':
      return '강사';
    case 'STUDENT':
      return '수강생';
    default:
      return '해당 없음';
  }
}

* Lookup table을 사용한 예시

function getUserType(type) {
  const USER_TYPE = {
    ADMIN : '관리자',
    INSTRUCTOR : '강사',
    STUDENT : '수강생',
  };

  return USER_TYPE[type] || '해당 없음';
}

• object lookup table로 변경이 된 내역 분기문이 객체의 key와 value로 이루어져있다.
• USER_TYPE라는 상수의 의미인 snake case로 작성이 되어있다.
• 매개변수로 USER_TYPE의 요소에 하나하나 접근한다.
• || (or) 단축평가를 이용하여서 해당 객체에 없는값이 나오게 되면 '해당 없음'을 반환해준다.
• ?? nullish를 이용해서 0과같은 값에도 대응할 수 있게 해준다.
• 혹은 아래의 예시와 같이 해주어도 된다.

function getUserType(type) {
  const USER_TYPE = {
    ADMIN : '관리자',
    INSTRUCTOR : '강사',
    STUDENT : '수강생',
    UNDEFINED : '해당 없음',
  };

  return USER_TYPE[type] ?? USER_TYPE['UNDEFINED'];
}

// 바로 return하는 방식으로도 가능
function getUserType(type) {
  return (
    {
      ADMIN : '관리자',
      INSTRUCTOR : '강사',
      STUDENT : '수강생',
    }[type] ?? '해당 없음'
  );
}

 

* 제일 좋은 방법은 상수를 별도의 파일에 보관한다.

// 상수의 정보가 포함된 파일
import USER_TYPE from './constants/..some.js'

function getUserType(type) {
  return USER_TYPE[type] || USER_TYPE.UNDEFINED;
}

 

(결론적으로)

• Lookup table은 자바스크립트의 Computed Property Name을 활용해서 불필요한 분기문을 줄일 수 있었던 예시이고 현업에서 많이 사용할 수 도 있다. 
• 상수를 잘 활용해주는게 중요하다. 상수를 활용해서 Lookup Table과 객체를 잘 엮어서 사용하면 유연하게 작성할 수 있다.