3항 연산자의 재발견
하얀마인드에서는 (중첩) 3항 연산자를 매우 광범위하게 사용한다. 처음의 시작은 아래의 Eric Eliott의 글의 조언에 따라 시도되었는데, 현재는 가능한 모든 경우에서 무조건적으로 쓰고 있다. 원글에서 소개한 사상에 추가로 하얀마인드에서의 도입 경험을 소개하고자 한다.
일단 개선된 3항 연산자를 쓰기 위한, 기본적인 형태는 아래와 같다.
// 구식 (한 줄 가로 쓰기)
const monthlyIncomeInDollars = isRedKiwiAppInstalled ? 10000 : 2000;// 신식 (여러줄 세로 쓰기)
const monthlyIncomeInDollars =
isRedKiwiAppInstalled
? 4000
: 2000;
우리과 기본 예제에서 보던 꼴과는 많이 다른데, 이 방식은 다음과 같은 엄청난 장점들이 있다.
더 빠르게 읽힌다
삼항 연산자를 한줄에 모두 쓰는 형태는 거짓일 때의 값을 알기 위해서, ‘어디인지 모를' 라인의 끝까지 시각적 탐색을 해야 한다. 아래 예제를 보자.
const isRedKiwiAppInstalled = false;// Version. 1 (Slow)
const monthlyIncomeInDollars = isRedKiwiAppInstalled ? Utility.calculateIncomeInDollarsAfterBecomingVeryRichGuy() : 2000;// Version. 2 (Fast)
const monthlyIncomeInDollars =
isRedKiwiAppInstalled
? Utility.calculateIncomeInDollarsAfterBecomingVeryRichGuy()
: 2000;
버전1은 ‘언제 나올지 모르는’ : 문자가 나올 때까지 왼쪽에서 오른쪽으로 쭉 시각적인 탐색을 해야 한다. 반면에, 버전2는 주어진 조건이 거짓임을 알면, 바로 ‘확정되어 있는' 두 줄 아래를 보면 결과를 바로 알아낼 수 있다. 요즈음 IDE는 모두 자동완성 기능을 지원하여서 더이상 짧은 변수명이 미덕이 아닌 세상이 되었기 때문에, 이러한 장점은 많은 경우에 더욱 도드라진다.
중첩 형태로 3항 연산자를 구사할 수 있다
3항 연산자는 보통 중첩해서 쓰지 않는 것이 과거의 통설이지만, 앞서 언급한 것과 같이 세로쓰기를 하면 그때부터는 자유로운 중첩이 가능해진다.
// 슬픈 과거
const monthlyIncomeInDollars = isRedKiwiAppInstalled ? isHeavyUser ?8000 : 4000 : 2000;// 벗어날 수 없는 슬픈 과거
const monthlyIncomeInDollars = isRedKiwiAppInstalled ? (isHeavyUser ? 8000 : 4000) : 2000;// 밝은 현실
const monthlyIncomeInDollars =
isRedKiwiAppInstalled
? isHeavyUser
? 8000
: 4000
: 2000;
위와 같이 쓰면, 가독성을 잃지 않은 상태로 얼마든지 중첩된 3항 연산자를 구사할 수 있다. 예시에는 2단계 중첩만 보여주었지만, 그 이상의 개수를 중첩해서 써도 적어도 if문으로 구성된 조건문보다는 훨씬 더 좋은 가독성을 보여준다. (Eric Eliott은 여기에 SNR이 더 줄기 때문에, 버그 발생 가능성도 줄어든다고 주장한다) 이 버전은 아래와 같이 한단계 더 개선이 가능하다.
// 중첩 3항 연산자 고수 버전
const monthlyIncomeInDollars =
isRedKiwiAppInstalled
? isHeavyUser
? 8000
: 4000
: 2000;처음에 보면 매우 불편할 수 있지만, 자세히 보면 불필요한 들여쓰기를 안 해도 곧 잘 읽힌다는 것을 깨달을 수 있다. 참고로 Eric Eliott은 엄밀히 들여쓰기가 필수가 아니기 때문에, 중첩(Nested)가 아닌 체이닝(Chaining)이라고 불러야한다고 주장하지만, 본 글에서는 편의상 ‘중첩’이라고 지칭하겠다.
이런 장점은 React.js에서 종종 등장하는 인라인으로 복잡한 조건을 계산해야되는 순간에 빛을 발한다. 아래와 같은 코드에서 중첩 3항 연산자가 없다면, 얼마나 짜증이 날지는 각자 각자 상상해보시길 바란다.
render() {
// ... return (
<View>
// ...
<SubView
monthlyIncomeInDollars={
isRedKiwiAppInstalled
? isHeavyUser
? 8000
: 4000
: 2000;
}
/>
</View>
);
}
하얀마인드 팀에서 3항 연산자를 위와 같이 사용하면서 발견한 단점은 다음과 같다.
- 일부 ESlint 룰들이 JSX와 함께 쓰이는 시나리오에서 들여쓰기를 잘 못 인식하는 경우가 있다. (아마 ESLint 룰이 업데이트를 거치면서 해결되리라 생각)
- 새로운 멤버가 들어올 때마다, 이렇게 쓰도록 설득과 안내를 해주어야 하는 번거로움이 있다. (이 글이 그 역할을 해줄 것이라 믿음)
보너스
JavaScript에서 가능한 경우 let을 const로 쓰는 것은 가독성 높은 코드를 작성하기 위해서 매우 권장할만한 습관이다. 그러나 그렇게 하기 위해서는 중첩 3항 연산자가 거의 필수적이다. 아래와 같은 경우, 중첩 3항 연산자를 쓰지 않고 let을 효과적으로 const로 대체할 수 없다.
let monthlyIncomeInDollars = 0;
if (isRedKiwiAppInstalled) {
if (isHeavyUser) {
monthlyIncomeInDollars = 8000;
} else {
monthlyIncomeInDollars = 4000;
}
} else {
monthlyIncomeInDollars = 2000;
}(주)하얀마인드에서는 외국어 학습 어플리케이션 레드키위(RedKiwi)를 만들고 있습니다. 함께 일하고 싶으신 분들은 누구든 contact@hayanmind.com으로 편하게 연락 부탁드립니다. 대표이사가 이틀 이내에 직접 답장드립니다.
- iOS: http://bit.ly/redkiwi-ios
- Android: http://bit.ly/redkiwi-android
