JavaScript를 공부하다보면 자바스크립트에서 함수는 일급객체다.라는 말을 종종 들을 수 있다.
일급객체가 무엇이고 나아가 고차함수, 콜백함수까지 간단히 정리해보고자 한다.
일급객체(First Class Object)의 정의
일급객체(First-class Object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. [위키백과]
처음 '일급'이란 뜻을 보고 특별한 혜택이나 아주 중요한 객체를 뜻하는줄 알았으나, 사용할 때 다른 요소들과 아무런 차별이 없다는 뜻이다.
일급 객체는 JavaScript에만 있는것이 아니라, 다양한 언어에서도 일급 객체 개념을 갖고있다.
보통 일급 객체를 아래의 조건을 모두 만족하는 객체를 말한다.
일급객체의 특성 및 조건
모든 일급 객체는 변수나 데이터에 담을 수 있어야한다.
모든 일급 객체는 함수의 파라미터로 전달할 수 있어야한다.
모든 일급 객체는 함수의 리턴값으로 사용할 수 있어야한다.
위 3가지를 만족한다면 일급 객체인데, 함수가 일급 객체이기 때문에 할 수 있는것은 다음과 같다.
고차 함수(higher order function)를 만들 수 있다.콜백(Callback)을 사용할 수 있다.
이외에도 Closure, Currying등이 있는데 여기선 고차 함수만 다룰 예정이다.
들어가기앞서 일급객체의 충족조건 예시를 코드를 통해 알아보자.
1. 변수나 데이터에 담을 수 있어야한다.
- 함수 표현식으로 자유롭게 대입이 가능하다.
let hi = function hello() {
console.log('hello')
}
// 변수 hi에 hello함수를 만들어 할당할 수 있다.
let hi = function() {
console.log('hi');
}
// 익명함수로 선언할 수 있다.2. 함수의 파라미터로 전달할 수 있어야한다.
- 콜백 함수 형태로 자유롭게 전달이 가능하다.
let pow = function(num) {
return num**num;
}
function print(func, number) {
return func(number);
}
let result = print(pow, 2); // pow 함수3. 함수의 리턴값으로 사용할 수 있어야한다.
- Closure를 통해 구성할 수 있다.
let hello = function() {
console.log('hello world!');
return function() {
console.log('hello world hi!');
}
}
let hello2 = hello();
hello2();
// hellow wolrd!
// hellow world hi!고차 함수(Higher-Order Function, HOF)
고차 함수는 함수를 인자로 받거나 또는 함수를 반환함으로서 작동 하는 함수다.
즉, 함수를 매개변수로 사용하거나 함수를 반환하는 함수이다.
사실 우리는 이미 위의 2, 3번에서 고차 함수를 사용했다. 이러한 방법으로 자바스크립트에 이미 구현된 고차 함수들이 존재한다.
예를 들어, Array.prototype.map, Array.prototype.filter등의 함수들도 고차 함수의 개념을 활용해 만들어져 있다.
고차함수의 동작
실전적인 예제로 map() 메소드를 통해 고차 함수를 사용했을 때와 사용하지 않았을 때를 비교해보고자한다.
Array.prototype.map
map()은 콜백 함수를 받아 리턴하는데, 콜백 함수의 인자로 element, index, array를 받는다.
길이가 3인 숫자가 들어있는 배열에서 각각 1씩 더한 값의 새로운 배열을 원한다면 다음과 같이 2가지 방법으로 구현할 수 있다.
- 고차 함수가 아닌 함수로 작성
const arr1 = [4, 5, 6];
const arr2 = [];
for(let i=0; i<arr1.length; i++) {
arr2.push(arr1[i] + 1);
}
console.log(arr2);
// [5, 6, 7]
- 고차 함수로 작성
const arr1 = [4, 5, 6];
const arr2 = arr1.map(function(value) { // function(value) 함수를 인자로 전달
return value + 1;
})
console.log(arr2);
// [5, 6, 7]화살표 함수를 사용해 짧게 작성 가능하다.
const arr1 = [4, 5, 6];
const arr2 = arr2.map((value) => value + 1);
console.log(arr2);
// [5, 6, 7]VanillaJS와 React 예제
VanillaJS를 사용하거나 React를 사용할 때 대부분 화살표 함수를 사용하기 때문에 헷갈리는 부분을 짚어본다.
const add = (a, b) => a + b;
function calculator(func, a, b) {
return func(a, b);
}
// 함수안에 return을 작성해서 풀어쓰면 이해하기 쉽긴하다.
add(1, 2); // 3
calculator(add, 1, 2); // 3위처럼 함수안에 return을 풀어서 사용한다면 그나마 이해하기 쉬울것이다.
문제는 화살표 함수를 사용할때인데 개인적으로는 엄청 헷갈렸다..
const onClick = () => () => () => {} // 이런식..VanillaJS
const onClick = () => ()=> {
console.log('hello');
}
//풀어쓴 모습
const onClick = () => {
return () => {
console.log('hello');
}
}
document.querySelector('#header').addEventListener('click', onClick());onClick 함수를 호출하고있으니 onClick() 부분을 함수의 return값으로 대체한다.
document.querySelector('#header').addEventListener('click', () => {
console.log('hello');
});
//사실은 이런 형태!React
const app = () => {
const onClick = () => (e) => {
console.log(e.target);
}
return (
<div onClick={onClick()}></div>
)
}
// 바뀐 형태
<div onClick={(e) => {
console.log(e.target)}
}></div>
결론
고차 함수의 정의와 내장된 고차 함수에 대해 배웠다.
일급 객체, 고차 함수 단어에서부터 어렵다는 느낌을 가질 수 있지만 아주 간결하게, 고차 함수는 함수를 인자로 받고 함수를 반환할 수 있는 함수다.
