반응형

함수를 정의하고 매개변수 사용방법에 대해 이전 포스팅에서 같이 살펴봤습니다.

이번 포스팅에서는 함수를 호출하는 방법에 대해 알아보겠습니다.

 

함수를 호출하는 방법

우리가 함수를 정의하는 방법을 배웠는데요.

이름을 만들어 주고 어디선가 이름을 호출을 했을 때

무엇을 해야 하는지 정의해 주는 것입니다.

코드상에 함수를 정의했다고 실행이 되는 건 아닙니다.

말 그대로 정의 또는 선언만 한거지요.

그 상태로 두면 아무런 일도 하지 않고 스크립트가 종료되면

같이 사라지게 됩니다.

 

그렇다면 어떻게 해야 함수가 실행이 될까요?

바로 다음과 같이 구현하면

여러분이 만든 함수를 실행할 수 있습니다.

1
2
3
4
5
6
7
/*함수선언*/
function multiple(num1, num2) {
  return num1 * num2;
}
 
/*함수사용*/
multiple(24);
cs

함수 multiple을 선언하고

인수 2, 4를 입력해서 실행했습니다.

결과는 2*4를 실행하고 결과 8이 return 될 겁니다.

 

1
2
3
4
5
6
7
8
9
function mFunction(){
    function multiple(num1, num2){
        return num1 * num2;
    }
    
    console.log(multiple(24));
}
 
multiple(23);
cs

이번 예제는 실행하면 오류가 납니다.

이유는 바로 함수의 범위(scope)와 관련이 있습니다.

만약 mFunction();을 실행했다면 문제없이 8을 출력했을 겁니다.

하지만 multiple함수는 mFunciton함수 내부에 선언이 되었습니다.

그래서 mFunction 내부가 multiple함수의 범위(스코프)가 된답니다.

벗어나면 인식이 안되고

Uncaught ReferenceError: multiple is not defined

이 오류가 날 겁니다.

 

함수도 변수처럼 호이스팅이 되기 때문에

함수를 호출하는 부분이

선언하는 부분보다 먼저 구현이 되어 있어도

오류 없이 잘 실행이 됩니다.

 

1
2
3
4
5
6
7
8
9
mFunction();
 
function mFunction(){
    function multiple(num1, num2){
        return num1 * num2;
    }
    
    console.log(multiple(24));
}
cs

하지만 주의할 부분이 있는데요.

함수가 호이스팅 되는 것은 맞지만

함수를 선언한 경우만 가능하고

함수 표현식(변수처럼)으로 만든 경우는

오류가 발생한답니다.

 

함수를 호출할 때는 인수를 같이 넣을 수 있는데요.

인수는 문자열뿐만 아니라 숫자도 그리고 객체도 가능하답니다.

심지어 함수도 전달할 수 있다는 겁니다.

 

또한 함수는 함수 내부에서 자기 자신을 다시 호출할 수 있습니다.

재귀 호출이라고도 하는데요.

팩토리얼을 계산할 때 사용한다는 예제를 다른 프로그래밍 언어에서도 봤을 겁니다.

팩토리얼은 다음과 같습니다.

2! = 2 * 1 = 2
3! = 3 * 2 * 1 = 6
4! = 4 * 3 * 2 * 1 = 24
...

이를 자바스크립트 함수로 만들어 보겠습니다.

 

1
2
3
4
5
6
7
8
function factorial(num) {
  if (num <= 1return num;
  else return (factorial(num - 1* num);
}
 
var rst = factorial(3);
 
console.log(rst);
cs

6번 라인처럼 호출하면 된답니다.

 

지금까지 자바스크립트 함수를 호출하는 방법에 대해 알아봤습니다.

이렇게 함수를 호출하는 방법을 통해서

여러분의 소스에 잘 적용해 보시길 바랍니다.

감사합니다.

 

 

반응형