JavaScript의 명명된 함수 표현식

다음과 같은 함수 표현식이 있다고 가정해 보겠습니다:

let test = function() {
	console.log('!');
};

test(); // '!'를 출력합니다

이 함수에 func라는 이름을 붙여 보겠습니다:

let test = function func() {
	console.log('!');
};

test();

이미 알고 계시듯이, 이 이름으로는 함수에 접근할 수 없습니다:

let test = function func() {
	console.log('!');
};

test(); // '!'를 출력합니다
func(); // 오류를 발생시킵니다

그렇다면 접근할 수 없는 이름을 함수에 붙이는 이유는 무엇일까요? 이유는 이 이름이 함수 외부에서는 접근할 수 없지만, 함수 내부에서는 접근할 수 있기 때문입니다.

확인해 보겠습니다:

let test = function func() {
	console.log(func); // 함수가 자신의 소스 코드를 출력합니다
};

test(); // 함수를 호출합니다

함수 내부에서 자기 자신을 호출해 보겠습니다:

let test = function func() {
	console.log('!'); // '!'를 출력합니다
	func(); // 자기 자신을 호출합니다
};

test();

이 코드를 실행하면 콘솔에 무한히 많은 메시지가 출력될 것입니다.

사실 우리 함수는 내부에서 func뿐만 아니라 test로도 호출될 수 있습니다:

let test = function func() {
	console.log('!');
	test(); // 자기 자신을 호출합니다
};

test();

그렇다면 차이점은 무엇일까요? 차이점은 test라는 이름이 단순한 변수라는 점입니다. 스크립트 실행 과정에서 우리 함수가 다른 변수에 할당되거나 매개변수로 전달될 수 있는데, 이 경우 test 변수와 함수 사이의 연결이 끊어질 수 있습니다.

반면, func라는 이름은 함수 내부에서 자신을 참조할 수 있도록 함수에 강력하게 바인딩되어 있습니다.

이러한 함수 이름이 있는 Function Expression을 명명된 함수 표현식이라고 합니다.