함수05 - 함수 선언문

"함수"

 

4.1. 함수 선언문

함수 선언문을 사용하여 함수를 정의하는 방식은 아래와 같다.

// 함수 선언문
function add(x, y) {
	return x + y;
}

// 함수 참조
// console.dir은 console.log와는 달리 함수 객체의 프로퍼티까지 출력한다.
// 단, Node.js 환경에서는 console.log와 같은 결과가 출력된다.
console.dir(add);	// f add(x, y)

// 함수 호출
console.log(add(2, 5));	// 7

 

함수 선언문은 함수 리터럴과 형태가 동일하다. 단, 함수 리터럴은 함수 이름을 생략할 수 있으나 함수 선언문은 함수 이름을 생략할 수 없다.

// 함수 선언문은 함수 이름을 생략할 수 없다
function (x, y) {
	return x + y;
}
// SyntaxError: function statements require a function name

함수 선언문은 표현식이 아닌 문이다. 즉, 크롬 개발자 도구에서 함수 선원문을 실행하면 완료 값(Complerion value) undefined를 출력한다. 함수 선언문이 만역 표현식인 문이라면 완료 값 undefined 대신 표현식이 평가되어 생성된 함수가 출력되어야 한다.

표현식이 아닌 문은 변수에 할당할 수 없다. 함수 선언문도 표현식이 아닌 문이므로 변수에 할당할 수 없다. 하지만 아래 예제를 실행해보면 함수 선언문이 변수에 할당되는 것처럼 보인다.

// 함수 선언문은 표현식이 아닌 문이므로 변수에 할당할 수 없다.
// 하지만 함수 선언문이 변수에 할당되는 것처럼 보인다.
var add = function add(x, y) {
	return x + y;
};

// 함수 호출
console.log(add(2, 5));	// 7

이렇게 동작하는 이유는 자바스크립트 엔진이 상황에 따라 동일한 함수 리터럴을 표현식이 아닌 문의 함수 선언문으로 해석하는 경우와 표현식인 문인 함수 리터럴 표현식으로 해석하는 경우가 있기 때문이다. 함수 선언문은 함수 이름을 생략할 수 없다는 점을 제외하면 함수 리터럴과 형태가 동일하다. 이는 함수 이름이 있는 함수 리터럴은 함수 선언문 또는 함수 리터럴 표현식으로 해석될 가능성이 있다는 의미이다.

 

자바스크립트 엔진은 함수 이름이 있는 함수 리터럴을 단독으로 사용하면 함수 선언문으로 해석하고 값으로 평가되어야만 하는 문맥, 예를 들어 함수 리터럴을 변수에 할당하거나 피연산자로 사용하면 함수 리터럴 표현식으로 해석하낟. 이때 함수 선언문이든 함수 리터럴이든 함수가 생성되는 것은 동일하다. 하지만 함수를 정의하는 내부 동작에 차이가 있다. 아래 예제를 살펴보자.

// 이름이 있는 함수 리터럴을 단독으로 사용하면 함수 선언문으로 해석한다.
// 함수 선언문은 함수 이름을 생략할 수 없다.
function foo() { console.log('foo'); }
foo();	// foo

// 함수 리터럴을 피연산자로 사용하면 함수 선언문이 아니라 함수 리터럴 표현식으로 해석한다.
// 함수 리터럴은 함수 이름을 생략할 수 있다.
(function bar() { console.log('bar') };);
bar();	// ReferenceError: bar is not defined

위 예제에서 단독으로 사용된 함수 리터럴(foo)는 함수 선언문으로 해석된다. 하지만 그룹 연산자 () 내에 있는 함수 리터럴(bar)은 함수 선언문으로 해석되지 않고 함수 리터럴 표현식으로 해석된다. 그룹 연산자의 피연산자는 값으로 평가할 수 있는 표현식이다. 따라서 표현식이 아닌 문인 함수 선언문은 피연산자로 사용할 수 없다.

 

이처럼 함수 리터럴은 상황에 따라 함수 선언문 또는 함수 리터럴 표현식으로 해석된다. 함수 선언문과 함수 리터럴 표현식은 함수 객체를 생성한다는 점에서 동일하지만 호출에 차이가 있다. 위 예제에서 함수 선언문으로 생성된 foo는 호출할 수 있으나 함수 리터럴 표현식으로 생성된 bar는 호출할 수 없다. 그 이유에 대해 살펴보자.

 

"함수 이름은 함수 몸체 내에서만 참조할 수 있는 식별자다"라고 했다. 이는 함수 몸체 외부에서는 함수 이름으로 함수를 참조할 수 없으므로 함수 몸체 외부에서는 함수 이름으로 함수를 호출할 수 없다는 의미이다. 즉, 함수를 가리키는 식별자가 없다는 것과 마찬가지다. 따라서 위 예제의 bar 함수는 호출할 수 없다.

 

하지만 위 예제에서 함수 선언문으로 정의된 함수는 foo라는 이름으로 호출할 수 있었다. foo는 함수 몸체 내부에서만 유효한 식별자인 함수 이름이므로 foo로 함수를 호출할 수 없어야 한다. foo라는 이름으로 함수를 호출하려면 foo는 함수 이름이 아니라 함수 객체를 할당한 식별자이어야 한다. 그런데 위 예제에는 식별자 doo를 선언한 적도 없고 할당한 적도 없다. foo는 도대체 무엇인가? 결론부터 말하자만 foo는 생성된 함수 객체를 할당하고 있는 자바스크립트 엔진이 암묵적으로 생성한 식별자이다.

함수 선언문은 실행되어 함수 객체를 생성한다. 이때 함수 이름은 함수 몸체 내부에서만 유효한 식별자이므로 생성된 함수 객체를 가리키는 식별자가 필요하다. 함수 객체를 가리키는 식별자가 없으면 생성된 함수 객체를 호출할 수 없고 아무도 참조하고 있지 않는 함수 객체는 가비지 컬렉터에 의해 메모리에서 해제된다. 이를 위해 자바스크립트 엔진은 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고 생성된 함수 객체를 할당한다.

 

함수 선언문을 의사 코드(pseudo code)로 표현하면 아래와 같다.

var add = function add(x, y) {
	return x + y;
};

console.log(add(2, 5));	// 7

함수는 함수 이름으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출한다. 즉, 함수 선언문 방식으로 생성된 함수를 호출한 것은 함수 이름 add이 아니라 자바스크립트 엔진이 암묵적으로 생성한 식별자 add인 것이다. 함수 이름과 변수 이름이 일치하므로 함수 이름으로 호출되는 듯 보이지만 사실은 식졀자로 호출된 것이다.

 

사실은 위 의사 코드가 바로 다음에 살펴볼 함수 표현식이다. 결론적으로 자바스크립트 엔진은 함수 선언문을 함수 표현식으로 변환하여 함수 객체를 생성한다고 생각할 수 있다. 단, 함수 선언문과 함수 표현식은 정확히 동일하게 동작하지는 않는다.(함수 호이스팅의 방식이 다름)