자바스크립트 함수는 매개변수와 반환문의 유무에 따라 4가지 경우의 수로 나눌 수 있습니다. 매개변수가 없고, 반환문이 있는 경우 함수 내부에는 구체적인 명령어가 없어서 데이터를 return 제어문을 이용해서 이동시켜야 합니다.
자바스크립트 함수의 매개변수와 반환문
자바스크립트 함수의 매개변수(parameter)는 함수 호출시 데이터를 입력받는 기능을 말합니다.
반환문은 return 제어문을 사용해서 함수의 연산 결과중 원하는 값을 지정해서 호출 위치로 복구 시키는 기능을 말합니다.
document.write(), alert()와 같이 구체적인 행동 명령이 있는 함수의 경우 return 제어문은 필요없습니다. 왜냐하면 함수는 원래 종료되면 호출 위치로 자동 복귀하기 때문입니다.
하지만 단순 연산을 한 상태로 아무런 행동 명령어가 없는 함수의 경우 어떤 값을 호출 위치로 이동시켜야 하는지 지정되있지 않기 때문에 반드시 return 제어문이 필요합니다.
이렇게 매개변수와 return 제어문이 있는가에 따라서 4가지 경우의 수로 함수를 나눠볼 수 있습니다.
자바스크립트 함수 매개변수 X, 반환문 X
함수의 매개변수가 없다는 말은 함수 호출시 어떤 데이터도 함수로 부터 이동하지 않는다는 것을 말합니다.
반환문이 없다는 것은 함수에서 document.write(), alert()와 같이 이미 어떤 명령어가 기록되있다는 것을 말합니다. 이 경우 함수가 종료되면 호출 위치로 돌아가면 결과값이 그대로 출력됩니다.
<script>
//매개변수가 없는 함수 선언
function num ()
{
document.write("Hello World!");
}
//함수 호출
num();
</script>결과
Hello World!자바스크립트 함수 매개변수 X, 반환문 O
같은 경우로 매개변수가 없는 경우입니다. 이 때 반환문이 있는 경우 함수 내부에서 출력을 할 필요없습니다. return 제어문 뒤의 값이 함수 호출시 반환되기 때문입니다.
이렇게 return 제어문이 없는 경우 var sum = "Hello World!"; 명령어 자체는 값을 변수에 저장했다는 신호이므로 함수에 아무런 기능이 없는 상태입니다. 따라서 num(); 으로 함수를 호출해도 아무런 반응이 없습니다.
<script>
//매개변수가 없는 함수 선언
function num ()
{
var sum = "Hello World!";
}
//함수 호출
num();
</script>결과
오류return 제어문을 단순히 삽입해도 문제는 해결되지 않습니다. 역시 변수 자체를 이동시킨 것일뿐입니다. num(); 함수에 들어있는 값은 변수 자체이므로 사실 아래의 함수 호출은 그냥 웹페이지에 var sum = "Hello World!"; 라고 변수값만 저장해놓고 아무런 출력 명령을 작성하지 않는 것과 같습니다. 따라서 역시 아무런 반응이 없는 코드입니다.
<script>
//매개변수가 없는 함수 선언
function num ()
{
var sum = "Hello World!";
//반환할 값 지정
return sum;
}
//함수 호출
num();
</script>결과
오류따라서 함수 호출시 함수의 결과 자체를 일단 변수에 다시 저장을 하고, 출력 명령 등 구체적인 행동을 지시해야 합니다. 이 최종 예시가 바로 매개변수가 없고 반환문이 있는 경우입니다.
<script>
//매개변수가 없는 함수 선언
function num ()
{
var sum = "Hello World!";
//반환할 값 지정
return sum;
}
//함수 호출 및 변수에 저장
var result = num();
//함수로 부터 받은 값 출력
document.write(result);
</script>결과
Hello World!자바스크립트 함수 매개변수 O, 반환문 X
매개변수가 있다는 것은 함수 호출시 데이터를 입력받는 다는 것을 말합니다.
이 때 반환문이 없으려면 입력받은 매개변수를 함수 내부에서 처리한 다음 document.write(), alert()와 같은 구체적인 명령어가 존재해야 합니다.
함수 호출시 인수(arguments)인 "Hello"와 "World!"가 매개변수(parameter) 자리로 이동됩니다. 이후 연산이 된 다음 document.write(); 명령어가 있으므로 return 제어문이 필요 없습니다.
<script>
//인수 a, b를 매개변수 A, B로 전달받는 문자 결합 함수
function plus ( A, B )
{
var sum = A + B;
document.write(sum);
}
//함수 호출 및 인수 입력
plus ("Hello", "World!");
</script>결과
HelloWorld!자바스크립트 함수 매개변수 O, 반환문 O
같은 예제를 매개변수와 반환문이 모두 있는 경우로 바꿀 경우 변수를 몇 개 추가해야 합니다.
<script>
//인수 a, b를 매개변수 A, B로 전달받는 문자 결합 함수
function plus ( A, B )
{
var sum = A + B;
//반환할 값 지정
return sum;
}
//함수 호출 및 반환값 변수에 저장
var result = plus ("Hello", "World!");
//결과 출력
document.write(result);
</script>결과
HelloWorld!함수 호출시 전달한 인수가 함수의 매개 변수로 이동됩니다. 매개 변수에 입력된 값이 함수 코드 블록에서 연산된 후 return 제어문에 입력된 값이 반환되어 함수 호출부로 함께 이동됩니다.