TypeScript 함수 선언문
function 함수 이름(매개변수1: 타입1, 매개변수2: 타입2, ...) : 반환값 타입 {
함수 몸통
}
타입스크립트 함수 선언문 예
function add(a: number, b: number): number {
return a + b
}
void 타입
값을 반환하지 않는 함수는 반환 타입이 void입니다. void타입은 함수 반환 타입으로만 사용합니다.
void 타입 예
function printMe(name: string, age: number): void {
console.log(`name: ${name}, age: ${age}`)
}
함수 시그니처
함수의 타입을 말합니다.
(매개변수1 타입, 매개변수2 타입, ...) => 반환값 타입함수 시그니처 사용 예
let printMe: (string,number) => void = function (name: string, age: number): void {}
만약, 매개변수가 없으면 단순히 ()로 표현합니다.
() => void는 매개변수 및 반환값도 없는 함수 시그니처입니다.
type 키워드로 타입 별칭 만들기
type 키워드는 기존에 존재하는 타입을 단순히 이름만 바꿔서 사용할 수 있도록 해줍니다.(=타입 별칭)
type 새로운 타입 = 기존 타입
선택적 매개변수
함수의 매개변수 뒤에 물음표를 붙여 사용합니다.
function fn(arg1: string, arg?: number): void {}
선택적 매개변수가 있는 함수의 시그니처는 다음처럼 타입 뒤에 물음표를 붙입니다.
type OptionalArgFunc = (string, number?) => void일등 함수
함수와 변수를 구분하지 않는 다는 의미입니다.
let f = function(a,b) { return a + b}
f = function(a,b) {return a - b}
2문장 모두 이상 없습니다.
함수 표현식
위 일등함수 예시에서 function(a,b) { return a + b} 부분을 함수 표현식이라고 합니다.
함수 호출 연산자
변수가 함수 표현식을 내포하고 있으면, 변수 이름 뒤에 함수 호출 연산자 ( )를 붙여 호출할 수 있습니다.
const 키워드와 함수 표현식
함수 표현식을 담는 변수는 let보다는 const 키워드로 선언하는 것이 좋습니다.
let 키워드는 변수값이 변할 수 있으므로 추후 문제가 발생할 수 있습니다.
let f = () => {}
반면, const 키워드를 통해 함수 표현식을 담는 변수를 선언하면, 이후 함수 내용이 절대로 바뀌지 않습니다.
const f = () => {}화살표 함수와 표현식 문
const 함수 이름 = (매개변수1: 타입1, 매개변수2: 타입2, ...) : 반환 타입 => 함수 몸통
화살표 함수의 내부는 function과는 다르게 다음처럼 중괄호를 사용할 수 있습니다.
const arrow1 = (a: number, b: number): number => {return a + b}
const arrow2 = (a: number, b: number): number => a + b
복합 실행문
if(조건식)
실행문
또는
if(조건식) {
실행문1
실행문2
}
return 키워드 - 반드시 함수 { } 내부에서만 사용이 가능한 제약이 존재합니다.
function isGreater(a: number, b: number): boolean {
a > b // 결과를 반환하지 않음
}
function isGreater(a: number, b: number): boolean {
return a > b // true나 false를 반환
}
📍복합 실행문에서 return 키워드 사용
const isGreater = (a: number, b: number): boolean => {return a > b}
콜백 함수
변수에 함수 표현식을 담을 수 있어 매개변수 형태로 동작하는 함수를 말합니다.
export const init = (callback: () => void): void => {
console.log('default initialization finished.')
callback()
console.log('all initialization finished.')
}
import {init} from './init'
init(() => console.log('custom initialization finished.'))
실행 결과
default initialization finished.
custom initialization finished.
all initialization finished.
중첩 함수 - 함수 표현식 내부에 여러 개의 함수 작성이 가능합니다.
const calc = (value: number, cb: (number) => void): void => {
let add = (a, b) => a + b
function multiply(a,b) {return a * b}
let result = multiply(add(1,2), value)
cb(result)
}
calc(30, (result: number) => console.log(`result is ${result}`)) // result is 90
고차 함수 - 다른 함수를 반환하는 함수
const add1 = (a: number, b: number): number => a + b // 보통 함수
const add2 = (a: number): (number) => number => (b: number): number => a + b // 고차 함수const add = (a: number): (number) => number => (b: number): number => a + b
const result = add(1)(2)
console.log(result) // 3
2차 고차함수 이므로 add(1)(2)로 작성해야 됩니다.
매개변수 기본값 지정하기 - 함수 호출 시 인수를 전달하지 않더라도 매개변수에 어떤 값을 설정하는 것
(매개변수: 타입 = 매개변수 기본값)
다음 코드에서 3행의 makePerson 함수는 호출 때 매개변수 age에 해당하는 값을 전달받지 못하면 기본으로 10이 설정됩니다.
export type Person = {name: string, age: number}
export const makePerson = (name: string, age: number = 10): Person => {
const person = {name: name, age: age}
return person
}
console.log(makePerson('Jack'))
console.log(makePerson('Jack', 33))
객체를 반환하는 화살표 함수 만들기 - 중괄호 { } 가 아닌 소괄호 ( )로 작성하여야 합니다.
export const makePerson = (name: string, age: number = 10): Person => ({name, age})
색인 키와 값으로 객체 만들기
const makeObject = (key, value) => ({[key]: value})
console.log(makeObject('name', 'Jack')) // { name: 'Jack' }
console.log(makeObject('firstName', 'Jane')) // {firstName: 'Jane }