함수 선언과 호출

함수 선언과 호출

JavaScript에서 함수는 first-class 객체입니다.

 

즉, 객체를 다루듯이 함수를 변수에 할당하거나, 함수를 다른 함수로 전달하거나, 함수에서 함수를 반환하거나, 객체와 프로토타입에 할당하거나, 함수에 프로퍼티를 기록하거나, 함수에 기록된 프로퍼티를 읽는 등의 작업을 할 수 있습니다.

 

JavaScript에서 함수로 할 수 있는 일이 정말 많은 덕분에 TypeScript도 이 모든 것을 자신의 타입 시스템에 녹여낼 수 있었습니다.

 

다음은 TypeScript 예제입니다.

function add(a: number, b: number){
    return a + b
}

보통 함수 매개변수의 타입은 명시적으로 정의합니다.

 

TypeScript는 항상 함수의 본문에서 사용된 타입을 추론하지만 특별한 상황을 제외하면 매개변수 타입은 추론하지 않습니다.

 

반환 타입은 자동으로 추론하지만 원한다면 명시할 수 있습니다.

function add(a: number, b: number): number{
    return a + b
}

JavaScript와 TypeScript는 최소 다섯 가지의 함수 선언 방법을 지원합니다.

// 이름을 붙인 함수
function say(name: string){
    return 'Hi ' + name
}

// 함수 표현식
let say2 = function(name: string){
    return 'Hi ' + name
}

// 화살표 함수 표현식
let say3 = (name: string) => {
    return 'Hi ' + name
}

// 단축형 화살표 함수 표현식
let say4 = (name: string) =>
    'Hi ' + name
    
// 함수 생성자
let say5 = new Function('name', 'return "Hi " + name')

TypeScript는 함수 생성자를 제외한 모든 문법을 안전하게 지원하며, 이 모든 문법은 보통 매개변수 타입의 필수 어노테이션, 반환 타입의 선택형 어노테이션에 적용하는 것과 같은 규칙을 따릅니다.

함수 생성자가 안전하지 않은 이유

함수 생성자 예제 코드를 편집기에 입력해 보면, 타입이 Function이라는 사실을 알 수 있습니다. 

 

Function은 이름 뒤에 ()를 붙여서 호출할 수 있는 객체로 Funtion.prototype의 모든 프로토타입 메서드를 포함합니다.

 

그러나 매개변수 타입과 반환 타입을 지정하지 않았으므로 어떤 인수를 건네서도 호출 가능하며, 이 과정에서 어떠한 문제가 발생하더라도 TypeScript가 도와줄 수 있는 일은 없습니다.

간단한 용어 소개

매개변수(parameter)

함수 선언의 일부이며 함수를 실행하는 데 필요한 데이터 조각입니다. 정형 매개변수(formal parameter)라고도 부릅니다.

인수(argument)

함수를 호출할 때 전달해야 하는 데이터 조각입니다. 실질 매개변수(actual parameter)라고도 부릅니다.

 

TypeScript에서 함수를 호출할 때 타입 정보는 따로 제공할 필요가 없으며, 바로 인수를 전달하면 TypeScript가 함수의 매개변수와 인수의 타입이 호환되는지 확인합니다.

add(2, 4) // 6으로 평가
say('Linda') // 'Hi Linda'로 평가

물론 인수를 전달하지 않거나, 잘못된 타입의 인수를 전달하면 TypeScript가 에러를 발생시킵니다.

add(9) // error TS2554: 2개의 인수가 필요한데, 1개만 전달
add(3, 'hi') // error TS 2345: 'hi' 인수 타입은 'number' 매개변수 타입에 할당 할 수 없음