자바스크립트 익명 함수는 함수명 대신 변수명에 함수 코드를 저장하는 구현 방식입니다. 익명 함수의 소스 코드는 변수값이므로 끝에 세미콜론 ; 을 대입합니다. 익명 함수는 호출시 변수명을 함수명처럼 사용하면 됩니다.
자바스크립트 익명 함수 구조
자바스크립트의 익명 함수(anonymous function)는 변수에 함수의 코드를 저장하는 대신 함수명을 사용하지 않습니다. 대신 변수명을 마치 함수명처럼 사용해서 함수를 호출하거나 변수값을 이동시키는데 사용할 수 있습니다.
<script>
var 변수명 = function( 매개변수 )
{
실행문;
};
</script>이 경우 변수값을 변수에 넣은 형태이므로 함수 코드 끝에 세미콜론을 붙여줍니다.
hello라는 변수명에 "Hello World!"라는 문자가 출력되는 함수 코드를 저장했습니다. hello()로 익명 함수를 호출하면, 소스코드가 실행됩니다.
<script>
//익명 함수 선언 및 변수에 대입
var hello = function()
{
document.write("Hello World!");
};
//익명 함수 변수명으로 호출
hello();
</script>결과
Hello World!자바스크립트 익명 함수 + 반환문
return 제어문으로 반환이 되는 경우는 익명 함수를 다른 명령어에 대입시키면 됩니다. 함수를 괄호와 함께 변수처럼 원하는 곳에 기입하면 됩니다.
<script>
//익명 함수 선언 및 변수에 대입
var hi = function()
{
var string = "Hello World!";
return string;
};
//익명 함수의 변수를 출력
document.write( hi() );
</script>결과
Hello World!자바스크립트 익명 함수 매개 변수 O, 반환문 O
익명 함수의 매개 변수와 반환문이 모두 있는 경우에도 정상 함수와 똑같이 작동합니다.
<script>
//익명 함수 선언 및 매개변수 사용
var fusion = function( a, b )
{
var z = a + b;
return z;
};
//익명 함수의 변수를 출력 및 인수 입력
document.write( fusion( "Hello", "World!" ) );
</script>결과
HelloWorld!자바스크립트 익명 함수의 변수명 변경
익명 함수는 함수 코드가 변수명에 저장된 형태입니다. 따라서 변수값으로 구성된 함수 코드를 다른 변수명에 마치 변수를 대입하듯이 이동시킬 수 있습니다.
자바스크립트에서 등호 = 기호는 좌변과 우변의 같음을 의미하는 것이 아닙니다. 우변의 값을 좌변에 대입하라는 의미입니다. 그래서 기호 이름도 대입 연산자 = 입니다.
apple 변수명에 저장되있던 함수 코드가 변수명 banana에도 대입되었습니다.
<script>
//익명 함수 선언
var apple = function()
{
document.write("This is a banana.");
};
//변수명 교체
var banana = apple;
//변경된 변수명으로 함수 호출
banana();
</script>결과
This is a banana.자바스크립트 익명 함수 단점 : 호이스팅 불가
자바스크립트 익명 함수는 호이스팅(함수 선언 보다 함수 호출이 윗 줄에 위치해도 실행되는 기능)이 적용되지 않습니다.
<script>
//익명 함수 호출
orange();
//익명 함수 선언
var orange = function()
{
document.write("This is an orange.");
};
</script>결과
오류반면 일반적인 함수명으로 작성한 함수는 선언부가 후반에 와도 함수 호출은 잘 작동합니다.
<script>
//일반 함수 호출
Good();
//일반 함수 선언
function Good()
{
document.write("Good Job!");
}
</script>결과
Good Job!익명 함수는 호스팅이 작동하지 않고, 일반 함수는 작동합니다.