프로그래밍 언어 중 함수를 다른 변수와 동일하게 다루는 언어를 함수우선순위(First-class funcions)를 가졌다고 표현합니다. 예를 들어 함수를 다른 함수의 전달인자(Argument)로 사용하고, 함수에서 함수를 리턴하거나 변수의 값으로 함수를 할당할 수 있습니다.

예시 | 변수에 함수 할당

JavaScript

const foo = function() {
   console.log("foobar");
}
// 변수를 사용하여 호출
foo();

익명함수를 변수에 할당한 다음, 그 변수를 사용하여 끝에 괄호 ()를 추가하여 함수를 호출했습니다.

함수의 이름이 지정되었더라도, 변수 이름을 사용하여 함수를 호출할 수 있습니다. 이름을 지정하면 코드를 디버깅할 때 유용합니다. 하지만 우리가 호출하는 방식에는 영향을 미치지 않습니다.

예시| 함수를 인자로 전달

JavaScript

function sayHello() {
   return "Hello, ";
}
function greeting(helloMessage, name) {
  console.log(helloMessage() + name);
}
// `sayHello`를 `greeting` 함수에 인자로 전달
greeting(sayHello, "JavaScript!");

sayHello() 함수를 greeting() 함수의 인자로 전달했습니다. 이것이 함수를 어떻게 변수처럼 다루는지 보여주는 예시입니다.

다른 함수에 인자로 전달된 함수를 콜백 함수 라고 합니다. sayHello 는 콜백 함수입니다.

# 다른 언어들과 같이 일반적으로 알고있는 sayHello()의 경우 바로 호출됩니다. 하지만 인자로 전달된 sayHello의 경우 greeting 함수의 helloMessage 파라미터로 전달된 후에 필요할 경우에 helloMessage()에서 호출됩니다. 전달된 이후 나중에 호출되기 때문에 콜백함수로 불리게 되었습니다. 

예시| 함수 반환

JavaScript

function sayHello() {
   return function() {
      console.log("Hello!");
   }
}

함수가 함수를 반환하는 예시문입니다. JavaScript에서는 함수를 변수처럼 취급하기 때문에 함수를 반환할 수 있습니다.  

함수를 반환하는 함수를 Higher-Order Function이라고 부릅니다. 

다시 예시로 돌아갑시다. sayHello 함수를 호출하고 여기서  리턴된 익명함수를 를 호출하려면 두 가지 방법이 있습니다.

1- 변수 사용

const sayHello = function() {
   return function() {
      console.log("Hello!");
   }
} 

//1.sayHello 함수 호출(myFunc 변수에 리턴된 익명함수 저장)
const myFunc = sayHello();

//2.myFunc변수를 통해 sayHello 함수에서 리턴된 익명함수를 호출 
myFunc();

/* Note
sayHello(); <- 변수저장 없이 직접 호출 시 
           반환된 함수를 호출하는 것이 아닌 익명함수 자체를 반환
           (아무일도 일어나지 않음)
*/

이렇게 하면 Hello! 메시지가 출력됩니다.

만약에 sayHello 함수를 직접 호출하면, 반환된 함수를 호출하지않고 함수 자체를 반환합니다. 그러므로 반환된 함수를 다른 변수에 저장하여 사용해야합니다.

2- 이중 괄호 사용

function sayHello() {
   return function() {
      console.log("Hello!");
   }
}
sayHello()();

이중 괄호 ()()를 사용하여 반환된 함수도 호출합니다.

더 배우기

일반 지식

문서 태그 및 공헌자

이 페이지의 공헌자: henry_hwang, skatpgusskat, mdnwebdocs-bot, cs09g, seflix
최종 변경자: henry_hwang,