[타입스크립트] 옵셔널 파라미터

옵셔널 파라미터란 함수를 호출할 때 반드시 값을 전달해야 하는 필수 파라미터와 달리, 값을 전달하지 않아도 되는 선택적인 파라미터를 의미합니다. 타입스크립트에서는 파라미터 이름 뒤에 ?를 붙여 옵셔널 파라미터임을 나타냅니다.

왜 옵셔널 파라미터를 사용할까요?

• 유연성: 함수의 사용 방식을 다양하게 만들 수 있습니다. 예를 들어, 기본값을 설정하여 사용자가 값을 생략하도록 하거나, 특정 상황에서만 값을 전달하도록 할 수 있습니다.
• 안정성: 필수 파라미터가 아닌 경우, 값이 없을 때 발생할 수 있는 오류를 미리 방지할 수 있습니다.
• 가독성: 코드를 더 명확하게 만들 수 있습니다. 어떤 파라미터가 필수이고 어떤 파라미터가 선택적인지 명확하게 구분할 수 있기 때문입니다.

옵셔널 파라미터 사용 예시

function greet(name: string, age?: number): void {
    console.log(`Hello, ${name}!`);
    if (age) {
        console.log(`You are ${age} years old.`);
    }
}

greet('Alice'); // Hello, Alice!
greet('Bob', 30); // Hello, Bob! You are 30 years old.

위 예시에서 age 파라미터는 옵셔널 파라미터입니다. greet 함수를 호출할 때 age 값을 생략해도 에러가 발생하지 않습니다.

옵셔널 파라미터와 함께 자주 사용되는 기능

• 기본값: 옵셔널 파라미터에 기본값을 할당하여 사용자가 값을 생략했을 때 사용할 값을 지정할 수 있습니다.

function greet(name: string, age: number = 20): void {
    // ...
}

• null 또는 undefined 확인: 옵셔널 파라미터의 값이 null 또는 undefined인지 확인하여 조건문을 사용할 수 있습니다.

if (age !== undefined) {
    // age 값을 사용하는 로직
}

• null 병합 연산자(??): null 병합 연산자를 사용하여 옵셔널 파라미터가 null 또는 undefined일 때 다른 값으로 대체할 수 있습니다.

const defaultAge = age ?? 20;

주의할 점

• 옵셔널 체이닝: 옵셔널 체이닝(?.) 연산자를 사용하여 옵셔널 프로퍼티에 안전하게 접근할 수 있습니다.
• 인터페이스: 인터페이스에서 옵셔널 프로퍼티를 정의할 때도 ?를 사용합니다.
• Rest 파라미터: Rest 파라미터와 옵셔널 파라미터를 함께 사용할 때는 주의해야 합니다. Rest 파라미터는 항상 마지막에 위치해야 합니다.

객체 파라미터에서의 옵셔널 프로퍼티

interface User {
  name: string;
  age?: number;
  address?: {
    city: string;
    zipCode?: string;
  };
}

function greetUser(user: User) {
  console.log(`Hello, ${user.name}!`);
  if (user.age) {
    console.log(`You are ${user.age} years old.`);
  }
  if (user.address) {
    console.log(`You live in ${user.address.city}`);
    if (user.address.zipCode) {
      console.log(`Your zip code is ${user.address.zipCode}`);
    }
  }
}

const user1: User = { name: 'Alice' };
const user2: User = { name: 'Bob', age: 30, address: { city: 'Seoul' } };

greetUser(user1);
greetUser(user2);

• 설명: 객체 파라미터 내부의 프로퍼티도 옵셔널로 만들 수 있습니다. address 객체 자체뿐만 아니라, address 객체 내부의 zipCode 프로퍼티도 옵셔널입니다.

함수 타입의 옵셔널 파라미터

type Callback = (message: string, onComplete?: () => void) => void;

function sendMessage(callback: Callback) {
  // 메시지 전송 로직
  callback('Message sent');
  if (onComplete) {
    onComplete();
  }
}

sendMessage((message) => {
  console.log(message);
});

sendMessage((message, onComplete) => {
  console.log(message);
  onComplete && onComplete();
});

• 설명: 함수 타입의 파라미터도 옵셔널로 만들 수 있습니다. onComplete 콜백 함수는 선택적으로 호출됩니다.

배열의 옵셔널 요소

type NumberOrString = number | string;

function processData(data: (NumberOrString | null)[]) {
  data.forEach(item => {
    if (typeof item === 'number') {
      // 숫자 처리
    } else if (typeof item === 'string') {
      // 문자열 처리
    }
  });
}

