JavaScript에서 함수 표현식의 미묘한 차이

함수 표현식(Function Expression)이라는 이름은 단순히 붙여진 것이 아닙니다. 이것은 정말로 그러한 함수들이 어떤 표현식의 일부라는 것을 의미합니다.

예를 들어, 어떤 문자열과 이름 없는 함수를 더할 수 있습니다:

let str = 'str' + function() {return 3;};
console.log(str); // 'strfunction() {return 3;}'을 출력합니다.

왜 숫자 3이 아닌 그렇게 이상한 결과를 보게 될까요? 왜냐하면 두 번째 피연산자는 함수의 결과가 아니라 함수의 소스 코드이기 때문입니다 (우리는 그 함수를 호출하지 않고 단지 작성했을 뿐입니다).

즉, 함수 표현식이라는 이름은 그러한 함수가 어떤 표현식에 참여한다는 것을 나타냅니다.

변수에 할당하는 것도 표현식입니다:

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

예를 들어, 함수를 console.log의 매개변수로 전달할 수도 있고, 그것은 콘솔에 그 함수의 소스 코드를 출력할 것입니다 - 이것 역시 표현식으로 간주됩니다:

console.log(function() {return 3;});

이것이 중요한 이유: 함수 선언(Function Declaration)과 함수 표현식(Function Expression)의 차이가 첫 번째 함수는 이름을 가지고 생성되고 두 번째 함수는 처음부터 이름을 가지고 있지 않다는 점에 있는 것이 전혀 아니기 때문입니다. 이것은 사실이 아닙니다.

예제. 여기 이름 없는 함수가 있지만, 어떤 표현식에도 참여하지 않습니다 (간단히 말해, 그것과 함께 어떤 동작도 수행되지 않습니다):

/*
	이 함수는 함수 선언(Function Declaration)이 되지만,
	구문 오류가 있을 것입니다:
*/
function() {
	console.log('!');
}

그런 코드는 아예 오류를 발생시킬 것입니다! 이유: 함수가 어떤 표현식에도 참여하지 않기 때문에, 브라우저는 그것을 함수 선언(Function Declaration)으로 간주하지만, 그 이름을 찾을 수 없어 오류를 발생시킵니다.

오류를 없애려면 함수가 어떤 표현식의 일부가 되도록 만들어야 합니다. 예를 들어, 그 앞에 + 연산을 써봅시다:

+function() { // 이런 코드는 정확합니다.
	console.log('!');
};

작동 원리: + 연산 자체는 아무것도 하지 않습니다, 이것은 숫자 3 대신 +3를 쓰는 것과 같습니다 - 허용되지만, 아무것도 변경하지 않습니다.

그러나 함수의 경우에는 - 변경합니다. 이제 우리의 함수는 단순히 작성된 것이 아니라 표현식에 참여합니다. 따라서 이제는 오류가 발생하지 않을 것입니다. 함수를 호출하지 않고 단지 작성했기 때문에 함수 실행 결과도 없을 것입니다.

+ 대신 무엇이든 쓸 수 있습니다. 예를 들어:

-function() { // 이런 코드는 정확합니다.
	console.log('!');
};

!function() { // 이런 코드는 정확합니다.
	console.log('!');
};

또한 우리의 함수를 둥근 괄호로 묶을 수도 있으며, 이 경우에도 그것은 함수 표현식이 될 것입니다:

(function() { // 이런 코드는 정확합니다.
	console.log('!');
});