고차 함수. 고차 컴포넌트 얘기가 아니야..

jh_leitmotif·2022년 2월 3일

JavaScript

JS 개념 정리

목록 보기

3/4

개요

HOF. Higher Order Function.

제목에도 있지만, 이 포스트는 고차 함수에 대한 이야기이지, HOC에 대한 이야기가 아닙니다.

밥 먹듯이 써먹던 함수가, 그냥 함수가 아니라 '고차 함수' 라는 범위에 있다는 사실에

그래서 고차 함수가 뭔데?

라고 스스로 물었을 때, 대뜸 답변을 못하길래.. 포스트로 정리해둡니다.

함수를 전달받는다.

우선, 함수에 함수를 전달할 수 있다는 사실은 공공연합니다.

function test(funcArg){
	console.log(funcArg(1,2))
}

funcArg에 x와 y를 넣으면 x+y가 튀어나오는... 그런 함수라고 칩시다.

그러면 이 test라는 함수는 3을 뱉습니다.

어..? 근데 일단 이 친구, 함수를 인자로 받습니다.

아하, 그럼 얘도 고차함수입니다.

함수를 반환한다.

function test(x,y){
	let count = 1;
    return function(){
      count=count+x+y;
    	return count;
    }
}
let test1 = test(1,2)
test1()
test1()
test1()

클로져 형태로 작성된 위와 같은 함수가 있다고 가정합니다.

각각 무슨 값을 뱉는지, 에 대해서는 둘째치고. test()라는 함수는 익명 함수를 반환합니다.

오호라... 그러면 이 친구도 고차 함수의 범위에 포함됩니다.

built-in 함수 중 고차 함수는?

참고 링크 : https://poiemaweb.com/js-array-higher-order-function

단순히 map, filter, reduce 정도만 생각했는데.. 겁나게 많다?

하긴.. 겁나게 많을 것 같습니다.

Array.sort()
- sort 함수는 기본적으로 fn(x,y)을 인자로 받습니다만, 없다면 기본값으로 오름차순 정렬을 진행합니다.
- sort(fn(x,y)) 가 전달된다면.
  - 반환 값이 0보다 작으면 오름차순, 0보다 크면 내림차순입니다.
  - 그러므로, 대충 return a-b... return b-a... 등을 통해 차순을 정할 수 있습니다.
  - 또는, x>y 일때 return 1... 그렇지 않을 때 return 1... 등으로 표현할 수 있습니다.
Array.forEach((item,index)=>{})
- forEach 함수는 콜백함수를 전달받아 수행합니다. 반환하진 않습니다.
- 원본 배열을 반환하지 않지만, 변경합니다.
Array.map((item,index)=>{})
- map 함수는 forEach와 닮았습니다. 콜백함수를 전달받아 수행한 결과를 반환합니다.
- 원본 배열을 반환한다기보단, 원본 배열을 참조해 새로운 배열을 만들어 반환한다고 보아야 합니다.
Array.filter((item)=>return item>0)
- 콜백함수로 전달된 condition을 통과하는 item으로 구성된 배열을 반환합니다.
Array.reduce((pre,cur)=>{},0)
- 누산기입니다. 임의로 '이전 값'이라고 정한 pre 변수에 cur을 더하거나, 비교하거나 합니다.
- 자칫 +만 가능한 것이 아닌가? 라고 착각할 수 있는데, 산수도 되고.. 비교도 되고.. 또 Promise Chaining에 쓰이기도 합니다.
Array.some((item)=>return item>10)
- 배열의 일부 요소가 조건을 통과하는지 반환합니다.
- 어떤 요소든, 조건을 통과하는 것이 있다면 true 입니다.
Array.every((item)=>return item>10)
- some과 다르게, 모든 요소가 조건을 통과해야 true 입니다.
Array.find((item)=>return item===2)
- 처음 보는 함수입니다..! ES6부터 도입됐고 IE에서는 적용되지 않는다고 합니다.
- 조건에 맞는 첫번째 요소를 반환합니다.만약 조건에 맞는 것이 없다면 undefined가 반환됩니다.
Array.findIndex((item)=>return item===2)
- 이 또한.. 처음 봅니다. find와 첫 소개는 같습니다.
- 조건에 맞는 첫번째 요소의 인덱스를 반환하며, 존재하지 않는다면 -1이 반환됩니다.