익명함수(Anonymous function)

자바스크립트 익명 함수는 함수명 대신 변수명에 함수 코드를 저장하는 구현 방식이다. 익명 함수의 소스 코드는 변수값이므로 끝에 세미콜론 ; 을 대입한다. 익명 함수는 호출 시 변수명을 함수명처럼 사용하면 된다.

구조

  var 변수명 = function( 매개변수 )
  {
    실행문;
  };

이 경우 변수값을 변수에 넣은 형태이므로 함수 코드 끝에 세미콜론을 붙여준다.

hello라는 변수명에 "Hello World!"라는 문자가 출력되는 함수 코드를 저장했다.
hello()로 익명 함수를 호출하면, 소스코드가 실행된다.

<script>
  // 익명 함수 선언 및 변수에 대입
  var hello = function( ) {
    document.write("Hello World!");
  };

//익명 함수 변수명으로 호출
hello();
// result : Hello World!
</script>

익명함수 + 반환문

return 제어문으로 반환이 되는 경우는 익명 함수를 다른 명령어에 대입시키면 된다.
함수를 괄호와 함께 변수처럼 원하는 곳에 기입하면 된다.

// 익명 함수 선언 및 변수에 대입
var hi = function( ) {
  var string = "Hello World!";
  return string;
};

//익명 함수의 변수를 출력
document.write( hi( ) );
// result : Hello World!

익명 함수의 매개 변수와 반환문이 모두 있는 경우에도 정상 함수와 똑같이 작동한다.

//익명 함수 선언 및 매개변수 사용
var fusion = function( a, b ) {
  var z = a + b;
  return z;
};

//익명 함수의 변수를 출력 및 인수 입력
document.write( fusion( "Hello", "World!" ) );
// result : HelloWorld!

익명함수의 변수명 변경

익명 함수는 함수 코드가 변수명에 저장된 형태이다.
따라서 변수값으로 구성된 함수 코드를 다른 변수명에 마치 변수를 대입하듯이 이동시킬 수 있다.

자바스크립트에서 등호 = 기호는 좌변과 우변의 같음을 의미하는 것이 아니다.
우변의 값을 좌변에 대입하라는 의미이다. 그래서 기호 이름도 대입 연산자 = 이다.
apple 변수명에 저장되어 있던 함수 코드가 변수명 banana에도 대입되었다.

//익명 함수 선언
var apple = function( ) {
  document.write("This is a banana.");
};

//변수명 교체
var banana = apple;

//변경된 변수명으로 함수 호출
banana( );
// result : This is a banana.

단점

호이스팅(함수 선언 보다 함수 호출이 윗 줄에 위치해도 실행되는 기능)이 적용되지 않는다.

//익명 함수 호출
orange( );

//익명 함수 선언
var orange = function( ) {
  document.write("This is an orange.");
};
// result : 오류

반면 일반적인 함수명으로 작성한 함수는 선언부가 후반에 와도 함수 호출은 잘 작동한다.

//일반 함수 호출
Good( );
// result : Good Job!

//일반 함수 선언
function Good( ) {
  document.write("Good Job!");
}

익명 함수는 호이스팅이 작동하지 않고, 일반 함수는 작동한다.

출처 : https://dasima.xyz/javascript-anonymous-function/