삼항 연산자를 작성할 때, fallback으로 사용되는 값의 위치

[devKangMinHyeok]

A

const dateString = isUndefined(date) ? '날짜를 지정해주세요' : format(date)

B

const dateString = !isUndefined(date) ? format(date) : '날짜를 지정해주세요'

위와 같은 예제 코드가 있을 때, 이런 고민을 해보신 적 있으신가요?

저는 date를 formatting 한 dateString을 보여주고 싶습니다. 만약 date가 undefined 일때는 fallback을 보여주도록 하고 싶습니다.

이때 A처럼 작성할 수도 있지만, B 처럼 작성한다면, "원래 내가 얻고 싶은 값"을 먼저 읽을 수 있고, "만약 그럴 수 없는 상황일 때 fallback이 무엇인지" 의 순서로 읽을 수 있게 됩니다. 이게 코드를 읽을 때 조금 더 잘 읽힌다고 생각했습니다.

그런데 한편으로는 "원래 내가 얻고 싶은 값" -> "만약 그럴 수 없는 상황일 때 fallback이 무엇인지" 의 순서를 맞추기 위해, 불필요하게 조건에 ! 을 붙여야한다는 점이 아쉬운 부분이라고 생각했습니다.

물론 코드 구조에 따라서 조건에 들어가는 boolean 값을 따로 빼서 사용하거나, 함수라면 early return을 사용하는 등의 방식으로 위 문제가 없게 만들 수도 있겠습니다. 그런데, 만약 위와 같이 삼항으로 간단하게 코드를 구성하는 것이 최선이라 판단한 상황일 때 어떤 선택을 하시는지 생각해주시면 감사하겠습니다.

여러분들의 의견은 어떠신가요?

이 외에도 삼항 연산자를 사용하면서 가독성과 관련된 어떤 고민들을 하고 계신가요?

[kykim00]

개인적으로는 truthy 한 조건이 먼저 와야한다고 생각합니다.

그래서 B 보단 A가 더 낫다고 보고,

A 보다도 isDate(date) ? format(date) : "날짜를 지정해주세요" 가 더 낫다고 생각합니다.

[sunujun]

저는 아래와 같은 rule로 작성합니다.

condition ? valueIfTrue : valueIfFalse

1. 가독성 측면

• 코드를 왼쪽에서 오른쪽으로 읽을 때, 자연스럽게 "만약 ~라면 이것, 아니면 저것"이라는 흐름을 따릅니다.

2. 실용적 관점

// 일반적인 사용
const userName = user?.name ?? "Anonymous"
const status = isActive ? "Online" : "Offline"

// 중첩된 경우
const display = isDark 
  ? isPrimary ? "dark-primary" : "dark-secondary"
  : isPrimary ? "light-primary" : "light-secondary"

• fallback 값이 마지막에 위치함으로써, 코드의 주요 로직이 먼저 나오고 예외처리가 뒤에 오는 자연스러운 흐름을 만듭니다.
• 중첩된 삼항 연산자를 사용할 때도 이러한 패턴이 일관되게 유지되어 코드의 예측 가능성을 높입니다.

추가로 저는 삼항 연산자의 흐름을 생각하며 condition의 변수명을 정하는 편입니다.

[Johnyworld]

부정(isUndefined)을 부정(!)하는 것은 지양해야 한다고 생각하는 편이라 A 선택했습니다 :)