함수 오버로드

함수 오버로드는 전달받은 매개변수의 개수나 타입에 따라 다른 동작을 하게 하는 것을 의미한다.

자바스크립트는 동일한 매개변수라도 다른 타입을 가지는 것이 가능한 언어이다.

함수 오버로드를 언제 사용하면 좋을까?

매개변수의 개수나 타입에 따라서 함수가 다르게 동작해야 하는 경우에 함수 오버로드를 사용할 수 있다.

interface User {
	name: string;
	age: number;
}

function join(name: string, age: number | string): User | string {
	if (typeof age === 'number') {
		return {
			name,
			age,
		};
	} else {
		return "나이는 숫자로 입력해주세요.";
	}
}

const sam: User = join("Sam", 30); // ❌ sam에서 에러
const jane: string = join("Jane", "30"); // ❌ jane에서 에러

join 함수에서

• age가 number 이면 User를 리턴하고,
• age가 string 이면 "나이는 숫자로 입력해주세요." 라는 string 이 리턴된다.

✔️ 즉, 매개변수 age의 타입은 number 또는 string이 될 수 있고, 함수 join의 리턴 타입은 User 또는 string이 되는 것이다.

함수 자체는 에러가 발생하지 않지만, 위의 예시에서 const 로 선언한 sam과 jane에서 에러가 발생한다.

에러가 발생하는 이유는 타입스크립트가 sam이 User 객체를 리턴하는데에 확신이 없어서이다. 즉, sam이 string을 리턴할 수도 있다고 생각하는 것이다.

마찬가지로, 타입스크립트는 jane이 string을 리턴하는 데에 확신이 없어서 (즉, jane이 User객체를 리턴할 수도 있다고 생각) 에러를 발생시킨다.

함수 오버로드를 사용한 예시

interface User {
	name: string;
	age: number;
}
// ✨ 함수 오버로드 작성
function join(name: string, age: string): string;
// age가 string일 경우 join은 string을 리턴한다.
function join(name: string, age: number): User;
// age가 number일 경우 join은 User객체를 리턴한다.

function join(name: string, age: number | string): User | string {
	if (typeof age === 'number') {
		return {
			name,
			age,
		};
	} else {
		return "나이는 숫자로 입력해주세요.";
	}
}

const sam: User = join("Sam", 30); // ⭕️ 
const jane: string = join("Jane", "30"); // ⭕️ 

위의 코드와 같이 함수 오버로드는 함수 위에 작성한다.
매개변수의 개수나 타입에 따라, 어떤 타입을 리턴할지 미리 지정해서 함수의 동작을 다르게 할 수 있다.

References

코딩앙마 - 타입스크립트 #4 함수