Higher-Order Function으로 함수를 전달인자로 받아 사용하는 함수, 또는 함수를 반환(return)하는 함수

이 때 인자로 받는 function을 콜백함수(callback function), 인자를 받는 함수를 일급 함수(First Class function)라 한다.

let printHello = () => {
	console.log('Hello');
};

let HoF = (func) => { // HoF는 일급 함수, func로 오는 변수가 콜백함수
	return func(); 
};

HoF(printHello) // 'Hello';

함수를 전달 인자로 받는 경우

let printHello = (person) => {
	console.log(`${person} hello`)
}

let greetVisitor = (user, func) => { // func는 콜백함수이다.
	return func(user)
}

greetVisitor("Reone", printHello); // "Reone Hello"

일급 함수의 전달인자로 받는 모든 함수는 calback함수라고 할 수 있다.

함수를 반환하는 경우

클로저(closure)

let adder = (a) => {
	return (b) => {
		return a + b;
	}
}

let adder10 = adder(10); // 클로저 생성
adder10(20) // 30;
adder10(3) // 13;

• adder는 클로저 함수 이며, adder10 에 adder(10) 을 할당함으로써 adder10에 클로저를 생성해 할당해 준다.

함수 합성

두 가지 이상의 함수를 합성하여 사용 할 수 있다.

function compose( func1, func2 ) {
	return function (value) {
		return func1(func2(value)); // func2에 출력을 func1에 다시 입력하여 그 결과를 출력함
	}
}

function square(number) { // 제곱 함수
	return number * number;
}

function sixAdder(number) { // 6 더하기 함수
	return number + 6;
}

let addSixAndSquare = compose(square,sixAdder);
addSixAndSquare(4) // 100;

한번에 여러가지 처리를 할 수 있는 형태의 함수를 리턴 할 수 있다.

결론

함수를 기능별로 나누어 추상화 할 수 있다면, 필요한 로직에서 불러와 기능만을 사용할 수 있게 된다.

함수형 프로그래밍을 이해하는데 큰 도움이 된다.

흔히 사용할 수 있는 Javascript 고차함수는 Array의 메서드인 map, reduce, filter, some 등.. 이 있다.

Javascript HoF (Array Method)

Array.map(func)

let result = [1,2,3,4,5].map( value => value * 2);

console.log(result) // [2,4,6,8,10];

• 배열의 각 요소를 순회한다. ⇒ 1,2,3,4,5
• 순회하며 인자로 받은 함수에서 해당 로직을 수행한다. value * 2
• 반환 결과를 다시 해당 인덱스에 추가한다. [1,2,3,4,5] ⇒ [2,4,6,8,10]
• 순회가 끝난 결과 배열을 반환한다. result = [2,4,6,8,10]
• output : array

각 인덱스에 따른 데이터 맵핑을 해야 할때, 많이 사용한다.

Array.reduce(func)

let result = [1,2,3,4,5].reduce((acc,cur) => acc+cur)

console.log(result) // 15

• 배열의 각 요소를 순회한다. ⇒ 1,2,3,4,5
• 각 순회마다의 결과를 acc에 입력한다. acc = acc + cur => acc = 1 + 2
• 순회가 끝난 결과를 반환한다. result = 15
• output : any

Reduce의 다른 활용

이전의 결과를 가져와 누적하여 실행하는것이 reduce 고차함수의 특징이다. 이로인해 다른 객체를 만들거나, 함수의 실행 결과를 계속해서 연산하거나 하는 방법도 가능하다.

let result = [0,1,2,3,4,5].reduce(function (obj,cur,i) {
	obj[i] = cur;
	return obj
},{});

console.log(result)  // {0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5}

• 함수를 연속으로 실행한 결과를 누적하기

function sqaure (number) {
	return number * number;
}

let result = [0,1,2,3,4,5].reduce(function (acc,cur) {
	return sqaure(arr+cur)
});

console.log(result)  // 480004281
// result = (((((0^2 +1)^2 + 2)^2 + 3)^2 + 4)^2 + 5)^2

뭔가 은행 복리계산 같은 로직을 하고 있다.

매 요소를 순회하면서의 결과를 계속해서 가져가야하는경우에 사용할 수 있다.

Array.filter(func)

let result = [1,2,3,4,5].filter( value => value > 2);

console.log(result) // [3,4,5];

• 배열의 각 요소를 순회한다. ⇒ 1,2,3,4,5
• 각 순회마다의 결과를 T/F로 받는다. ⇒ value > 2 T/F
• true 인 경우에 값을 추가하며 아니면 다음 차례로 넘어간다.
• 순회가 끝난 결과를 반환한다. result = [3,4,5]
• output : array

콜백으로 오는 함수는 반드시 boolean 타입을 반환해야 한다.

true 인 경우에는 해당 인덱스의 요소를 통채로 다시 배열에 넣는다.

배열의 고차함수는 이밖에도 많은것들이 있지만, 많이 사용했던 것들을 정리 해보았다