'?'를 사용한 선택적 매개변수
Coddy JavaScript 여정의 TypeScript 소개 섹션에 포함된 레슨. 73개 중 25번째.
때때로 특정 매개변수가 항상 필요하지 않은 함수를 만들고 싶을 때가 있습니다. TypeScript는 매개변수를 선택적(optional)으로 표시하기 위해 ? 구문을 제공하며, 이는 호출자가 함수를 호출할 때 해당 매개변수를 제공할지 여부를 선택할 수 있음을 의미합니다.
매개변수를 선택 사항으로 만들려면 매개변수 이름 뒤, 타입 어노테이션 앞에 물음표를 추가합니다:
function greet(name: string, greeting?: string): string {
if (greeting) {
return greeting + ", " + name;
}
return "Hello, " + name;
}이 예제에서 name은 필수인 반면 greeting은 선택 사항입니다. 이 함수를 이름만 사용하여 호출하거나(greet("Alice")), 두 매개변수를 모두 사용하여 호출할 수 있습니다(greet("Alice", "Good morning")). 함수 내부에서 선택적 매개변수는 string | undefined 타입을 가지므로, 사용하기 전에 존재 여부를 확인해야 합니다.
챌린지
쉬움string 타입의 username(필수)과 string 타입의 displayName(선택 사항)이라는 두 개의 매개변수를 받는 createUserProfile이라는 이름의 함수를 생성하세요. 이 함수는 명시적인 반환 타입 어노테이션과 함께 문자열을 반환해야 합니다.
두 매개변수가 모두 제공되면 함수는 "Profile: [displayName] (@[username])"을 반환해야 합니다.
username만 제공되면 함수는 "Profile: @[username]"을 반환해야 합니다.
number 타입의 price(필수)와 string 타입의 membershipLevel(선택 사항)이라는 두 개의 매개변수를 받는 calculateDiscount라는 이름의 또 다른 함수를 생성하세요. 이 함수는 명시적인 반환 타입 어노테이션과 함께 숫자를 반환해야 합니다.
두 매개변수가 모두 제공되면 함수는 10% 할인된 가격(0.9를 곱함)을 반환해야 합니다.
price만 제공되면 함수는 원래 가격을 그대로 반환해야 합니다.
다음 값으로 함수를 호출하고 결과를 출력하여 함수를 테스트하세요:
createUserProfile을"john_doe"와"John Doe"로 호출createUserProfile을"jane_smith"만 사용하여 호출calculateDiscount를100과"premium"으로 호출calculateDiscount를75만 사용하여 호출
각 결과를 위에 지정된 순서대로 별도의 줄에 출력하세요.
직접 해보기
// TODO: 여기에 코드를 작성하세요
// 적절한 타입 어노테이션을 사용하여 createUserProfile 함수를 생성하세요
// 적절한 타입 어노테이션을 사용하여 calculateDiscount 함수를 생성하세요
// 함수를 테스트하고 결과를 출력하세요
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
TypeScript 소개의 모든 레슨
4함수 활용하기
매개변수 및 반환값 타입 지정화살표 함수 타입 지정'void' 반환 타입'?'를 사용한 선택적 매개변수기본 매개변수 값나머지 매개변수 타입 지정함수 타입 정의하기요약: 타입이 지정된 함수 작성하기
직접 연습해 보세요: 온라인 JavaScript 컴파일러