자바스크립트 함수는 매개변수에 따라 다르게 활용될까?

인트로

자바 Java의 OOP 개념 중에 메소드 오버로딩 Method Overloading이 있다.

이는 메소드가 동일 이름을 가지고 있어도, 들어가는 매개변수가 다르면 다르게 인식된다는 의미이다.

 

pulbic int getGrade(){...}
pulbic int getGrade(int a){...}
pulbic int getGrade(int a, int b){...}

 

 

위 getGrade() 함수는 모두 “getGrade” 라는 함수명을 가지고 있지만 모두 다른 함수로 사용 될 수 있다.

그래서 개발자는 메소드 오버로딩을 활용해 함수의 재사용성을 높일 수 있다.

 

그렇담, 자바스크립트 Javascript 에선 어떨까?

 

매개변수가 함수를 결정 짓지 않는다.

결론부터 말하면 자바스크립트는 매개변수가 없든, 100개를 입력 받든 모두 하나로 인식한다.

 

function getGrade() {
  console.log("empty arguments");
}

// SyntaxError: Identifier 'getGrade' has already been declared
function getGrade(var1) {
  console.log("only one arguments");
}

 

위 처럼 getGrade 라는 함수명을 사용해, empty arguments 와 1개의 매개변수를 받는 함수를 작성했다.

하지만 이렇게 하면 getGrade가 이미 선언되었다며 에러를 터트린다!

 

SyntaxError: /src/callback.js: Identifier 'getGrade' has already been declared (55:9)

 

선언한 함수와 다르게 매개변수 보낸다면?

1️⃣ 매개변수를 비워서(empty) 보낸다면?  

function getGrade() {
  console.log("empty arguments");
}

getGrade();		//empty arguments
getGrade(123);		//empty arguments

 

이처럼 getGrade 함수는 no-argument로 선언하였는데, 갑자기 123이란 파라미터를 보내면 어떻게 될까?

자바스크립트는 받는 매개변수가 없이 되어 있기 때문에, 별다른 에러를 내지 않고 콘솔에 empty arguments를 두 번 찍게 된다!

 

2️⃣ 매개변수를 선언한 것 보다 더 많이 보낸다면?

자바스크립트에선 정해진 매개변수의 값을 제공받지 않는다면, 암시적으로 undefined를 반환하고 있다.

 

function getText(a,b,c,d,e) {
	console.log(a, b, c, d, e);
}

getText();				// undefined undefined undefined undefined undefined
getText(1,2,3,4,5,6,7,8,9);		// 1 2 3 4 5
getText(1,2,3);				// 1 2 3 undefined undefined
getText('','',1,2,3);			// undefined undefined 1 2 3

 

해당 매개변수가 없는 경우엔 undefined 를 반환하고 있다.

쉽게 이해하려면,
쉼표로 매개변수를 구분하고, 쉼표 위치별로 변수가 맵핑된다고 생각하면 된다.

 

결론, 그리고 JS에서 함수를 대하는 자세

우리는 자바스크립트의 함수를 좀더 유연하게, 자유롭게 대해도 괜찮다.

위의 예시에서 보았듯, 자바스크립트에서 함수는 그 함수명으로 오직 한 개만 선언 할 수 있다.

그리고 매개변수 개수와 관계 없이 변수를 마음대로 전달해도 괜찮다! 왜냐고? 어차피 JS가 알아서 실행시키니 말이다.

 

재선언이나 재사용을 고려할 필요 없이, 어떤 함수명으로 지을지만 고민하면 된다 :D

자바스크립트에서저렇게 다양하게 들어오는 매개변수를 다루는 방법이 있는데,
그건 다음 포스팅에서 다루겠다.