210806 개발기록: switch(true)

 

ToastUI 기술 블로그에 흥미로운 읽을거리가 많다. 그중에서 switch(true) 패턴에 관한 글이 흥미로워 회사 코드에 적용해보았다.

 

🌕  switch(true) 의 기본 원리

우선 switch(true) 패턴의 원리는, 기존 switch 문에 적용하던 값(value)을 표현식으로도 대체할 수 있다. 여기서 표현식이란 boolean 값을 리턴하는 식을 의미한다.

 

 

🌿  기본 switch(Value) 패턴

기존 switch문 인자의 Value는 특정한 값(value) 를 의미한다. Value 변수가 어떤 값을 가지냐에 따라 해당 case 문을 실행한다.

쉽게 생각하여 Value 값이 case의 값과 일치하는 것을 찾는 과정이다,.

// 기존 switch 문 

switch (Value){
  case "A":
    return "this is A";
  case "B":
    return "thid is B";
}

 

🌿  switch(true) 패턴

switch(true) 패턴은 특정 Value 값 대신 true를 받았다. Value가 true라고 생각해도 좋다.

case의 표현식이 true 를 리턴하면, Value 와 같은 값을 가지기 때문에 해당 case 문이 실행된다.

// switch(true) 패턴
const member = ["lion", "cat"]

switch (true){
  case member.includes("lion"): // true 이기 때문에 실행
    return "it is lion king"; 
  case member.includes("tiger"): // false 이기 때문에 실행X
    return "it is tiger king";
}

 

실전에서 적용한 코드 예시

switch(true) 패턴은 복잡한 if/else 구문을 대체하여 코드의 가독성을 높일 수 있다. 회사에서 if 가 떡칠된 코드를 찾아 이 패턴을 적용해봤다.

 

아래는 statusList 라는 배열이 어떤 원소를 포함 하는지에 따라 if 분기문을 타게 된다.

// 기존 if 조건문

if (statusList.includes("대기")) {
	...
}

if (statusList.includes("진행중")) {
	...
}

if (statusList.includes("완료")) {
	...
}

실제로는 if 문이 더 있지만 예시로 3개만 써두었다.

이를 아래처럼 수정하면 가독성 측면에서 더 직관적인 코드가 되었다. 

하지만, 이는 개인의 의견일 뿐이고, 다른 개발자들은 오히려 가독성이 좋지 않다는 의견도 많이 냈다.(참고: @SeanBarryUK 트윗, @JavaScriptDaily 트윗)

// switch(true) 패턴 적용 후

switch (true) {
   
    case statusList.includes("대기"):
        ...
        break;

    case statusList.includes("진행중"):
        ...
        break

    case statusList.includes("완료"):
        ...
        break

    default:
        ...
        break
}

 

 

필자가 느낀 이 패턴의 장점은 조건의 우선순위에 따른 결과를 내야 할 때다.

기획자가 이런 요구를 했다고 생각해보자.

만약 배열 statusList 가  '대기' 와 '진행중' 원소를 모두를 가진다면, "대기" 일때의 상황을 우선시 하여 실행시켜주세요!

 

if/else 문으로 이를 구현하려면 복잡한 or 조건을 떡칠해야겠지만, switch(true) 패턴에선,

그저 case "대기" 를  case "진행중" 보다 먼저 배치하면 해결된다. "대기"의 case 를 먼저 만나고 break 로 switch 문을 빠져나오면 그만이기 때문이다.

 

가독성도 중요한 문제이지만, 어떤 상황이나 기획 요구에 따라 적절히 선택하여 사용하면 좋은 코드를 작성할 수 있겠다.

 

 

Toast UI 기술블로그의 자바스크립트에서 switch (true) 패턴 사용하기 포스트를 참고하여 작성하였습니다.