[TypeScript] 매개변수 처리 방식 (직접 받기 vs 객체로 받기)

함수나 메서드를 설계할 때, 매개변수를 어떻게 받을지는 코드의 가독성, 유지보수성, 확장성에 큰 영향을 미칩니다. 이는 특정 라이브러리나 프레임워크를 넘어 모든 프로그래밍 언어와 설계에서 공통적으로 고려해야 할 중요한 요소입니다. 이번 글에서는 매개변수를 직접 받는 방식과 객체로 받는 방식을 비교하며, 각 방식의 장단점과 적합한 상황을 설명합니다.

 

■ 매개변수를 직접 받는 방식

• 매개변수를 함수의 인자로 하나씩 나열하여 전달하는 방식입니다.
• 호출부와 정의부에서 매개변수의 순서가 정확히 일치해야 하며, 매개변수가 적을 때 가장 간단하고 직관적입니다.

# 코드 예제
function calculateRectangleArea(width: number, height: number): number {
  return width * height;
}

// 호출
const area = calculateRectangleArea(10, 5);

장점

1. 간결함:
   • 매개변수가 적을 경우 가장 간단하고 직관적입니다.
2. 명시적 전달:
   • 호출 시 전달하는 매개변수가 무엇인지 바로 알 수 있습니다.

단점

1. 순서에 민감:
   • 호출부와 정의부에서 매개변수의 순서가 정확히 일치해야 하므로 관리가 까다로울 수 있습니다.
2. 매개변수 추가 시 호출부 수정 필요:
   • 새 매개변수를 추가하면 기존 호출부를 모두 수정해야 합니다.
3. 매개변수가 많을 경우 가독성 저하:
   • 여러 매개변수를 나열하면 호출부가 길어지고 가독성이 떨어질 수 있습니다.

적합한 상황

• 매개변수가 2~3개 이하로 제한적이고, 순서가 고정적인 경우.
• 간단한 GET 요청

 

■ 매개변수를 객체로 받는 방식

 

• 매개변수를 하나의 객체로 묶어서 전달하는 방식입니다.
• 키-값 쌍으로 매개변수를 정의하므로, 호출 시 순서와 무관합니다.

# 코드예제
function calculateRectangleArea(
{ width1, height1, width2, height2 }
: { width1: number; height1: number; width2: number; height2: number;}): number {  
   return width * height;
}

// 호출
const area = calculateRectangleArea({ width2, height1, height2, width1 });

 

장점

1. 순서에 민감하지 않음:
   • 매개변수를 객체로 전달하므로 순서를 고려하지 않아도 됩니다.
2. 확장성 높음:
   • 새 매개변수를 추가해도 호출부와 정의부의 수정이 최소화됩니다.
3. 가독성 향상:
   • 매개변수를 명시적으로 표현하여 호출부에서 어떤 값을 전달하는지 쉽게 이해할 수 있습니다.

단점

1. 초기 작성이 번거로움:
   • 객체 형태로 정의해야 하므로 매개변수가 적을 때는 코드가 더 길어질 수 있습니다.

적합한 상황

• 매개변수가 많거나, 추가될 가능성이 높은 경우.
• 호출부에서 매개변수의 의미를 명시적으로 표현하고 싶을 때.
• 복잡한 POST요청

 

■ 결론

매개변수 처리 방식은 함수 설계의 중요한 요소로, 코드의 가독성, 유지보수성, 확장성에 큰 영향을 미칩니다.

1. 매개변수가 적고, 순서가 고정적이라면 직접 받기 방식이 간결하고 효과적입니다.
2. 매개변수가 많거나, 추가될 가능성이 있다면 객체로 받는 방식이 더 적합합니다.
3. 매개변수가 하나라면, 가장 간단한 방식으로 작성해 유지보수를 용이하게 만드세요.

이 원칙은 특정 라이브러리나 프레임워크를 넘어, 모든 프로그래밍에서 범용적으로 적용됩니다.