자바스크립트에서 함수는 객체이다.

함수가 객체라서 일반적인 객체의 기능을 모두 쓸 수 있다.

그리고 추가적으로 함수의 기능(호출되었을 때 지정된 로직 수행하기)도 수행할 수 있다.

하지만, 함수에는 일반 객체와 다르게 함수만의 표준 프로퍼티가 정의되어 있다.

function multiply(num1, num2) {
  return num1 * num2
}

• console.dir()로 확인해보니, multiply 함수에 다른 프로퍼티를 선언하지 않았는데도 arguments, caller, length 등 모르는 프로퍼티가 보인다.

• 함수는 생성자 함수 방식으로 만들어진다.

  // 함수의 생성자 함수
  new Function(arg1, arg2, ...argN, functionBody)
  
  // 생성자 함수로 만든 multiply 객체(함수)
  const multiply = new Function('num1', 'num2', 'return num1 * num2')
  
  // JS에서 함수는 호출이 가능한 특별한 객체이다
  multiply(2, 5) // 10

그러면.. 1급 객체는 뭐지?

자바스크립트에서 함수를 1급 객체(First-Class Citizen)라고 표현한다.

평소에 내가 알고 있는 First Class Citizen이란,

자유롭게 거주하고 일할 수 있고, 출입국의 자유를 가지며, 투표의 자유를 가지는 시민을 의미한다.

• Second Class Citizen이란 시민 또는 합법적인 거주자이지만 시민권 및 사회 경제적 기회가 제한되어 있는 시민을 의미한다. 예를 들면, 19세기 초 참정권을 가지지 못한 여성은 ‘Second Class Citizen’이라고 할 수 있다.

프로그래밍 세계에도 비슷한 개념이 존재한다.

특정 언어의 First-Class Citizen이란, 다른 객체들에게 적용 가능한 연산을 모두 지원하는 객체를 말한다.

즉, Type을 전달하고 반환하고 할당할 수 있는 경우에 해당 Type을 1급 객체로 간주한다.

자바스크립트에서 함수는 입력 값을 받으면 결과를 반환하는 구조면서, 함수 자체를 값으로 취급한다.

함수를 반환할 수도 있고 함수를 받을 수 있는 함수도 만들 수 있으니

함수형 프로그래밍으로 자바스크립트가 인기가 있는 이유이기도 하다!

1급 객체일 때 장점은?

• 하나 이상의 함수를 인수로 받거나 함수를 반환하는 고차 함수(Higher Order Function)를 만들 수 있다.
  • Javascript filter, map, sort 함수에 비해 효율적
• 콜백(Callback)을 사용할 수 있다.

1급 객체의 조건

• 변수나 데이터 구조로 할당할 수 있다.
  
• 파라미터로 전달할 수 있다.
  
• 반환 값(return value)으로 사용할 수 있다.
  

📨 함수 할당

1. 변수에 함수 할당

함수 표현식을 떠올리면 된다.

const sum = function (num) {
  return num + num
}

// 변수를 사용해 호출
sum(1)

• 함수가 이름을 가지고 있어도, 할당한 변수 이름을 사용해 함수를 호출할 수 있다.

• 이름을 지정하면 코드를 디버깅할 때 유용하고, 호출 방식에는 영향이 없다.

2. 함수를 객체의 키 값으로 할당

let movie = {
  name: '기생충',
  director: '봉준호',
  show: function () {
    console.log(movie.name + ' - ', move.director)
  },
}

📩 함수 전달

함수를 인자(argument)로 전달

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

sayHello() 함수를 greeting() 함수의 인자로 전달했다.

이 때, 다른 함수에 인자로 전달된 함수를 콜백 함수라고 한다. 따라서, sayHello 는 콜백 함수이다.

다른 예시를 한 번 더 살펴보자.

function add(num) {
  return num + num
}

// func는 매개변수로, 이름은 아무거나 지정해도 상관없다.
function addNum(func, number) {
  return func(number)
}

let result = addNum(add, 3) // 9

• result 변수에 addNum() 함수를 할당하고, 인자로 add() 를 받는다.

• 이 때, addNum() 인자로 다른 함수 add() 를 받아온다.

📮 함수 반환

고차 함수(Higher-order function)

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

함수가 함수를 반환하는 것으로, 자바스크립트에서는 함수를 변수처럼 취급하기 때문에 함수를 반환할 수 있다.

1. 변수 사용해서 호출하기

const sayHello = function () {
  return function () {
    console.log('Hello!')
  }
}
const myFunc = sayHello()
myFunc() // Hello!

만약에 sayHello 함수를 직접 호출하면, 반환된 함수를 호출하는 것이 아니라, 함수 자체를 반환한다.

그래서 반환된 함수를 다른 변수에 저장하여 사용해야 한다.

2. 이중 괄호 사용해서 호출하기

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

이중 괄호 ()()를 사용해서 반환한 함수를 호출할 수 있다.

✨ 정리

함수를 변수나 데이터에 할당할 수 있다. = 변수나 데이터 구조 안에 담을 수 있다.
함수를 인자로 전달할 수 있다. = 파라미터(parameter)로 전달할 수 있다.
함수를 리턴할 수 있다. = 반환 값으로 사용할 수 있다.

자바스크립트에서 함수는 위의 조건을 모두 충족하니까 1급 객체라고 할 수 있다.

참고 내용

mdn web docs

Javascript에서 왜 함수가 1급 객체일까요? by Soeun

자바스크립트 함수 by 2langk

일급 객체 by reveloper