TypeScript에서 함수를 정의하는 두 가지 주요 방식의 장단점을 설명해드리겠습니다:
function 키워드 사용:
function add(a: number, b: number): number {
return a + b;
}장점:
호이스팅(hoisting)이 되어 함수를 선언 전에도 호출 가능
this 바인딩이 동적으로 이루어짐 (메서드로 사용할 때 유용)
코드가 더 명시적이고 읽기 쉬움
재귀 함수 작성이 더 자연스러움
제네릭 타입 사용이 더 직관적
const 화살표 함수:
const add = (a: number, b: number): number => {
return a + b;
};장점:
this가 렉시컬 스코프로 바인딩됨 (콜백 함수에서 유용)
더 간결한 문법 (특히 한 줄 함수의 경우)
변수 재할당 방지
클로저(closure)를 더 명확하게 표현
React 컴포넌트나 콜백에서 더 자연스러운 사용
일반적인 사용 권장사항:
다음의 경우 function 키워드 사용:
클래스의 메서드
독립적인 유틸리티 함수
재귀 함수
제네릭 함수
this 컨텍스트가 중요한 경우
다음의 경우 화살표 함수 사용:
콜백 함수
이벤트 핸들러
React 컴포넌트의 메서드
간단한 한 줄 함수
부모 스코프의 this를 유지해야 하는 경우
결론적으로, 두 방식 모두 각자의 용도가 있으며 상황에 따라 적절한 방식을 선택하는 것이 좋습니다. 특히 프레임워크나 라이브러리를 사용할 때는 해당 커뮤니티의 컨벤션을 따르는 것이 좋습니다.
반응형
