어느 순간부터 조건문을 쓸 때 주절(main clause)에 해당하는 케이스인지를 먼저 체크하는 것이 아니라

async function onSubmitForm () {
  if (isValidForm) {
    const formattedForm = formatForm()
    await submitForm(formatForm())
  } else {
    showErrorMsg()
  }
}

예외절에 해당하는지를  먼저 체크하기 시작했다.

async function onSubmitForm () {
    if (!isValidForm) return showErrorMsg()
    const formattedForm = formatForm()
    await submitForm(formatForm())
}

뿐만 아니라 if 와 꼭 한 세트처럼 썼던 else 로 예외처리를 하는 대신 예외절에대한 처리를 하면서 if 블록 안에서 바로 return을 시켰다. 강의를 들으며 따라 친 코드나 시니어 개발자들의 코드로부터 배운 것인데 nesting을 줄일 수 있어 가독성이 더 좋아졌고  또 예외 케이스를 함수 첫머리에서 모두 체크했다고 가정하고 주요 로직을 작성하기때문에 안심이 되었다.

그래서  그 뒤로 코드 리뷰를 할 때도 팀원이 if-else-return 구조로 짠 코드를 보면 자연히 if-return-return 구조로 바꾸고픈 충동이 들었다. 하지만 '가독성이 좋다'거나 '안심이 된다'와 같은 것이 다소 주관적인 인상 만 가지고 잘 돌아가는 코드를 고쳐쓰자고 하기에는 설득력이 없었다. 나 혼자 그렇게 생각하는건 아니었는지 Stack Overflow에도 if-else-return 가 나은지 if-return-return이 나은지에 대한 열띤 토론이 진행중이었다(🔗 "It is more efficient to use if-return-return or if-else-return?"). 해당 쓰레드에서는 두 스타일간의 성능 차이는 없다고 하는데 그럼에도 불구하고 if-return-return을 보다 나은 구조라고 보는 것 같았다.

좀 더 조사를 해보니 클린 코드와 리팩토링의 바이블과도 같은 책인 Martin Fowler의 『Refactoring』에서도 이 부분을 따로 언급하고있었다. 책에서도 nesting된 조건문은 리팩토링 대상이라고 말한다. 이유가 뭘까?  이번 기회에 if-else-return과 if-return-return의 차이를 보다 체계적으로 정리해 보았다.

if-return-return 구조의 if은  따로 이름까지 갖고 있다는걸 알게 됐다. 바로 "guard clause"라는 것이다. 입력값이 다 입력되지 않거나 유효한 양식이 아니거나 하는 예외 케이스가 실제로 작성한 폼을 제출하는 주절의 로직을 타지 못하도록 막는 문지기(guard)의 역할을 하는 절(clause)이라는 것이다. 이 guard clause를 쓰면 어떤 점에서 유리한걸까?

if-return-return

function doSomething () {
  if (!isInvalid) {
    return ERROR_MSG
  } 
  return VALUE
}

🟢 가독성이 높아진다: 앞서 말했던 것처럼 nesting을 줄여서 가독성이 좋아진다

🟢 함수가 하는 일이 무엇인지 파악하기 쉽다:  guard clause를 쓰면 예외절만 nesting하고 주절은 함수 본체에 바로 작성하기때문에 함수의 역할을 시각적으로 보다 잘 드러낸다.

🟢 코드간의 결합도(coupling)를 줄인다: if-return-return 구조에서는 더 이상 예외처리를 할 필요가 없어졌을 경우에 if절만 통째로 들어내면 된다. 반면 같은 로직을 if-else-return 구조로 작성했을 경우 앞의 if를 지우면 뒤의 else도 같이 지우고 else 절 안에 들어있던 코드들 전체를 괄호 바깥으로 꺼내는 등 보다 많은 코드를 고쳐야한다. 코드들간에 의존성, 그러니까 결합도(coupling)가 생긴 것이다. 이러한 의존성을 if-return-return 구조에서는 줄일 수 있다.

if-else-return

function doSomething () {
  if (isValid) {
    return VALUE
  } else {
    return ERROR_MSG
  }
}

❌ 주절과 예외절을 모두 nesting하면 함수가 실제로 어떤 일을 처리하고자 하는지가 눈에 잘 드러나지 않는다. 똑같이 들여쓰기된 두 절이 논리적으로도 동일한 위상을 가지는 것처럼 보이기 때문이다. 하지만 실제로 doSomething 함수가 하고싶은 일은 VALUE라는 유의미한 값을 리턴하는 것이지 에러 메시지를 던지는 것이 아니다. 예외절과 주절에 들어오는 코드가 많아질수록, 그리고 예외절 내에서 또 예외절이 중첩될 경우 함수의 역할을 파악하기가 점점 더 어려워진다.

❌ 예외절과 주절 사이의 연관성을 파악하기 힘들다: if절과 else 절은 논리적으로 연관되어있는데 if절과 else절 각각에 많은 양의 코드가 들어가있으면 둘 간의 논리적 연관을 파악하기 힘들고 코드 위아래를 왔다갔다 해야하는 추가적인 수고가 든다.

🟢 다만 Martin Fowler는 『Refactoring』에서 if-return-return구조와 if-else-return 구조를 사용하는 조건문은 각각 다른 의도를 가진다고 말하고있다. 실제로 if절과 else이 동일한 중요도를 가진다면  if-else-return구조를 체택할 수 있다는 것이다. 다만 그렇지 않은 경우에 if-else-return 구조는 리팩토링 대상에 해당한다.

Closing

자 이제 잘 기억해 놨다가 코드 리뷰때 써먹기만 하면 된다.

References

• "It is more efficient to use if-return-return or if-else-return?", Stack Overflow
• Refactoring: Improving the Design of Existing Code, Edition 2, Fowler, Martin. Addison-Wesley Professional, 2018. 695-706.