processData([1, 'hello', null]);

• 설명: 배열의 요소 타입을 유니온 타입으로 설정하고, null을 허용하여 옵셔널 요소를 표현할 수 있습니다.

옵셔널 파라미터와 스프레드 연산자

function sum(...numbers: number[]) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3)); // 6
console.log(sum()); // 0

• 설명: 스프레드 연산자를 사용하면 가변 인자를 받는 함수를 만들 수 있습니다. 이 경우, 인자가 전달되지 않더라도 함수는 정상적으로 실행됩니다.

5. 옵셔널 파라미터와 디폴트 값

function greet(name: string, age: number = 30) {
  console.log(`Hello, ${name}! You are ${age} years old.`);
}

greet('Alice'); // Hello, Alice! You are 30 years old.

• 설명: 옵셔널 파라미터에 디폴트 값을 설정하면, 값이 전달되지 않을 때 디폴트 값이 사용됩니다.

6. 옵셔널 체이닝과 함께 사용

interface User {
  name: string;
  address?: {
    street?: string;
  };
}

const user: User = { name: 'Alice' };
console.log(user.address?.street ?? 'Unknown');

• 설명: 옵셔널 체이닝 연산자(?.)를 사용하여 옵셔널 프로퍼티에 안전하게 접근하고, null 병합 연산자(??)를 사용하여 디폴트 값을 설정할 수 있습니다.

옵셔널 파라미터와 기본값, 인터페이스, 옵셔널 체이닝에 대한 좀 더 자세한 설명

1. 옵셔널 파라미터와 기본값 함께 사용하기

옵셔널 파라미터에 기본값을 설정하면, 함수 호출 시 해당 파라미터에 값을 전달하지 않을 경우 설정된 기본값이 사용됩니다. 이는 코드의 유연성을 높이고, 불필요한 코드를 줄이는 데 도움이 됩니다.

function greet(name: string, age: number = 30) {
  console.log(`Hello, ${name}! You are ${age} years old.`);
}

greet('Alice'); // Hello, Alice! You are 30 years old.
greet('Bob', 25); // Hello, Bob! You are 25 years old.

위 예시에서 age 파라미터는 옵셔널이며, 기본값으로 30이 설정되어 있습니다. greet('Alice')처럼 age를 생략하면 기본값 30이 사용됩니다.

2. 인터페이스에서 옵셔널 프로퍼티 사용하기

인터페이스에서 ?를 사용하여 프로퍼티를 옵셔널로 만들 수 있습니다. 옵셔널 프로퍼티는 객체를 생성할 때 반드시 값을 할당할 필요가 없습니다.

interface User {
  name: string;
  age?: number;
  address?: {
    city: string;
    zipCode?: string;
  };
}

const user1: User = { name: 'Alice' };
const user2: User = { name: 'Bob', age: 30, address: { city: 'Seoul' } };

위 예시에서 age와 address 프로퍼티는 옵셔널입니다. user1 객체는 age와 address 프로퍼티를 가지고 있지 않지만, 여전히 User 인터페이스 타입을 만족합니다.

3. 옵셔널 체이닝 자세히 알아보기

옵셔널 체이닝(?.) 연산자는 객체의 프로퍼티가 존재하는지 확인하고, 존재한다면 해당 프로퍼티에 접근하는 안전한 방법을 제공합니다. 만약 프로퍼티가 존재하지 않는다면, undefined를 반환합니다.

interface User {
  name: string;
  address?: {
    street?: string;
  };
}

const user: User = { name: 'Alice' };
console.log(user.address?.street); // undefined (user.address가 존재하지 않으므로)

옵셔널 체이닝은 중첩된 객체에도 사용할 수 있습니다.

console.log(user?.address?.street); // undefined

옵셔널 체이닝의 장점:

• null 또는 undefined에 의한 오류 방지: 프로퍼티가 존재하지 않을 경우 에러가 발생하지 않고 undefined를 반환합니다.
• 코드 간결화: if 문을 사용하여 프로퍼티 존재 여부를 확인하는 코드를 줄여줍니다.
• 가독성 향상: 코드를 더욱 직관적으로 만들어줍니다.

옵셔널 체이닝의 활용 예시:

// 배열의 요소가 존재하는 경우에만 접근
const numbers: number[] = [1, 2, 3];
const firstElement = numbers[0]?.toString();

// 함수의 반환값이 null이 아닐 경우에만 호출
const result = someFunction() ?? 'default value';