[Javascript] 일급, 일급함수, 고차함수 개념

일급

- 값으로 다룰 수 있음

- 변수에 담을 수 있음

- 함수의 인자로 사용될 수 있음

- 함수의 결과로 사용될 수 있음

예시

const num = 10; //num이라는 변수에 10이라는 값을 담을 수 있고, 10은 값으로 다룰 수 있음
const add20 = num => num + 20; //add20이라는 함수의 인자로 num이 전달될 수 있음(함수의 인자로 사용될 수 있음)
add20(num); //함수의 결과는 num + 20이라는 값임 (함수의 리턴(결과)값으로 사용할 수 있음)
const result = add20(num); //그 결과를 result 변수에 담음
console.log(result); //30

---

일급함수(first-class function)

- 자바스크립트의 함수는 일급 함수

- 함수를 값으로 다룰 수 있음

- 조합성과 추상화의 도구로 함수를 사용할 수 있음

- 함수가 일반 객체처럼 모든 연산이 가능

- 함수의 매개변수로 전달

- 할당 명령문

- 동일 비교

예시

함수가 일급이라는 것은 값으로 다룰 수 있으며 변수에 담을 수 있다는 뜻

const add20 = a => a + 20; //add20 이라는 변수에 a => a + 20 함수를 값으로 다뤄서 담을 수 있음
console.log(add20); //a => a + 20
console.log(add20(5)); //25

함수의 인자로도 사용될 수 있고, 함수의 결과로도 사용할 수 있음 fnc 함수의 리턴값(결과)은 () => 1 (함수)

const fnc = () => () => 1;
console.log(fnc()); //fnc라는 함수는 실행한 결과를 전달하면 () => 1 함수가 출력이 됨
const result = fnc(); //함수의 실행 결과를 다른 변수에 담을 수 있음
console.log(result); //() => 1
console.log(result()); //원하는 시점에 평가해서 결과를 만들 수 있음 : 1

---

고차함수(Higher-order function)

- 함수를 값으로 다루는 함수

- 인자로 함수를 받거나 (콜백함수), 함수를 반환하는 함수

함수를 인자로 받아서 실행하는 함수

const apply = fn => fn(1); //fn이라는 함수를 인자로 받아서 fn을 실행하는 함수
//const apply = fn => (a => a + 2)(1); 
const add2 = a => a + 2;
console.log(apply(add)); //3

const result = (callback) => {
    return callback(5);
}

console.log(result(a => a - 1)); // 4

- times라는 함수는 fn이라는 함수를 첫번째 인자값으로 받고, 또 다른 n이라는 값을 두번째 인자값으로 받음

- 안(내부)에서 함수를 실행하면서 원하는 인자를 적용하는 함수 - Applicative programming

const times = (fn, n) => {
    let i = -1;
    while (++i < n) fn(i);
}

times(console.log, 3);
//1
//2
//3
//순차적으로 출력(3번)
times(a => cconsole.log(a + 10), 3); // 첫번재 인자 : 함수를 값으로 받음
//10
//11
//12

함수를 만들어 리턴하는 함수 (클로저를 만들어 리턴하는 함수)

- addMaker 함수는 함수를 리턴하는 함수 : b => a + b

- 클로저는 b => a + b 함수가 a 값을 기억하고 있다는 뜻

const addMaker = (a) => {
    return (b) => {
        return a + b;
    }
}

//위 함수를 간략하게 {}, return 생략
const addMaker => a => b => a + b;

const add10 = addMaker(10);
console.log(add10); // b => a + b
console.log(add10(5)); // 15

 

* 참고

- 인프런 [함수형 프로그래밍과 JavaScript ES6+]