[자바스크립트] 고차함수..?

고차함수(height order function)는 함수가 함수를 인자로 받거나 함수가 함수를 리턴하는 것을 고차함수라고 합니다.
사실 그냥 이렇게 개념만 알고있으면 이해가 안가요.
예시로 함 볼게요

1️⃣ 함수가 함수를 인자로 받아요

함수가 함수를 인자로 받는다? 그럼 콜백함수 아닌가요 ? 
맞아요
고차함수에 의해 콜백되기 때문에 콜백함수라고 생각하면 됩니다. 
예상치 못하게 고차함수를 우리가 사용하고 있었어요.
배열 사용할때 map() filter() 함수 많이 쓰지 않습니까 바로 이것이 고차함수였습니다..!! 😮

const arrFunc = n => n * 2
const arr = [1,2,3,4]

arr.map(arrFunc)

//콜백으로 바꾸면 
arr.map( (n) => {
    return n * 2
})

map() 함수에 인자로 arrFunc 함수를 전달받고 있어요. 
바로 이것이 고차함수!
콜백으로 바꾸면 이해하기가 쉬우쉴텐데 map() 함수를 호출할때 안에 인자값으로 함수를 넣어주고 있죠?
저희가 흔히보던 콜백함수입니다.
이제 고차함수 배웠으니 어 이거 고차함수네 라고 합시다.

map()이외에도 filter() reduce() 등 내장함수들도 고차함수인데요
바로 이 고차함수를 사용해서 심플하게 코드를 작성할 수 있어요 
map()을 사용하지않고 for문으로 루프를 돌면서 arr의 배열값들을 2씩 곱한다? 굉장히 코드 길어집니다. 고차함수의 장점 중 하나가 심플한 코드 작성이란걸 기억합시다

 

 

2️⃣ 함수가 함수를 리턴해요

함수가 함수를 리턴한다? 뭔 개소린가 싶어요,,
코드로 한번 봅시다

const func = () => {
	//함수 리턴
    return () => {
        console.log(1);
    };
};

func라는 함수안에 익명함수를 리턴해주고 있어요. 지금 이것을 함수가 함수를 리턴한다고 말하는 겁니다. 바로 고차함수 인것이죠. 다양한 사용법이 있겠지만 고차함수 이름부터 어려우니까 (😠) 쉬운 예시를 2개로 들어볼게요.

- 다양한 인자로 받는 함수를 하나의 함수로 나눈 커링기법
- 이벤트에 함수를 호출할경우


👀다양한 인자로 받는 함수를 하나의 함수로 나눈 커링기법은 고차함수의 사용법중 하나에요

const sum = (x) => {
    return (y) => {
        return (c) => {
            return x + y + c
        }
    }
}

const a = sum(10)
const b = a(5)
b(5) //20

 

a 에는 고차함수 sum이 호출되어 인자값 10을 넘겨 매개변수 y를 받는 리턴 함수값이 담겨있고,
b 에는 a가 호출되어 인자값 5를 넘겨 매개변수 c를 받는 리턴 함수값이 담겨있고,
b 를 최종적으로 호출하면 x + y + c 를 호출하기 때문에 20이라는 숫자가 나옵니다.
이렇듯 여러개의 인자를 가진 함수를 하나로 만들어 순차적으로 호출하는걸 커링함수라고 하는데요 고차함수의 대표적 기법입니다.
하지만 함수가 굉장이 복잡해보여요 이럴 경우엔 커링지옥에 빠질 수 있습니다.

const sum = x => y => c => x + y + c

화살표함수로 바꾸면 한줄에 표현 가능하니 커링지옥따윈 무서울거 없겠죠 

👀이벤트에 함수를 호출할경우를 알아볼게요.

<button id="button">버튼</button>

<script>

const onClickBtn = () => {
    console.log('버튼 클릭했어요')
}
document.querySelector('#button').addEventListener('click', onClickBtn)

</script>

버튼태그에 이벤트를 줄 경우 console.log 가 찍히도록 콜백함수를 담습니다. 보통 이렇게 사용하면 문제가 없는데요
함수에 인자를 넘겨주고 싶을때 문제가 돼요. 그냥 저상태에서 함수 인자값 넘겨버리고 받으면 작동이 안됩니다..ㅎㅎ
왜냐하면 이벤트수신기의 콜백함수는 발생한 이벤트를 설명하는 evnet 기반 객체를 유일한 매개변수로 받고 있거든요

<button id="button">버튼</button>

<script>
const onClickBtn = (number) => {
	// 이벤트 호출시 리턴되는 함수
    return (event) => {
        console.log( `${number} 버튼 클릭했어요!`)
    }
}
document.querySelector('#button').addEventListener('click', onClickBtn(1))
</script>

그래서 위의 코드와 같이 함수를 리턴하는 고차함수를 만들어주어야 해요. 클릭했을때 onClickBtn 함수가 호출되면 event를 매개변수로 받는 함수가 실행됩니다.

<button id="button">버튼</button>

<script>

const onClickBtn = number => event => console.log( `${number} 버튼 클릭했어요!`)
document.querySelector('#button').addEventListener('click', onClickBtn(1))

</script>

화살표함수를 사용해서 코드를 줄여줄 수 있겠죠 




❓❓그렇다면 고차함수 왜 사용하는거지 ?

고차함수는 함수의 중복을 제거해주기 위해서도 쓰이고 코드의 가독성을 높이기 위해서도 쓰입니다. 여러가지 이유 중 하나는 바로 추상화 인데요. 추상화(?) 첨 들었을땐 뭔 이런 추상적인 소릴 한다 싶어요. ㅎㅎ 바로 여러 복잡한거 다 생각 안하고 핵심만 추출한다는 얘기입니다. 예로 들자면 sort() 메소드는 정렬을 해주는 함수 메소드이죠. array 옆에 띡 sort() 호출해주면 배열이 알아서 정리돼요. 하지만 우리는 그 과정을 모르고 그냥 정렬을 해준다는 그 결과만 단순하고 당연하게 알고있죠. 
바로 이것이 추상화의 결과 입니다. 즉 고차함수 = 함수(사고)로 묶여져 있다 = 사고의 추상화 추상화가 높아지면 생산성이 높아지고 효율적이게 됩니다.