Early Return - 빠른 탈출을 통한 코드 가독성 상승

Early Return - 빠른 탈출을 통한 코드 가독성 상승
Photo by Tarik Haiga / Unsplash

Early return 은 적은 비용으로 코드 가독성을 올릴 수 있는 가장 쉬운 방법 중에 하나이다.

가독성은 "개발자가 이 코드를 읽기 쉬운가?"를 따지는 지표이며 높은 가독성은 나중에 기능을 추가해야 하거나 코드를 수정해야 할때 쉽고 빠르고 정확하게 할 수 있도록 해준다.

가독성이 좋지 못할경우 "처음부터 다시 만들어야겠다"라는 결론을 만들어 내기에 가독성을 높게 유지시키는 것은 개발자로서 숙명과 다름 없다.

자 그럼 좋지 못한 예제부터 알아보자.

    정답이기를 바라기

    이제 개발을 시작하는 사람이나 코드를 정리하는 법을 아직 모르는 개발자는 다음과 같이 코드를 짤 수 있다. - 바로 "입력이 정답이기를 바라는 방법"이다.

    function checkCorrectPassword (password) {
      if (isCorrectLength(password)) {
        if (isContainNumerics(password)) {
          if (isContainSpecials(password)) {
            console.log('Ok!')
          } else {
            throw new Error('Password must contain special characters')
          }
        } else {
          throw new Error('Password must contain numeric characters')
        }
      } else {
        throw new Error('Password too short')
      }
    }
    
    checkCorrectPassword('hello')
    

    이 코드에서 checkCorrectPassword 함수는 입력값 password가 맞는지를 if문 3개를 통해 체크한다.

    그림으로 나타내면 이렇게 생겼다.

    이는 상당히 보기 불편하다. 괄호 쌍을 색깔로 구분하는 플러그인을 깔더라도 if문과 else문 괄호 식별에 어려움을 겪게 된다.

    이런 코드는 다음과 같은 생각 때문에 발생한다:

    • 맞는 비밀번호가 뭘까?
    • 비밀번호가 길고
    • 비밀번호에 숫자가 있고
    • 비밀번호가 특수문자가 있다면..
    • 맞는 비밀번호지!

    즉, 함수 맨위 if문 3줄에만 집중했기 때문이다.

      if (isCorrectLength(password)) {
        if (isContainNumerics(password)) {
          if (isContainSpecials(password)) {

    자 그럼 이것을 똑바로 고쳐보자.

    조건의 역전

    위 함수에서 password는 사용자의 입력이다. 사용자의 입장에서 한번 생각해보자.

    웹사이트에서 회원가입을 진행하다가 조건에 맞지 않는 비밀번호를 입력해 경고 메시지를 본적이 있는가?

    그렇다. 물론 한번에 맞는 사용자도 있겠지만 틀린것을 잡아내는것이 주요점이지 맞는지 확인하는것이 아니다:

    • 맞는 비밀번호가 되려면...
    • 비밀번호가 짧아선 안되고
    • 비밀번호에 숫자가 없어선 안되고
    • 비밀번호가 특수문자가 없어선 안되야
    • 맞는 비밀번호지!

    틀린것을 버리기

    일단 콘셉을 그림으로 표현하면 다음과 같다:

    훨씬 깔끔해진 그림

    메인 스트림은 일자로 계속 유지하고 분기만 일으키는 것이다.

    그리고 이 그림을 코드로 표현하면 매우 깔끔해진다.

    function checkCorrectPassword (password) {
      if (!isCorrectLength(password)) {
        throw new Error('Password too short')
      }
    
      if (!isContainNumerics(password)) {
        throw new Error('Password must contain numeric characters')
      }
    
      if (!isContainSpecials(password)) {
        throw new Error('Password must contain special characters')
      }
    
      console.log('Ok!')
    }
    
    checkCorrectPassword('hello')
    

    이렇게 조건을 역전시켜 틀린것을 빠르게 버리는 방법을 early-return 이라고 하고 Early return을 습관화 하면 else문이 코드에서 자연스럽게 없어지는 no-else 를 만족할 수 있다.

    pmh-only/stamps /components/UserinfoForm/index.tsx L29-L45
    lofi-with-discord/LofiGirl src/events/onVoiceStateUpdate.ts L4-L21

    마치며..

    코딩은 배우면 일반인이라도 누구나 어떻게든 작동시킬 수 있다. 하지만 유지보수 가능한 코드를 짜는 일, 다시 말하자면 코드 퀄리티를 높이는 일은 코딩 경험을 많이 쌓아야 가능한 일이라고 생각한다.

    포스트를 작성하며 나의 오래된 코드들을 다시 한번 읽어보는 계기가 되었고 어떻게 하면 개선할 수 있을지 생각해보는 순간이 되었다.


    더 알고 싶거나 자신이 알고 있는 코드 퀄리티의 대한 꿀팁이 있다면 댓글로 알려주세요! 어법, 맞춤법 지적도 댓글로 부탁드립니다. - P

    구독하고 더 많은 포스트들을 즐겨보세요!

    무료 가입 후 이메일로도 포스트를 보내드려요!
    your_name@example.com
    구독하기