TIL. [javascript] 함수의 종류와 return

문병곤·2020년 11월 7일

무심코 쓰던 return의 정확한 용법을 알고 싶어서 찾아봤다. return을 활용한 다양한 예제들을 보면 볼 수록 만만치 않았다. 일단은 쉬운 예제부터 차근차근 알아봤다. 어려운 예제는 다음 글을 통해서 추가로 공부할 것이다.

선언적 함수
function name ( param1, param2, param3 ) {};

익명 함수
function( param1, param2, param3 ) {};

변수 적용된 익명 함수
var name = function( param1, param2, param3 ) {};

for 문을 이용한 인자 출력

function numAll ( param1, param2, param3 ) {
   for ( var i = 0; i < arguments.length; i++ ) {     
       alert(arguments[i]);
   };
};
numAll();

다만 위의 코드를 실행하면 undefined에러가 나온다. numAll에 해당하는 인자가 정의되지 않았기 때문이다.

return

이제 리턴을 보자. 리턴은 함수 안에서 끝나는 곳에 들어가야 한다. return을 만나면 함수는 값을 출력하고 끝나게 되기 때문이다.

function sum(x){
  var y = x * 10;
  return y;
}

var a = 5;
var b = sum(a);

alert(b);

이 코드는 sum(x)에 대한 선언을 먼저하고 있다. 해당 선언의 조건에서 y란 변수는 x에 10을 곱하는 것으로 정의되어 있고, 동시에 y를 리턴하고 있다.

하지만 그 전에 var a = 5와 var b = sum(a)가 있다는 점을 떠올려야 한다. var과 관련된 호이스팅이란 개념에 따라 위의 코드에서 a = 5와 b = sum(a)이라는 내용이 가장 먼저 선언된다. 호이스팅에 대해서

그래서 위의 코드는 결과적으로 보면 다음과 같다.
b는 a를 sum(x)에서 x에 대입한 값이다 ->a에 할당된 5를 대입한다 -> 5 * 10는 y다 -> y 값을 리턴(출력)한다 -> b의 값인 50을 alert한다