TypeScript - 선택적 매개변수: 초보자 가이드

안녕하세요, 미래의 코딩 슈퍼스타 여러분! TypeScript의 세계로의 흥미로운 여정을 안내해 드리게 되어 기쁩니다. 오늘 우리는 "선택적 매개변수"라는 작은 기능을 탐구해 보겠습니다. 프로그래밍에 처음이라면 걱정 마세요. 단계별로 설명해 드리며, 함께 재미있게 배워 나갈게요!

TypeScript - Optional Parameters

선택적 매개변수는 무엇인가요?

들어보기 전에, 파티를 계획하는 상황을 상상해 보세요. 접시와 컵은 필요하지만, 수건이 필요할지는 확실하지 않습니다. TypeScript의 선택적 매개변수는 이런 느낌입니다. 함수의 쇼핑리스트에 있는 "아마 필요할지도 몰라"하는 아이템들입니다!

TypeScript에서 선택적 매개변수는 일부 인자가 필수가 아닌 함수를 만들 수 있게 해줍니다. 이는 함수의 유연성을 높이는 것과 같습니다. 파티에 수건을 준비하는 것처럼, 선택적 수건을 가지고 있으면 더 많은 선택지가 생깁니다.

문법

이제 TypeScript에서 선택적 매개변수를 어떻게 작성하는지 살펴보겠습니다. 매개변수 이름 뒤에 물음표(?)를 추가하는 것만으로 간단히 할 수 있습니다. 기본 문법은 다음과 같습니다:

function functionName(requiredParam: type, optionalParam?: type) {
// 함수 본문
}

optionalParam 뒤에 있는 작은 ?를 보셨나요? 이것이 일반 매개변수를 선택적 매개변수로 만드는 마법의 지팡이입니다!

예제

선택적 매개변수를 실제로 적용해 보는 예제를 몇 가지 살펴보겠습니다. 간단한 것부터 시작해 복잡도를 점차 높여갈게요.

예제 1: 간단한 인사

function greet(name: string, greeting?: string) {
if (greeting) {
return `${greeting}, ${name}!`;
} else {
return `Hello, ${name}!`;
}
}

console.log(greet("Alice"));           // 출력: Hello, Alice!
console.log(greet("Bob", "Good day")); // 출력: Good day, Bob!

이 예제에서 name은 필수 매개변수이지만, greeting은 선택적입니다. 인사를 제공하지 않으면 기본적으로 "Hello"를 사용합니다. 파티에서 기본 환영 간판을 가지고 있지만, 손님들이 자신만의 맞춤형 간판을 가져올 수 있다고 상상해 보세요!

예제 2: 선택적 연산을 가진 계산기

간단한 계산기 함수를 만들어 보겠습니다:

function calculate(a: number, b: number, operation?: string): number {
if (operation === "add") {
return a + b;
} else if (operation === "subtract") {
return a - b;
} else {
return a * b; // 기본적으로 곱셈
}
}

console.log(calculate(5, 3));          // 출력: 15 (5 * 3)
console.log(calculate(10, 5, "add"));  // 출력: 15 (10 + 5)
console.log(calculate(10, 4, "subtract")); // 출력: 6 (10 - 4)

여기서 operation은 선택적 매개변수입니다. 제공되지 않으면 기본적으로 곱셈을 수행합니다. 다양한 도구를 사용할 수 있는 스위스 아르밀리트처럼, 필요한 도구를 선택적으로 사용할 수 있습니다!

예제 3: 선택적 필드를 가진 사용자 프로필

여러 가지 필드를 포함한 더 복잡한 예제를 만들어 보겠습니다:

interface UserProfile {
name: string;
age: number;
email?: string;
phoneNumber?: string;
}

function createUserProfile(name: string, age: number, email?: string, phoneNumber?: string): UserProfile {
const profile: UserProfile = {
name: name,
age: age
};

if (email) {
profile.email = email;
}

if (phoneNumber) {
profile.phoneNumber = phoneNumber;
}

return profile;
}

const user1 = createUserProfile("Alice", 30);
console.log(user1);
// 출력: { name: "Alice", age: 30 }

const user2 = createUserProfile("Bob", 25, "[email protected]");
console.log(user2);
// 출력: { name: "Bob", age: 25, email: "[email protected]" }

const user3 = createUserProfile("Charlie", 35, "[email protected]", "123-456-7890");
console.log(user3);
// 출력: { name: "Charlie", age: 35, email: "[email protected]", phoneNumber: "123-456-7890" }

이 예제에서 name과 age는 필수이지만, email과 phoneNumber은 선택적입니다. 필수 필드와 선택적 필드가 있는 양식을 작성하는 것과 비슷합니다!

베스트 프랙티스와 팁

순서는 중요합니다: 항상 선택적 매개변수를 필수 매개변수 뒤에 두세요. 쇼핑리스트에서 "아마 필요할지도 몰라"하는 아이템들을 맨 뒤에 두는 것과 같습니다.
기본값 사용: 선택적 매개변수와 기본값을 조합할 수 있습니다:

function greet(name: string, greeting: string = "Hello") {
return `${greeting}, ${name}!`;
}

과도하지 말아요: 선택적 매개변수는 유용하지만, 너무 많이 사용하면 함수가 혼란스러워질 수 있습니다. 지혜롭게 사용하세요!
문서화: 선택적 매개변수가 누락될 때 어떤 일이 일어나는지 문서화하세요. 손님들에게 명확한 지시를 남기는 것과 같습니다.

결론

축하합니다! 선택적 매개변수를 습득하여 TypeScript 실력을 한 단계 업그레이드했습니다. 선택적 매개변수는 함수 파티에 "가져올지도 몰라"하는 아이템들처럼, 유연성과 선택지를 더해줍니다.

코딩 여정을 계속하면서, 선택적 매개변수가 유용한 상황을 많이 만나게 될 것입니다. 이는 TypeScript 도구箱에서 강력한 도구 중 하나로, 유연하고 재사용 가능한 코드를 작성하는 데 도움이 됩니다.

계속 연습하고, 호기심을 잃지 마세요! 행복한 코딩 되세요! ??

메서드	설명
`greet(name: string, greeting?: string)`	선택적 맞춤 인사를 제공하는 함수입니다.
`calculate(a: number, b: number, operation?: string)`	선택적 연산을 가진 계산기 함수입니다.
`createUserProfile(name: string, age: number, email?: string, phoneNumber?: string)`	선택적 이메일과 전화번호를 포함한 사용자 프로필을 생성하는 함수입니다.

Credits: Image by storyset