icon안동민 개발노트

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

 타입스크립트에서 선택적 매개변수와 기본 매개변수는 함수의 유연성을 높이는 중요한 기능입니다.

 이 절에서는 이들의 사용법과 관련 개념들을 상세히 살펴보겠습니다.

선택적 매개변수

 선택적 매개변수는 함수 호출 시 생략할 수 있는 매개변수입니다.

 물음표?를 사용하여 정의합니다.

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 morning"));  // "Good morning, Bob!"

 사용 시나리오

  • 선택적 기능이나 설정을 제공할 때
  • API의 backward compatibility 유지

기본 매개변수

 기본 매개변수는 값이 제공되지 않았을 때 사용될 기본값을 지정합니다.

function createUser(name: string, age: number = 30, isAdmin: boolean = false) {
    return { name, age, isAdmin };
}
 
console.log(createUser("Alice"));  // { name: "Alice", age: 30, isAdmin: false }
console.log(createUser("Bob", 25));  // { name: "Bob", age: 25, isAdmin: false }

 선택적 매개변수와의 차이점

  • 기본 매개변수는 값을 생략하면 기본값이 사용됨
  • 선택적 매개변수는 값을 생략하면 undefined가 됨

매개변수 순서와 주의사항

 선택적 매개변수와 기본 매개변수는 일반적으로 필수 매개변수 뒤에 위치해야 합니다.

// 올바른 사용
function createProfile(name: string, age?: number, bio: string = "No bio provided") {
    // ...
}
 
// 잘못된 사용 (컴파일 에러)
function invalidFunc(optional?: string, required: number) {
    // ...
}

타입 시그니처와 타입 추론

 선택적 매개변수는 함수의 타입 시그니처에 영향을 미칩니다.

function buildName(firstName: string, lastName?: string): string {
    // ...
}
 
// 타입: (firstName: string, lastName?: string) => string

 타입 추론 결과도 이에 따라 변화합니다.

기본 매개변수의 동적 값

 기본 매개변수 값으로 함수나 표현식을 사용할 수 있습니다.

function getDefaultAge() {
    return new Date().getFullYear() - 1990;
}
 
function createPerson(name: string, age: number = getDefaultAge()) {
    return { name, age };
}

 주의 : 기본값은 함수가 호출될 때마다 평가됩니다.

Rest 파라미터

 Rest 파라미터를 사용하여 가변 개수의 인자를 받을 수 있습니다.

function sum(...numbers: number[]): number {
    return numbers.reduce((total, num) => total + num, 0);
}
 
console.log(sum(1, 2, 3, 4));  // 10

구조 분해 할당과 매개변수

 구조 분해 할당을 이용하여 객체 매개변수를 처리할 수 있습니다.

interface Options {
    title: string;
    width?: number;
    height?: number;
}
 
function createBox({ title, width = 100, height = 100 }: Options) {
    console.log(`Created a box: ${title}, ${width}x${height}`);
}
 
createBox({ title: "My Box", width: 200 });  // "Created a box: My Box, 200x100"

흔한 오류와 해결 방법

  1. 선택적 매개변수 이후에 필수 매개변수 배치
// 오류
function errorFunc(a?: number, b: string) {}
 
// 해결
function fixedFunc(b: string, a?: number) {}
  1. 유니언 타입 사용 시 주의
// 주의 필요
function processValue(value: string | undefined) {
    if (value) {
        console.log(value.toUpperCase());
    }
}
 
// 더 안전한 방법
function safeProcessValue(value?: string) {
    if (value) {
        console.log(value.toUpperCase());
    }
}

유연하고 재사용 가능한 함수 설계

 선택적 매개변수, 기본 매개변수, Rest 파라미터를 조합하여 유연한 함수를 설계할 수 있습니다.

function createElement(tag: string, content?: string, ...attributes: string[]): string {
    let element = `<${tag}`;
    if (attributes.length > 0) {
        element += ' ' + attributes.join(' ');
    }
    element += '>';
    if (content) {
        element += content;
    }
    element += `</${tag}>`;
    return element;
}
 
console.log(createElement('div', 'Hello', 'class="greeting"', 'id="welcome"'));
// <div class="greeting" id="welcome">Hello</div>

