[Javascript] else if 대신 if return 사용하는 이유?

자바스크립트의 Airbnb 코드 컨벤션에 따르면 다음과 같습니다!

else if 블록 안에 return 구문이 있으면 여러 if 블록으로 나눠질 수 있습니다.

// bad
function cats() {
  if (x) {
    return x;
  } else if (y) {
    return y;
  }
}

// good
function cats() {
  if (x) {
    return x;
  }

  if (y) {
    return y;
  }
}

사실 이렇게 권장하는 이유가 분명이 있을 것 같은데요.. 아니면 정말 단순한 ‘컨벤션’ 즉 관행에 불과한 것일까요?

🤔 성능 차이?

얼핏 성능에 관련된 문제가 있다는 이야기를 들었습니다.. 혹시나 찾아봤는데, 아니더라구요. 컴파일러나 인터프리터에 의해 최적화되어 큰 영향을 받지 않는다는 것이었습니다.

사실 성능 문제를 논한다면, 이보다 더 중요한, 알고리즘과 캐싱, 메모리, 데이터 구조에 더 신경을 쓰는 것이 맞는 것 같습니다..! (본질에 집중하자!)

❗결국은 가독성, 가독성, 가독성

else if문을 사용하지 않는 이유는 결국 가독성이란 것입니다. 누군가는 “나는 else if 쓰는게 더 편하고 보기도 좋은데?”라고 한다면, 쓰시면 되겠죠..? 하지만 가독성이란 것은 개인의 판단으로 내릴 수 없는 것임을 인지하여야 한다 생각합니다.

아무튼 else if 문과 if return 에는 어떤 가독성 차이가 있는지 알아볼께요!

function cats() {
  if (x) {
    return x;
  } else if (y) {
    return y;
  }
}

이 코드를 보면, if문 뒤에 else if문이 위치해 있습니다. 그런데 보시면 이 둘의 들여쓰기 레벨이 다르다는 것을 보실 수 있습니다. 이는 블록의 연관성을 한눈에 파악하기에 힘들다는 단점이 있겠죠!

function cats() {
  if (x) {
    return x;
  }

  if (y) {
    return y;
  }
}

else if 문을 if return으로 변경한 모습입니다. 조건에 따른 블록이 분리되었다는 느낌이 눈에 띄시나요? 이 사소한 가독성의 차이가 결국엔 유지보수에 큰 도움을 준다는 사실입니다.

아래는 들여쓰기가 코드 가독성에 미치는 영향을 포스팅 한 내용입니다!

[개발 상식] 들여쓰기가 코드 가독성에 미치는 영향

조건문이 독립적으로 처리되어 있기에, 각 블록을 변경하는 것도 쉽겠구요. 에러를 처리하는 데도 이점을 가져다 준답니다!

😊결론!

성능 차이가 없는 대부분의 “코드 컨벤션”은 사실 주관적인 측면이 없지 않다고 생각해요. 그래도 이를 충실하게 따르는 개발자가 되어야 하는 이유로는, “코드 컨벤션이 가져오는 효율적인 개발 문화”라는 점이라 생각해요. 이 자체만으로 우리가 코드 컨벤션을 지켜야 하는 이성적인 이유가 될 수 있겠죠?