TS013. 타입스크립트의 문장(statement)과 표현식(expression)

타입스크립트 함수의 Statement 와 Expression

문 (Statement)

• 타입스크립트에서도 자바스크립트처럼 함수를 Statement 와 Expression 으로 표기할 수 있다.
• 보통 statement 에서는 일반 함수를 선언하는 것과 마찬가지로 표기한다.
• 매개변수의 반환 타입을 표기하고 반환 타입은 타입 추론에 의해 판별된다.
  • 단, 재귀 함수이거나 로직이 복잡할 때는 반환 타입을 적절하게 추론하지 못해낼 수 있다.
• Javascript 와 마찬가지로 호이스팅이 일어난다.
• 함수에 이름이 있으므로 디버깅이 더 쉬워진다.
• function 은 자바스크립트에서 기본적으로 무한 중복 선언이 가능하기 때문에 스코프를 제대로 관리해야 한다.

// statement (문장)
function foo(x: number, y: number) {
  return x + y;
}

표현식 (Expression)

• 표현식은 const 나 let 으로 변수 혹은 상수를 선언하고 = 으로 함수 자체를 할당시켜 표기한다.
• 반환 타입이 추론되는 것은 문과 동일하다.
• IIFE 로 사용할 수도 있고, 함수가 인수로 전달되거나 콜백으로 사용되는 시나리오에서도 재활용 가능하다.
• 함수형 프로그래밍 패턴을 잘 지원한다.
• 호이스팅이 없다.
• 함수의 이름 지정이 필요하지 않은 인라인 및 콜백 함수에 유용하다.

// expression (표현식)
const fooExp = (x: number, y: number) => x + y;
const fooExp2 = function (x: number, y: number) {
  return x + y;
};

Statement 의 사칙연산 예제

function plus(x: number, y: number): number {
  return x + y;
}
function minus(x: number, y: number): number {
  return x - y;
}
function multiply(x: number, y: number): number {
  return x * y;
}
function devide(x: number, y: number): number {
  return x / y;
}

Expression 의 사칙연산 예제

• statement 와 달리 expression 에서는 함수 시그니처 타입을 한번 정의하고 계속 재활용할 수 있다.

type CalcType = (x: number, y: number) => number;

const plusExp: CalcType = (x, y) => x + y;
const minusExp: CalcType = (x, y) => x - y;
const multiplyExp: CalcType = (x, y) => x * y;
const devideExp: CalcType = (x, y) => x / y;

const plusExp2: CalcType = function (x, y) {
  return x + y;
};
const minusExp2: CalcType = function (x, y) {
  return x - y;
};
const multiplyExp2: CalcType = function (x, y) {
  return x * y;
};
const devideExp2: CalcType = function (x, y) {
  return x / y;
};