설계 원칙과 Best Practices

  1. 가장 자주 사용되는 매개변수를 먼저 배치
  2. 선택적 매개변수는 함수의 끝 부분에 배치
  3. 기본값이 있는 매개변수는 선택적 매개변수로 취급
  4. 과도한 선택적 매개변수 사용 자제 (대신 객체 매개변수 고려)
  5. Rest 파라미터는 항상 마지막에 배치
  6. 타입 안전성을 위해 strict null checks 옵션 활성화

 타입스크립트의 선택적 매개변수와 기본 매개변수는 함수의 유연성과 사용성을 크게 향상시키는 강력한 기능입니다. 선택적 매개변수는 물음표(?)를 사용하여 정의되며, 함수 호출 시 생략할 수 있는 매개변수를 나타냅니다. 이는 API의 backward compatibility를 유지하거나 선택적 기능을 제공할 때 특히 유용합니다.

 기본 매개변수는 값이 제공되지 않았을 때 사용될 기본값을 지정합니다. 이는 함수의 사용성을 높이고, 일반적인 사용 패턴에 대한 편의성을 제공합니다. 선택적 매개변수와 기본 매개변수의 주요 차이점은 값을 생략했을 때의 동작입니다. 선택적 매개변수는 undefined가 되지만, 기본 매개변수는 지정된 기본값이 사용됩니다.

 매개변수 순서와 관련된 중요한 규칙은 선택적 매개변수와 기본 매개변수를 필수 매개변수 뒤에 배치해야 한다는 것입니다. 이 규칙을 위반하면 컴파일 오류가 발생합니다. 이는 함수 호출의 모호성을 방지하고 코드의 가독성을 향상시킵니다.

 선택적 매개변수는 함수의 타입 시그니처에 영향을 미치며, 이는 타입 추론 결과에도 반영됩니다. 이를 통해 타입스크립트는 함수 사용 시 더 정확한 타입 체크를 수행할 수 있습니다.

 기본 매개변수 값으로 함수나 표현식을 사용할 수 있다는 점은 매우 유용한 기능입니다. 이를 통해 동적인 기본값을 생성할 수 있지만, 기본값이 함수 호출 시마다 평가된다는 점을 주의해야 합니다.

 Rest 파라미터는 가변 개수의 인자를 받을 수 있게 해주는 강력한 기능입니다. 이는 배열로 처리되며, 함수 내에서 반복 처리나 리듀스 연산 등에 활용할 수 있습니다.

 구조 분해 할당을 이용한 매개변수 처리는 복잡한 객체 매개변수를 다룰 때 특히 유용합니다. 이를 통해 기본값 설정과 선택적 속성 처리를 동시에 할 수 있어 코드의 가독성과 유연성을 높일 수 있습니다.

 선택적 매개변수와 기본 매개변수 사용 시 흔히 발생하는 오류로는 매개변수 순서 문제와 유니언 타입 사용 시의 주의사항 등이 있습니다. 이러한 오류는 타입스크립트의 엄격한 타입 체크와 적절한 코드 구조화를 통해 해결할 수 있습니다.

 이러한 기능들을 조합하여 유연하고 재사용 가능한 함수를 설계할 수 있습니다. 예를 들어, HTML 요소 생성 함수에서 이러한 기능들을 활용하면 다양한 상황에 대응할 수 있는 유연한 API를 제공할 수 있습니다.

 효과적인 활용을 위한 설계 원칙과 Best Practices로는 자주 사용되는 매개변수를 먼저 배치하고, 선택적 매개변수는 함수의 끝 부분에 배치하는 것 등이 있습니다. 또한, 과도한 선택적 매개변수 사용은 피하고 대신 객체 매개변수를 고려하는 것이 좋습니다. 타입 안전성을 위해 strict null checks 옵션을 활성화하는 것도 중요한 실천 사항입니다.

 결론적으로, 선택적 매개변수와 기본 매개변수는 타입스크립트에서 함수의 유연성과 사용성을 크게 향상시키는 중요한 기능입니다. 이를 적절히 활용하면 더 견고하고 유지보수가 용이한 코드를 작성할 수 있으며, API 설계 시 다양한 사용 시나리오에 효과적으로 대응할 수 있습니다.

이전으로다음으로