함수 오버로딩

함수 오버로딩이란?

하나의 함수를 매개변수의 개수나 타입에 따라 여러가지 버전으로 만드는 문법

단, 오버로딩을 사용하기 전 여러가지 버전의 형태를 먼저 정의해야한다. 이 때 함수의 구현부를 제외한 선언부만 작성한다. 매개변수만 명시하면 된다.

/* 여러가지 버전의 형태를 정의한것을 [ 오버로드 시그니처 ] 라고한다. */
function func (x:number): void;
function func (x:number,y:number,z:number): void;


/* 오버로드 시그니처의 구현부를 정의한것을 [ 구현부 시그니처 ] 라고한다. */
function func(){}

// 위에서 실제로 정의한 func(){} 함수와 다르게 매개변수와 상관없이 오버로드 시그니처의 형태로 타입 에러가 발생한다.
func() //error : 1-3개의 인수가 필요한데 0개를 가져왔습니다.
func(1)
func(1,2)//error : 오버로드에 2 인수가 필요하지 않지만, 1 또는 3인수가 필요한 오버로드가 있습니다.
func(1,2,3)

//실제로 함수를 구현하고 사용할 때 오버로드 시그니처와 같은 형태의 매개변수를 선언해야한다!
function func(x:number,y:number,z:number){}

//그런데 이렇게 사용하려고하면 오버로드 시그니처 부분에서 타입 에러가 발생한다.
function func (x:number): void; //error: 이 오버로드 시그니처는 해당 구현 시그니처와 호환되지 않습니다.

모든 오버로드 시그니처의 형태를 포함하는 함수의 형태로 사용해야한다..

function func (x:number): void;
function func (x:number,y:number,z:number): void;


function func(x:number,y?:number,z?:number){
  //조건 : 매개변수가 3개이면 더한 값 리턴 아니면 x에 20 곱한 값을 리턴하는 함수
	if(typeof y === 'number' && typeof z === 'number') {
    	return x + y + z
    }else{
      	return x * 20
    }
}

자바스크립트는 본래 함수 오버로딩 기능이 없다고 합니다.

function func (x,y){}
function func (){}

// 이렇게 작성하면 아래 매개변수가 없는 함수가 매개변수 2개짜리 함수를 잡아먹습니다.
// 정확히는 메모리에 저장된 함수가 덮어씌워지는 것 이겠죠

function func(x,y,cb){
  if(y && !cb){
    return x + y
  }
  
  if(typeof cb === 'function'){
    return cb(x,y)
  }
  
  return `x에 10 더한 값 :  ${x + 10}`
}

func(10)
func(10,100)
func(10,100,(x,y)=>{console.log(`그냥 출력하기 x:${x} y:${y}`)})

과거에는 이렇게.. 분기처리해서 오버로딩 했다고해요. 그러나 타입스크립트에서는 지원합니다!

반전

ES6 Arrow Function 에서는 사용이 불가 ㅠㅠ