타입스크립트(06)_function함수

Kang Dong Hyun·2022년 11월 6일
0

typescript

목록 보기
6/6

함수 선언문

JS에서 함수는 function으로 만든 함수와 => 기호로 만든 화살표함수(람다함수) 두 가지 있다.
다음은 TS에서의 함수 선언문의 예이다

/*
function 함수이름(매개 변수1: 타입1, 매개변수2: 타입2):반환값타입 {
  함수 몸통
}
*/

function add(a: number, b: number) { //a,b는 매개변수 1,2는 인수
    return a+b
}
let result = add(1,2)

void 타입

값을 반환하지 않는 함수는 반환타입이 void이다. void 타입은 함수 반환 타입으로만 사용할 수 있다.

function printMe(name: string, age: number): void {
  console.log(`name: ${name}, age: ${age`}
}

함수 시그니처

변수에 타입이 있듯이 함수 또한 타입이 있는데, 함수의 타입을 함수 시그니처라고 한다.

다음 코드는 위의 printMe 함수의 시그니처를 이용한 예이다. printMe 함수는 string과 number타입의 매개변수가 두 개 있고 반환 타입은 void이다. 따라서 함수 시그니처는 (string, number) => void이다.
만약 매개변수가 없으면 단순히 ()로 표현한다. ()=>void 매개변수도 없고 반환값도 없는 함수시그니처이다.

/*
(매개변수1 타입, 매개변수2 타입[,...]) => 반환값 타입
*/
let printMe: (string, number) => void = function (name: string, age: number): void{}

type키워드로 타입 별칭 만들기

TS에는 type 키워드를 제공한다. type 키워드는 기존에 존재하는 타입을 단순히 이름만 바꿔서 사용할 수 있다. 이러한 기능을 타입 별칭이라고 한다.'

다음은 (string, number) => void 함수 시그니처를 stringNumberFunc이라는 이름으로 타입 별칭을 만든 코드이다. 이 별칭 덕분에 변수 f와 g에 타입 주석을 더 수월하게 붙일 수 있다.

//type 새로운 타입 = 기존 타입

type stringNumberFunc = (string, number) => void
let f: stringNumberFunc = function(a: string, b: number): void {}
let g: stringNumberFunc = function(c: string, d: number): void {}

함수 표현식

함수는 객체다

JS는 객체지향언어와 함수형언어의 특징을 모두 포함한다. TS또한 이 특징을 모두 가지고 있다.
다음 코드를 보면 변수의 선언문 형태로 add 함수를 구현했다.

let add = new Function('a', 'b', 'return a+b')
let result = add(1,2)
console.log(result)

우리는 함수 표현식 으로 함수를 표현할 수 있다. 아래처럼 함수 선언문에서 함수 이름을 제외한 functinon(a,b){return a+b} 코드를 함수 표현식이라고한다.

let add2 = functinon(a,b){return a+b}
console.log(add2(1,2))

이제 '일등 함수'라는 용어를 시작으로 함수 표현식이 무엇인지 살펴보자.

일등 함수

일등 함수란, 함수와 변수를 구분하지 않는 함수이다.
프로그래밍 언어가 일등 함수 기능을 제공하면 '함수형 프로그래밍 언어'라고 한다. JS와 TS는 일등 함수기능이 있으므로 함수형 프로그래밍 언어이다.

예를 들어 다음 코드에서 f는 let키워드가 앞에 있으므로 변수이다. f는 변수이므로 값을 저장할 수 있다.
변수 f에는 a+b 형태의 함수 표현식을 저장했다. 하지만 f는 변수이므로 2번째처럼 a-b형태의 함수 표현식도 저장할 수 있다.

let f = function(a,b) {return a+b}
f = function(a,b) {return a-b}
//변수와 함수를 차별하지 않음 변수를 함수처럼 쓴다는 말임

함수 호출 연산자

어떤 변수가 함수 표현식을 담고 있다면 변수 이름 뒤에 함수 호출 연산자 () 를 붙여서 호출할 수 있다.
함수가 매개변수를 요구한다면 함 수 호출 연산자 ()안에 필요한 매개변수를 명시 할 수 있다.

let functionExpression = function (a, b) { return a + b }//함수표현식
let value = functionExpression(3, 2) //함수호출연산자
console.log(value) //5

const키워드와 함수 표현식

함수 표현식을 담는 변수는 let보다는 const로 선언하는 것이 바람직하다. let은 변숫값이 변할 수 있으므로 다음 코드처럼 작성하면 함수 f는 언젠가 다른 내용으로 바뀔 수 있다.

let f = () =>{}

const f = () =>{}
profile
초보개발자의 스터디공간

0개의 댓글