[JavaScript] JavaScript의 일급객체란?

 

 

 

자바스크립트의 일급 객체가 무엇인지 알아보기 전에 함수의 선언식과 표현식에 대해 짚고 넘어가보겠습니다.

함수 선언식 & 함수 표현식

자바스크립트 함수에는 선언식(Function Declarations)과 표현식(Function Expressions)이 있습니다.

함수 선언식

function f1() {
  // ...
}

함수 표현식

• 표현식에는 아래와 같이 두가지 방식이 있습니다.

const a = function f1() {
  //...
};

const b = () => {
  // 화살표 함수(Arrow Functions)
};

 

 

표현식에서는 변수에 함수의 반환값이 아니라 함수 자체를 담는 모양새입니다.

선언식과 달리 변수에 함수를 어떻게 대입할 수 있는 것일까요?

이것을 이해하기 위해 자바스크립트에서 객체의 의미를 이해해야 할 필요가 있습니다.

 

 

자바스크립트 자료형

자바스크립트에서 자료형은 크게 원시 자료형과 객체로 나눌 수 있습니다.

원시 자료형

• string
• number
• boolean
• undefined
• null
• symbol

객체

• 배열 [ ]
• 함수 ( ) => { }
• 객체 리터럴 { }

배열과 함수가 객체인 이유는 무엇일까요?

그것은 바로 배열과 함수가 객체의 성질(속성 추가/수정/삭제)을 모두 사용할 수 있기 때문입니다.

그렇다고 해서 배열과 함수를 객체 리터럴처럼 속성을 조작하려고 사용하지는 않습니다.

배열은 연관된 데이터를 묶기 위함이고, 함수는 하나의 목적을 수행하기 위한 독립적인 코드를 묶는 위함으로 각자의 용도가 있습니다.

속성을 조작해야 한다면 객체 리터럴을 사용하면 됩니다.

// 가능은 하지만 이렇게 사용하지 않습니다.
const f1 = () => {};
f1.abc = 1;

console.log(f1.abc); // 1

 

일급 객체란?

자바스크립트에서 배열과 함수가 객체라는 것을 이해하고, 일급 객체에 대해 이야기 해보겠습니다.

 

정의

• 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 일급객체(first-class object)라고 합니다.
• 즉, 함수를 일반적인 값처럼 취급하는 것입니다.
• 'first-class'는 사용할 때 다른 요소들과 차별을 두지 않는다는 의미입니다.
• 자바스크립트에서 함수는 일급객체입니다.
• 일급객체 개념은 하나의 언어적인 특성으로, 자바스크립트에만 국한되지 않습니다. (Python, Go, Java 람다 등)

 

조건

일급 객체가 되기 위한 조건을 살펴보겠습니다.

 

1. 변수에 대입할 수 있습니다.

• 함수가 일급 객체이기 때문에 함수 표현식이 가능합니다.
• 자바스크립트 함수를 변수에 대입할 수 있다고 해서 자료형이 객체에서 원시자료형으로 바뀌는 것은 아닙니다.

const f1 = function () {
  console.log("Hello World");
};

// 자료형 확인
console.log(typeof f1); // 'function'

 

 

 

2. 함수의 파라미터로 전달할 수 있습니다.

• 함수가 일급 객체이기 때문에 콜백 함수를 사용할 수 있습니다.
• 다른 함수의 인자로 전달되는 함수를 콜백 함수(callback function)라고 합니다. 

// 예시 : 이벤트 리스너 등록
button.addEventListener('click', () = > {
  console.log('버튼 클릭')
});

 

3. 함수의 리턴값으로 사용할 수 있습니다.

• 함수가 일급 객체이기 때문에 고차함수를 만들 수 있습니다.
• 함수를 인자로 전달받거나 함수를 결과로 반환하는 함수를 고차함수(high order function)라고 합니다.
• 고차함수의 활용할 수 있는 예시로 커링(currying)이 있습니다. 커링은 원래 여러 개의 인자를 받는 함수를 단일 인자를 받는 함수로 변환하는 기법입니다.
• 자바스크립트에서는 클로저(함수가 선언된 환경을 기억하는 함수)를 통해 외부 변수를 계속 사용할 수 있는데, 이 부분을 커링에 활용하면 함수의 재사용성을 높일 수 있습니다.

const multiply = (a) => (b) => a * b;
const double = multiply(2);
const triple = multiply(3);

// a가 각각 2, 3이라는 것을 기억하고 있습니다.
double(5);  // 2 * 4 = 10
triple(7);  // 3 * 7 = 21

 

결론

• 자바스크립트에서 함수는 일급객체입니다.
• 일급객체는
  • 변수나 데이터에 담을 수 있으며
  • 함수의 파라미터로 전달할 수 있으며
  • 함수의 리턴값으로 사용할 수 있습니다.
• 따라서 함수표현식, 콜백함수, 고차함수 등의 사용이 가능합니다.

 

참고

• JavaScript 커링(Currying) 이해하기: 6가지 실전 활용 사례
• First-class citizen
• 일급 객체(first-class object) 란?
• 함수 표현식 vs 함수 선언식