본문 바로가기
TypeScript

[TypeScript] if/else, switch 대신 객체 리터럴 패턴 활용

by spare8433 2024. 7. 3.

객체 리터럴 패턴을 활요한 조건문 로직 구현

특정 조건에 따라 각기 다른 로직을 구현할 경우 if/else 혹은 switch 를 활용하는 방식이 기본적이나 객체 리터럴 방식으로 구현 시 장단점에 대해 정리해보려 한다.



간단 예시

type  SelectionType = "A" | "B" | "C"

function testObjPattern(selection:SelectionType) {
  const  ObjPattern:Record<SelectionType, () => string> = {
    A: () => "apple",
    B: () => "bear",
    C: () => "car"
  }
  return  ObjPattern[selection]
}



코드 설명

특정 조건에 따라 실행될 로직을 리터럴 형식의 객체안에 로직을 구현하고, 실제 사용하기 위해서는 객체에 대괄호 표기법 (Bracket Notation) 으로 key 값으로 접근해 조건에 맞는 로직이 실행되는 구조



장점 (개인적인 관점 포함)

  1. 가독성
    로직 선언 부분과 실행 부분이 나눠져 가독성이 좋음
  2. 확실한 type 지정
    단점이자 장점으로 객체에 명확하게 type 을 지정해 이후 과정에서 type 이 명확하게 지정
  3. 재사용성
    코드 구조가 if/else switch 을 사용하는 것 보다 다양한 조건에 맞게 재사용하기 적절



단점 (개인적인 관점 포함)

  1. Type 정의의 어려움
    객체의 타입, 객체 접근시 사용할 key 값의 타입 등등 관련 타입을 명확하게 표기하지 않을 경우 type 이 모호해지며 이후 타입 캐스팅 하는 과정이 추가적으로 발생 할 수 있음
  2. 잘못된 접근에 따른 오류
    대괄호 표기법으로 특정 값을 넣어 접근하는 방식이기 객체의 키가 잘못 되는 경우 오류가 발생할 수 있음
  3. 구현의 한계
    로직이 복잡해지거나 객체의 key:value 값의 type 을 특정하기 어려워지는 경우 사용하기 어려움



결론

몇 가지 조건에 맞는 유사한 구조의 단순한 로직들을 구현할 때 사용하기 적절한 구조로 보임


if/else, switch 의 경우 로직 과정에서 명확하게 type 을 지정하지 못하는 반면(하려면 함수에 감싸서 매개변수 리턴 값 지정하는 정도??) 객체 리터럴 구조에서 미리 type 을 세팅해 둘 수 있는 것은 ts 를 사용하는 입장에서 큰 장점으로 다가옴