[JavaScript]익명 함수(Anonymous Functions)

익명 함수

JavaScript의 익명 함수는 이름이 없는 함수입니다. 함수 표현식으로 익명 함수를 변수에 할당하지 않거나 또는 익명 함수를 소괄호로 감싸지 않으면 다음과 같이 함수 이름이 필요하다는 구문 오류가 발생합니다.

function() {
  console.log('Hello');
};

에러 내용

구문 오류를 해결하기 위해 익명 함수를 변수에 할당하거나 익명 함수를 소괄호로 감쌉니다.

 

다음 예제는 익명 함수를 소괄호로 감싸며, 함수 표현식이 반환되는 것을 확인할 수 있습니다.

(function() {
  console.log('Hello');
});

실행 결과

다음 예제는 익명 함수를 변수에 할당 후 함수를 호출합니다.

let hello = function() {
  console.log('Hello');
}

hello(); // Hello

JavaScript의 익명 함수는 초기 생성 후 접근할 수 없습니다. 따라서 익명 함수를 사용하기 위해서는 변수에 할당해야 하며, 함수가 할당된 변수를 함수 변수라고 말합니다.

---

익명 함수를 인수로 사용

익명 함수는 다른 함수의 인수로 전달되거나 반환될 수 있습니다.

 

다음 예제는 익명 함수를 다른 함수의 인수로 전달합니다.

// show() 함수는 단일 함수를 인자로 가집니다.
function show(func) {
  func();
};

// show() 함수에 익명 함수를 인수로 전달합니다.
show(function() {
  console.log('익명 함수 호출');
});

실행 결과

익명 함수 호출

위 예제에서 show() 메서드는 함수를 인자로 가지는 함수입니다. '익명 함수 호출'이라는 문자열을 콘솔에 출력하는 익명 함수를 show() 함수에 전달했으며, 익명 함수에 의해 출력된 내용을 콘솔에서 확인할 수 있습니다.

 

다음은 익명 함수를 함수에 전달하는 유명한 또 다른 예제입니다. setTimeout() 함수는 인자로 전달받은 함수를 n초 후 실행합니다.

setTimeout(function () {
  console.log('3초 후 실행');
}, 3000);

실행 결과

3초 후 실행

---

함수 선언 후 즉시 호출

때로는 함수를 선언한 직후 바로 호출해야 하는 경우가 존재합니다. 익명 함수를 소괄호로 감싸고 뒤에 소괄호를 추가하여 익명 함수를 즉시 호출할 수 있습니다.

(function() {
  console.log('Hello');
})();

다음 예제처럼 소괄호에 인수를 전달할 수 있습니다.

(function(text) {
  console.log(text);
})('hi');

---

화살표 함수

JavaScript에서 화살표 함수는 익명 함수의 또 다른 사용 방법입니다. 익명 함수를 사용하면 코드를 더 짧고 간결하게 작성할 수 있으므로 코드의 가독성을 증가시킵니다.

// 1. 단일 매개변수인 경우
param => expression

// 2. 여러 개의 매개변수
(param1, param2, param3) => expression

// 3. 0개의 매개변수
() => expression

// 4. 여러 개의 매개변수와 여러 줄의 코드가 존재
(param1, param2, param3) => {
  // code...
  return value;
}

화살표 함수의 표현식이 간단하여 한 줄로 작성할 수 있는 경우 return 키워드와 중괄호를 생략할 수 있습니다.

---

정리

• JavaScript에서 이름이 없는 함수를 익명 함수라고 말합니다.
• 익명 함수를 호출하기 위해서는 변수에 할당해야 합니다.
• 화살표 함수는 일종의 익명 함수입니다.