본문 바로가기
JavaScript/TypeScript

간단한 함수 작성 및 호출(TypeScript)

by GangDev 2024. 12. 19.

간단한 함수 작성 및 호출

함수는 프로그래밍의 기본 구성 요소 중 하나입니다. 타입스크립트에서 함수를 작성하고 호출하는 방법을 살펴보겠습니다.

함수 선언문과 표현식 차이점

타입스크립트에서 함수를 선언하는 두 가지 주요 방법은 함수 선언문과 함수 표현식입니다:

// 함수 선언문
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의 자동 완성 기능을 향상시키며, 팀원 간의 소통을 돕는 데 큰 도움이 됩니다.

추가 팁:

  1. 함수 오버로딩: 여러 개의 함수 시그니처를 정의하여 같은 이름의 함수에 다양한 매개변수 집합을 허용할 수 있습니다.

  2. 제네릭 함수: 재사용 가능한 함수를 만들 때 유용합니다.

function identity<T>(arg: T): T {
  return arg;
}
  1. 비동기 함수: async와 await를 사용하여 비동기 코드를 동기적으로 작성할 수 있습니다.
async function fetchData(url: string): Promise<string> {
  const response = await fetch(url);
  return response.text();
}