함수 스타일 가이드: 함수 표현식 vs 화살표 함수

[ImJaeOne]

프로젝트를 진행하면서 함수 선언식과 화살표 함수 중 어떤 것을 사용할지 고민되는 경우가 많습니다. 각각의 함수 스타일은 장단점이 있으며, 상황에 따라 적절한 선택이 필요합니다.

예를 들어, 컴포넌트는 화살표 함수를 사용하면 간결하고 가독성이 좋으며, this 바인딩 문제도 없어 효율적입니다. 반면, 통신 로직과 같이 복잡한 로직이나 클래스 메서드를 정의할 때는 함수 선언식이 더 적합할 수 있습니다. 이러한 선택은 코드 흐름에 영향을 미칠 수 있기 때문에, 어떤 방식이 더 적합할지 고민해보는 과정이 중요합니다.

이와 같은 고민을 바탕으로 discussion을 생성해봤습니다!
좋은 의견 남겨주시면 좋을 것 같습니다~😁

[choichangyeon]

제가 처음 이 얘기를 꺼냈을 때 호이스팅에 대해서도 얘기한 적이 있는데
함수 표현식에 경우 호이스팅이 불가능 합니다!
함수 선언식이 가능한 방식입니다.

그렇기 때문에 함수 선언식으로 설명드리자면

// 함수 선언식
function getTriangleArea (base, height) {
  let triangleArea = (base * height) / 2;
  return triangleArea;
}

해당 함수 처럼 직접적으로 변수를 입력해서 사용하는 방식입니다.
저희가 함수를 코드 상단에서 사용하고, 하단에 선언하는 경우엔 함수 선언식 외에는 오류가 나기 때문에
해당 방식이 이점이 있다는 걸 알려드리고 싶습니다!

[parkminjo]

이 부분에 대해 생각을 해봤는데, 호이스팅이 필요한 이유도 궁금합니다!
코드를 작성할 때 순차적인 흐름을 가져간다면, 함수를 호출하기 전에 함수를 먼저 선언하게 될텐데
어떤 상황에서 함수를 선언하기 전에 호출을 하는지 궁금합니다.

[ImJaeOne]

호이스팅의 관점해서 찾아보셨네요!
컴포넌트가 선언된 위치보다 위에서 해당 컴포넌트를 사용할 예정이라면 저도 창연님의 의견에 동의합니다!
하지만 저는 컴포넌트가 선언되는 위치는 코드의 최하단에 위치 될 것이기 때문에 이 부분은 괜찮다고 생각했습니다.
따라서 this를 사용할 경우가 많지는 않겠지만 자동으로 this를 바인딩 해준다는 점에서 화살표 함수를 이용하면 좋겠다고 생각했습니다!

[parkminjo]

저는 화살표 함수로 통일하는 것이 좋다고 생각합니다.
제일 큰 이유는 '간결성'때문입니다.
function을 작성할 필요없이 const 함수명 = () => {};으로 손쉽게 함수를 생성할 수 있다는 점에서 매우 간단하게 로직을 작성할 수 있습니다.
해당 로직이 함수인가 아닌가는 이름을 통해 쉽게 알 수 있다고 생각합니다.

재원님이 이미 말씀해주시는 것처럼 화살표 함수는 외부 this를 참조하기 때문에 컴포넌트에서 this 바인딩을 할 필요도 없어집니다.

참고 자료
화살표 함수의 장점

[hye410]

저는 컴포넌트는 선언형 함수, 그 외의 함수들은 화살표 함수를 사용하는 것이 좋을 거 같습니다.
이유는 다음과 같습니다.

1. 선언형 함수는 호이스팅이 적용된다.

컴포넌트는 보통 최상단에서 정의되고 사용되기 때문에 이 특성이 문제가 되지 않습니다.
하지만 다른 함수들도 선언형 함수를 사용한다면 호이스팅이 될 텐데
신경써서 함수 순서를 지키지 않을 경우, 함수 호출이 함수 선언보다 먼저 가능해 진다는 문제가 있습니다.
기능 상에는 문제가 없겠지만 코드를 읽는 사람이 위에서 아래로 읽기 때문에 함수가 정의된 후 사용이 되는 것이 자연스러운 흐름이라고 생각합니다.

또한, 일반 함수도 같이 선언형 함수로 정의한다면 만약 일반 함수를 컴포넌트 밖에 선언하게 될 경우에
컴포넌트와 일반 함수를 한 번에 쉽게 파악하기가 힘들 수도 있다는 생각이 들었습니다.

2. 화살표 함수는 특정 경우에서 return문을 생략할 수 있습니다.
   따라서 함수를 정의할 때 조금 더 깔끔한 코드 작성이 가능합니다.

3.화살표 함수는 선언형 함수와는 달리 같은 이름의 매개변수를 허용하지 않습니다.
화살표 함수는 같은 매개변수명을 허용하지 않음으로써, 실수로 변수를 덮어쓰는 것을 방지하고 가독성을 높인다는 장점이 있습니다.

[ImJaeOne]

화살표 함수는 선언 전에 사용할 수 없으며 const로 선언된 변수처럼 TDZ(Temporal Dead Zone)의 영향을 받습니다.

따라서, 일반적으로 아래와 같은 코드에서는 오류가 발생해야 합니다.

const IntroPage = () => {
  return (
    <div>
      <MyTest />
    </div>
  );
};

export default IntroPage;

const MyTest = () => {
  return <div>MyTest</div>;
};

하지만 위의 코드는 정상적으로 동작합니다.
그 이유는 렌더링 타이밍 때문입니다.
React는 컴포넌트를 실행할 때 return 내부를 평가하므로, IntroPage가 실행되는 시점에서는 <MyTest />가 이미 정의되어 있습니다.
따라서 <MyTest />를 호출할 때 오류 없이 정상적으로 동작합니다.
즉, 호이스팅 덕분이 아니라 React의 평가 순서 덕분에 실행되는 것이므로, 호이스팅 때문에 함수 선언식을 써야 한다는 관점은 가자시 않으셔도 좋을 것 같습니다!