고차 함수

함수를 인자로 받거나 함수를 반환하는 함수입니다. 함수가 일급 객체이기 때문에 가능합니다.

두 가지 조건

조건설명
함수를 인자로 받음콜백 함수 전달
함수를 반환함새로운 함수 생성

함수를 인자로 받는 경우

// map, filter, reduce 등
const numbers = [1, 2, 3, 4, 5];

numbers.map(x => x * 2);        // [2, 4, 6, 8, 10]
numbers.filter(x => x > 2);     // [3, 4, 5]
numbers.reduce((a, b) => a + b); // 15

// 직접 구현
function repeat(n, action) {
    for (let i = 0; i < n; i++) {
        action(i);
    }
}

repeat(3, console.log);  // 0, 1, 2

함수를 반환하는 경우

// 클로저 활용
function createMultiplier(n) {
    return function(x) {
        return x * n;
    };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

double(5);  // 10
triple(5);  // 15

둘 다 하는 경우

function compose(f, g) {
    return function(x) {
        return f(g(x));
    };
}

const addOne = x => x + 1;
const double = x => x * 2;

const addOneThenDouble = compose(double, addOne);
addOneThenDouble(5);  // (5 + 1) * 2 = 12

대표적인 고차 함수

배열 메서드

const users = [
    { name: "홍길동", age: 25 },
    { name: "김철수", age: 30 },
    { name: "박영희", age: 20 }
];

// map - 변환
users.map(u => u.name);  // ["홍길동", "김철수", "박영희"]

// filter - 필터링
users.filter(u => u.age >= 25);  // [홍길동, 김철수]

// find - 찾기
users.find(u => u.name === "김철수");  // {name: "김철수", age: 30}

// some - 하나라도 만족?
users.some(u => u.age > 25);  // true

// every - 모두 만족?
users.every(u => u.age > 18);  // true

// sort - 정렬
users.sort((a, b) => a.age - b.age);

이벤트 핸들러

button.addEventListener('click', function(e) {
    console.log("클릭됨");
});

Java에서의 고차 함수

List<Integer> numbers = Arrays.asList(1, 2, 3, 4, 5);

// 함수를 인자로 받음
numbers.stream()
    .map(x -> x * 2)
    .filter(x -> x > 4)
    .forEach(System.out::println);

// 함수를 반환
Function<Integer, Function<Integer, Integer>> add = a -> b -> a + b;
Function<Integer, Integer> add5 = add.apply(5);
add5.apply(3);  // 8

고차 함수의 장점

// X 명령형 (어떻게)
const result = [];
for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] > 2) {
        result.push(numbers[i] * 2);
    }
}

// O 선언형 (무엇을)
const result = numbers
    .filter(x => x > 2)
    .map(x => x * 2);

CSLOG에서 보기