선택적 매개변수와 기본 매개변수

선택적 매개변수와 기본 매개변수

객체와 튜플 타입에서처럼 함수에서도 ?를 이용해 선택적 매개변수를 지정할 수 있습니다.

 

함수의 매개변수를 선언할 때 필수 매개변수를 먼저 지정하고 선택적 매개변수를 뒤에 추가합니다.

function log(message: string, userName?: string){
    let time = new Date().toLocaleTimeString()
    console.log(time, message, userName || '뭐... 읎는데...')
}

log('페이지 로딩됨') // "17:07:22 PM 페이지 로딩됨 뭐... 읎는데..." 출력

log('유저 들어옴', 'cozyLinda') // "17:09:10 PM 유저 들어옴 cozyLind" 출력

JavaScript에서처럼 매개변수에 기본값을 지정할 수 있습니다. 

 

의미상으론 호출자가 해당 매개변수에 값을 전달하지 않아도 되므로 매개변수를 선택적으로 만드는 것과 같습니다.

 

예시로 log를 아래처럼 다시 구현할 수 있습니다.

function log(message: string, userName = '뭐... 읎는데...'){
    let time = new Date().toLocaleTimeString()
    console.log(time, message, userName)
}

log('유저가 버튼 누름', 'cozyLinda')

log('유저 나감')

userName에 기본값을 제공하므로 선택형 마크(?)와 타입을 지정할 필요가 없어졌습니다.

 

TypeScript가 기본값으로 매개변수의 타입을 추론할 수 있기 때문이며, 이 덕분에 코드가 간결해지고 읽기도 쉬워집니다.

 

물론 일반 매개변수에 타입을 지정하듯이 기본 매개변수에도 타입을 명시할 수 있습니다.

type Context = {
    appId?: string
    userName?: string
}

function log(message: string, context: Context = {}) {
    let time new Date().toISOString()
    console.log(time, message, context.userName)
}

보통 실무에선 선택적 매개변수보단 기본 매개변수를 더 자주 사용하게 됩니다.