제 생각이 맞는지 궁금합니다.

한 입 크기로 잘라먹는 타입스크립트(TypeScript)

함수 오버로딩

해결된 질문

작성

생각해보면 그냥 함수하나 정의해놓고 매개변수를 선택적 프로퍼티로 정의하면 되지않았나? 하고

// 오버로딩을 하지않고?
function test(a: number, b?: number, c?: number): void {
  if (typeof b === "number" && typeof c === "number") {
    console.log("테스트 동작하나?", a + b + c);
  } else {
    console.log(a * 10, "A만 들어왔나봐~");
  }
}

test(1);
test(1, 2);
test(1, 2, 3);

// 출력값
// 10 A만 들어왔나봐~
// 10 A만 들어왔나봐~
// 테스트 동작하나? 6

이런식으로 정의해봤습니다.

하지만, 사실 함수 로직상에는
1. a만 들어왔을 때
2. a,b,c 만 들어왔을 때
를 생각하고 짜여져 있는데
test(1,2) 를 넣었을때 test(1) 을 넣은값이랑 똑같이 출력되는걸 보고 이런 동작을 막을려고 사용한건가? 싶은 생각이 들긴했습니다. 이런 이유도 있을까요?

typescript

답변 1

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

네 맞습니다. 이런 이유에서도 함수 오버로딩이 필요하다고 할 수 있죠, 좀 더 필요성을 강하게 느낄 수 있는 예시를 들어보자면 다음과 같습니다.

test 함수를 매개변수 a만 전달받거나 a,b,c를 다 전달받게 만들고 싶다

위와 같은 경우 조건식으로도 함수 내부에서의 처리는 가능하겠지만, 함수 오버로딩을 활용하지 않고서는 함수 호출에서 이를 제한할 방법은 없습니다. 쉽게 말해 test(1,2)를 오류로 표시할 방법이 없다는 것이죠

그러나 다음과 같이 함수 오버로딩을 사용하면 가능합니다.

function test(a: number): void;
function test(a: number, b: number, c: number): void;

function test(a: number, b?: number, c?: number): void {
  if (b !== undefined && c !== undefined) {
    // a, b, c가 모두 들어온 경우
    console.log("테스트 동작하나?", a + b + c);
  } else if (b === undefined && c === undefined) {
    // a만 들어온 경우
    console.log(a * 10, "A만 들어왔나봐~");
  } else {
    // b나 c가 하나만 들어왔을 때는 허용하지 않음 (아무 동작도 하지 않음)
    throw new Error("Invalid number of arguments. Either provide only 'a', or all three arguments 'a', 'b', 'c'.");
  }
}

test(1);         // 출력: 10 A만 들어왔나봐~
test(1, 2, 3);   // 출력: 테스트 동작하나? 6
test(1, 2);      // 오류 발생: Invalid number of arguments

이밖에도 함수 오버로딩을 활용할 수 있는 경우는 많지만, 그렇다고 꼭 무조건 자주 활용해야 한다는 것은 아닙니다. 함수 오버로딩의 주요 목적은 허용되지 않는 함수 호출을 방지하기 위해서 라는 점을 기억해주시면 좋을 것 같습니다 😃

hollis9797

질문자

친절한 답변 감사합니다!!!

인프런 커뮤니티 질문&답변

제 생각이 맞는지 궁금합니다.