TypeScript - 기본 매개변수
안녕하세요, 미래의 코딩 슈퍼스타 여러분! 오늘 우리는 TypeScript의 fascinante 세계로 뛰어들어 매우 유용한 기능을 탐구해보겠습니다: 기본 매개변수. 이 수업이 끝나면 이 강력한 도구를 마스터하고 프로처럼 활용할 수 있을 것입니다. 그럼 시작해보겠습니다!
기본 매개변수는 무엇인가요?
상상해보세요, 여러분이 요리사라면 어떨까요? (조금만 참아주세요, 곧 코딩으로 넘어갈게요!) 매일 맛있는 스튜를 만듭니다. 대부분의 경우, 스튜에 소금을 추가합니다. 하지만 때로는 고객이 소금을 넣지 않기를 요청할 수도 있습니다. 소금을 포함하지 않도록 자동으로 조정되는 레시피가 있다면 얼마나 좋을까요? 이 precisely 기본 매개변수가 프로그래밍에서 하는 일입니다!
TypeScript에서 기본 매개변수는 함수 매개변수에 기본 값을 설정할 수 있게 해줍니다. 함수가 해당 매개변수에 대한 값을 제공하지 않고 호출되면, 기본 값이 사용됩니다.
간단한 예제를 보겠습니다:
function greet(name: string = "World") {
console.log(`Hello, ${name}!`);
}
greet(); // 출력: Hello, World!
greet("Alice"); // 출력: Hello, Alice!이 예제에서 "World"은 name의 기본 매개변수입니다. greet()을 인자 없이 호출하면 "World"을 기본으로 사용하지만, "Alice"와 같은 이름을 제공하면 그 이름을 사용합니다.
기본 매개변수를 사용하는 이유는 무엇인가요?
- 유연성: 기본 매개변수를 사용하면 함수가 특정 인자가 있어도 없어도 작동할 수 있도록 합니다.
- cleaner 코드: 함수 내부에서 인자가 제공되었는지 확인하는 조건문을 줄일 수 있습니다.
- 개선된 가독성: 기본 매개변수를 사용하면 함수의 기본 "정상적인" 값이 명확하게 드러납니다.
기본 매개변수를 어떻게 사용할까요?
更多 예제로 깊이 더 들어보겠습니다:
기본 사용법
function calculateArea(width: number = 10, height: number = 5) {
return width * height;
}
console.log(calculateArea()); // 출력: 50
console.log(calculateArea(20)); // 출력: 100
console.log(calculateArea(7, 3)); // 출력: 21이 예제에서 width과 height 모두 기본 값을 가집니다. 함수에 인자를 아무것도 주지 않거나, 하나의 인자(그것이 width로 사용됩니다), 또는 두 개의 인자를 호출할 수 있습니다.
표현식을 기본 값으로 사용하기
기본 매개변수는 단순한 값만이 아니라 표현식일 수 있습니다:
function getRandomGreeting(name: string = "friend", time: Date = new Date()) {
const greetings = ["Hello", "Hi", "Hey", "Howdy"];
const randomGreeting = greetings[Math.floor(Math.random() * greetings.length)];
return `${randomGreeting}, ${name}! It's ${time.toLocaleTimeString()} now.`;
}
console.log(getRandomGreeting()); // 출력: 예를 들어, "Hey, friend! It's 3:45:30 PM now."
console.log(getRandomGreeting("Alice")); // 출력: 예를 들어, "Hello, Alice! It's 3:45:35 PM now."여기서 new Date()을 time의 기본 값으로 사용하여 함수가 호출될 때 현재 시간을 제공합니다.
다른 타입의 기본 매개변수
기본 매개변수는 TypeScript의 모든 타입과 작동합니다:
function createUser(
name: string = "Anonymous",
age: number = 0,
isAdmin: boolean = false,
hobbies: string[] = []
) {
return { name, age, isAdmin, hobbies };
}
console.log(createUser());
// 출력: { name: "Anonymous", age: 0, isAdmin: false, hobbies: [] }
console.log(createUser("Alice", 30, true, ["reading", "coding"]));
// 출력: { name: "Alice", age: 30, isAdmin: true, hobbies: ["reading", "coding"] }이 예제는 기본 매개변수가 다른 타입, 배열과 루프를 포함하여 사용될 수 있음을 보여줍니다.
선택 매개변수 대신 기본 매개변수
이제 선택 매개변수에 대해 생각할 수도 있을 것입니다. "기본 매개변수와 어떻게 다른가요?" 훌륭한 질문입니다! 그 차이를 설명해보겠습니다:
선택 매개변수
선택 매개변수는 ?로 표시되어 인자가 제공되지 않을 때 undefined가 됩니다.
function greetOptional(name?: string) {
if (name) {
console.log(`Hello, ${name}!`);
} else {
console.log("Hello, stranger!");
}
}
greetOptional(); // 출력: Hello, stranger!
greetOptional("Bob"); // 출력: Hello, Bob!기본 매개변수
기본 매개변수는 인자가 제공되지 않을 때 기본 값을 사용합니다.
function greetDefault(name: string = "stranger") {
console.log(`Hello, ${name}!`);
}
greetDefault(); // 출력: Hello, stranger!
greetDefault("Bob"); // 출력: Hello, Bob!주요 차이점
| 기능 | 선택 매개변수 | 기본 매개변수 |
|---|---|---|
| 문법 | 매개변수 이름 뒤에 ? 사용 |
매개변수 타입 뒤에 = 값 사용 |
| 인자가 제공되지 않을 때 | 매개변수는 undefined
|
매개변수는 기본 값 사용 |
| null 확인 필요 여부 | 종종 함수 본문 내에서 확인 필요 | 추가 확인 필요 없음 |
| 의도 명확성 | 인자가 누락되었는지 명확하지 않음 | 기본 동작이 명확히 표시됨 |
일반적으로 기본 매개변수는 null 확인이 필요 없어서 깨끗한 코드를 만들어줍니다.
기본 매개변수 사용에 대한 최선의做法
- 의미 있는 기본 값을 사용: 대부분의 경우에 적합한 기본 값을 선택하세요.
- 기본 값을 문서화: 기본 값이 코드에 있지만, 함수 문서에도 언급하는 것이 좋습니다.
- 가변 객체를 기본 값으로 사용하지 마세요: 가변 객체를 기본 값으로 사용하면 예상치 못한 동작을 초래할 수 있습니다.
-
undefined를 고려하세요:undefined가 기본 값을 트리거하는 것을 기억하세요, 하지만null은 그렇지 않습니다.
function exampleBestPractices(
requiredParam: string,
optionalParam: string = "default value",
anotherOptional: number = 42
) {
// 함수 본문
}결론
그렇습니다, 여러분! 지금 TypeScript 기본 매개변수에 대해 배워서 스킬을 레벨 업시켰습니다. 기본 매개변수를 주의 깊게 사용하면 코드를 더 robust, 가독성 있고 유연하게 만들 수 있습니다.
코딩 여정을 계속하면서 기본 매개변수를 사용할 많은 기회를 찾아보세요. 배송 비용을 계산하는 함수에 기본 배송 방법을 설정하거나, 날짜 형식을 지정하는 함수에 기본 형식을 설정하는 등 무한한 가능성이 있습니다!
계속 연습하고, 코딩하고, TypeScript를 즐겨보세요. 다음 시간까지, 즐거운 코딩 되세요!
Credits: Image by storyset