2023-03-06 타입스크립트 / 함수 /

함수 (Function)

• 기명 함수(named function)
• 익명 함수(anonymous function)

이를 통해 API에서 함수 목록을 작성하든 일회성 함수를 써서 다른 함수로 전달하든 애플리케이션에 가장 적합한 방법을 선택할 수 있습니다.

// 기명 함수
fucntion add(x, y) {
  return x + y;
}

// 익명 함수
let myAdd = function(x, y) { return x + y };

캡처(capture) : 함수는 함수 외부의 변수를 참조하는 경우의 변수

이것이 어떻게 작동하는지 (그리고 이 기술을 사용할 때의 장단점)를 이해하는 것은 이 본문의 주제를 벗어나는 것이지만, 이 메커니즘이 어떻게 작동하는지에 대한 확실한 이해는 JavaScript 및 TypeScript를 사용하는 데 있어 중요합니다.

let z = 100;

function addToZ(x, y) {
  return x + y + z;
}

z가 캡처인거네용.. 밖에 있는 값을 가져와서 씀 🤨

 

---

함수 타입 (Function Types)

함수의 타이핑 (Typing the function)

이전에 사용했던 예시에 타입을 더해보겠습니다.

function add(x: number, y: number): number {
    return x + y;
}

let myAdd = function(x: number, y: number): number { return x + y };

각 파라미터와 함수 자신의 반환될 타입을 정해줄 수 있습니다. TypeScript는 반환 문을 보고 반환 타입을 파악할 수 있으므로 반환 타입을 생략할 수 있습니다.

 

함수 타입 작성하기 (Writing the function type)

함수에 타입을 붙였으니, 이제 함수 타입들을 살펴보고 함수의 전체 타입을 작성해 봅시다.

let myAdd: (x: number, y: number) => number =
    function(x: number, y: number): number { return x + y; };

함수의 타입

• 매개변수의 타입
• 반환 타입

전체 함수 타입을 작성하고자 한다면 이 두 가지 타입이 필요합니다. 매개변수 목록처럼 각 매개변수에 이름과 타입 타입을 작성해 줍시다. 작성하는 이름은 가독성을 위한 것입니다. 위의 코드 대신 이렇게 쓸 수도 있습니다:

let myAdd: (baseValue: number, increment: number) => number =
    function(x: number, y: number): number { return x + y; };

매개변수의 타입들이 올바르게 나열되어 있다면 함수 타입에 이름을 붙이더라도 유효한 타입으로 간주합니다.

두 번째로 반환 타입입니다. 매개변수 타입들과 반환 타입 사이에 '화살표 표기'( => )를 써서 반환 타입을 분명히 할 수 있습니다. 이전에 언급했듯이, 함수 표기에 필요한 부분입니다, 그래서 만약 함수가 값을 반환하지 않는다면 비워두는 대신 void를 써서 표시합니다.

참고로, 매개변수 타입과 반환 타입만이 함수 타입을 구성합니다. 캡처된 변수는 타입에 반영되지 않습니다. 사실상 캡처된 변수는 함수의 "숨겨진 상태"의 일부이고 API를 구성하지 않습니다.