간단한 함수 작성 및 호출
함수는 프로그래밍의 기본 구성 요소 중 하나입니다. 타입스크립트에서 함수를 작성하고 호출하는 방법을 살펴보겠습니다.
함수 선언문과 표현식 차이점
타입스크립트에서 함수를 선언하는 두 가지 주요 방법은 함수 선언문과 함수 표현식입니다:
// 함수 선언문
function add(x: number, y: number): number {
return x + y;
}
// 함수 표현식
const subtract = function(x: number, y: number): number {
return x - y;
};
// 화살표 함수 표현식
const multiply = (x: number, y: number): number => x * y;
함수 선언문은 호이스팅의 영향을 받지만, 함수 표현식은 그렇지 않습니다. 따라서 함수 선언문은 코드의 어느 위치에 있더라도 호출할 수 있지만, 함수 표현식은 선언된 후에만 사용할 수 있습니다.
매개변수와 반환 값에 대한 타입 지정
타입스크립트에서는 함수의 매개변수와 반환 값을 명시적으로 타입을 지정할 수 있습니다:
function greet(name: string): void {
console.log(`Hello, ${name}!`);
}
function add(x: number, y: number): number {
return x + y;
}
function getFullName(firstName: string, lastName?: string): string {
return firstName + (lastName ? " " + lastName : "");
}
이렇게 타입을 지정하면 함수의 의도를 명확히 하고, 런타임 오류를 방지할 수 있습니다.
기본값을 가진 매개변수 사용법
타입스크립트에서 함수 매개변수에 기본값을 지정할 수 있습니다:
function power(base: number, exponent: number = 2): number {
return Math.pow(base, exponent);
}
console.log(power(5)); // 25
console.log(power(5, 3)); // 125
이렇게 하면 함수를 호출할 때 해당 매개변수를 생략할 수 있습니다.
함수 호출과 결과 출력 방법
함수를 호출하고 결과를 출력하는 방법은 다음과 같습니다:
// 함수 호출
const result = add(5, 3);
console.log(result); // 출력: 8
// 결과를 변수에 할당
let name = getFullName("John");
console.log(name); // 출력: John
// 결과를 직접 사용
console.log(greet("Alice")); // 출력: Hello, Alice!
// 함수의 반환 값을 다른 함수에 전달
function double(x: number): number {
return x * 2;
}
console.log(double(add(5, 3))); // 출력: 16
// 화살표 함수와 함께 사용
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // 출력: [2, 4, 6, 8, 10]
이러한 방식으로 타입스크립트에서 함수를 작성하고 호출할 수 있습니다. 타입 지정은 코드의 안정성을 높이고, IDE의 자동 완성 기능을 향상시키며, 팀원 간의 소통을 돕는 데 큰 도움이 됩니다.
추가 팁:
함수 오버로딩: 여러 개의 함수 시그니처를 정의하여 같은 이름의 함수에 다양한 매개변수 집합을 허용할 수 있습니다.
제네릭 함수: 재사용 가능한 함수를 만들 때 유용합니다.
function identity<T>(arg: T): T {
return arg;
}
- 비동기 함수: async와 await를 사용하여 비동기 코드를 동기적으로 작성할 수 있습니다.
async function fetchData(url: string): Promise<string> {
const response = await fetch(url);
return response.text();
}
'JavaScript > TypeScript' 카테고리의 다른 글
tsc 명령어 사용법[TypeScript] (0) | 2024.12.19 |
---|---|
TypeScript - ECMAScript 표준과의 관계 (0) | 2024.12.19 |
TypeScript - 브라우저 호환성 (0) | 2024.12.18 |
타입스크립트: 정적 타입 체크의 이점 (0) | 2024.12.18 |
TypeScript: JavaScript의 확장 (0) | 2024.12.18 |