먼저, 자바스크립트와 타입스크립트에서 함수를 정의하는 두 가지 주요 방법이 있어요.
바로 함수 선언문과 함수 표현식 입니다.
먼저 살펴보기
함수 선언문(Function Declarations)
함수 선언문은 함수 이름과 함께 정의되며, 가장 전통적인 방법으로 함수를 선언하는 방식입니다.
이 방식의 특징은 호이스팅으로 인해 함수가 정의된 위치와 상관없이 스크립트 내 어디서든 호출할 수 있다는 점입니다.
예제:
function addNumbers(a: number, b: number): number {
return a + b;
}
console.log(addNumbers(5, 3)); // 결과는 8함수 표현식(Function Expressions)
함수 표현식은 변수에 함수를 할당하는 방식으로, 함수는 익명일 수도 있고 명명될 수도 있어요.
함수 표현식은 코드가 해당 함수에 도달할 때까지 평가되지 않기 때문에, 선언 전에 사용하려고 하면 오류가 발생합니다.
예제:
const multiplyNumbers = function (a: number, b: number): number {
return a * b;
}
console.log(multiplyNumbers(4, 2)); // 결과는 8또는 화살표 함수를 사용한 더 간결한 함수 표현식:
const subtractNumbers = (a: number, b: number): number => a - b;
console.log(subtractNumbers(10, 6)); // 결과는 4이제 위에서 설명한 함수 표현식에 더 집중하여 살펴보겠습니다.
왜 코드 재사용성이 늘어나지?
const calculateVolume = function(width: number, height: number, depth: number): number {
return width * height * depth;
}
const calculateWeight = (mass: number, gravity: number = 9.81): number => {
return mass * gravity;
}여기서 calculateVolume과 calculateWeight는 함수 표현식으로 정의된 친구들이죠. TypeScript가 왜 함수 표현식을 더 선호할까요? 답은 심플합니다. 한 번 정의해두면, 그 타입을 다른 곳에서도 편하게 재활용할 수 있기 때문이에요.
예를 들어보겠습니다.
type OperationFn = (a: number, b: number) => number;
const add: OperationFn = (a, b) => a + b;
const subtract: OperationFn = (a, b) => a - b;이렇게 하면, 더하기와 빼기 기능을 하는 함수들을 같은 타입으로 관리할 수 있어서, 코드가 깔끔해지고 관리하기도 쉬워져요.
그리고 복잡한 로직을 포함하는 함수에도 함수 표현식이 진짜 유용한데요, 예를 들어 HTTP 요청을 처리하는 경우를 생각해봅시다.
const handleRequest: typeof fetch = async (url, options) => {
const response = await fetch(url, options);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
}여기서 fetch 함수의 타입을 활용해서 handleRequest 함수를 정의했죠.
이렇게 하면 코드도 짧아지고, 무엇보다 오류를 일으킬 만한 부분을 대폭 줄일 수 있어요.
간단하고 명확하게 처리할 수 있으니 나이스 😆 ~~~
결론
함수 표현식은 변수에 함수를 할당함으로써 정의되고, 화살표 함수를 통해 더 간결하게 표현할 수 있어요.
이러한 접근 방식은 특히 모듈화된 코드나 컴포넌트 기반 개발에서 함수의 재사용과 관리를 간편하게 해주며, 코드 전체의 안정성을 향상시킵니다.
따라서 TypeScript를 사용하는 프로젝트에서는 가능한 함수 표현식을 활용하여 보다 체계적이고 효율적인 코드 작성을 지향해야 합니다.
참고 자료)
이펙티브 타입스크립트
https://m.yes24.com/Goods/Detail/102124327
타입스크립트 핸드북
https://www.typescriptlang.org/docs/handbook/2/functions.html
DevCamp
https://devcamp.com/trails/introduction-typescript/campsites/typescript-closures/guides/function-declarations-vs-expressions
Inpa Dev(tistory)
https://inpa.tistory.com/entry/TS-%F0%9F%93%98-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%97%90%EC%84%9C-%ED%95%A8%EC%88%98-%EB%AC%B8%EB%B2%95-%EB%8B%A4%EB%A3%A8%EA%B8%B0-%F0%9F%92%AF-%EC%B4%9D%EC%A0%95%EB%A6%AC
김서현님(velog)
https://velog.io/@seobbang/TypeScript-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%ED%83%80%EC%9E%85-%EC%8B%9C%EC%8A%A4%ED%85%9C-3
