[React] 3.3.4 고차 함수(함수형 프로그래밍의 개념) - 가온 코딩

Higher Order Functions(고차 함수)

 

함수형 프로그래밍의 핵심 개념인

1. 불변성(immutability)

2. 순수성(purity)

3. 데이터 변환(transformation)

4. 고차 함수(Higher Order Functions)

5. 재귀(recursion)

중 4. 고차 함수 에 대해 설명하겠다.

 

함수형 프로그래밍에는 고차 함수가 꼭 필요하다!

고차 함수는 다른 함수를 조작할 수 있는 함수이다. 다른 함수를 인자로 받을 수 있거나 함수를 반환할 수 있고, 이 2가지를 모두 수행하기도 한다.

 

고차 함수의 분류는 다른 함수를 인자로 받는 함수이다.

Array.map, Array.filter, Array.reduce는 모두 다른 함수를 인자로 받기에 고차 함수에 해당 된다.

 

 

1. invokeIf

고차 함수를 구현하는 방법을 보자.

아래 예제에서 invokeIf 함수는 조건을 검사해서 참인 경우 fnTrue 함수를, 거짓인 경우 fnFalse 함수를 호출한다.

 

const invokeIf = (condition, fnTrue, fnFalse) => 
(condition) ? fnTrue() : fnFalse()

const showWelcome = () =>
console.log("Welcome!!!")

const showUnauthorized = () =>
console.log("Unauthorized!!!")

invokeIf(true, showWelcome, showUnauthorized)
invokeIf(false, showWelcome, showUnauthorized)

invokeIf는 참, 거짓의 함수를 받는다.

showWelcome과 showUnauthorized를 invokeIf에게 넘겼다.

참이면 showWelcom, 거짓이면 showUnauthorized 가 나온다.

 

다른 함수를 반환하는 고차 함수는 자바스크립트에서 비동기적인 실행 맥락을 처리할 때 유용하다.

함수를 반환하는 고차 함수를 쓰면 필요할 때 재활용할 수 있는 함수를 만들 수 있다.

 

커링(Currying)은 고차 함수 사용법과 관련한 함수형 프로그래밍 기법이다.

어떤 연산을 수행할 때 필요한 값 중 일부를 저장하고 나중에 나머지 값을 전달받는 기법이다.

이를 위해 다른 함수를 반환하는 함수를 사용하며, 이를 커링된 함수(Curried function)라고 부른다.

 

2. userLogs

커링 예제는 다음과 같다.

userLogs는 일부 정보(사용자 이름)를 받아서 함수를 반환한다.

나머지 정보(메시지)가 사용 가능해지면 userLogs가 반환한 함수를 활용할 수 있다.

여기에서는 연관된 사용자 이름 정보 뒤에 로그 메시지를 덧붙인다. 여기서 2장에서 살펴본 프라미스를 반환하는 getFakePerson을 사용한다.

const getFakeMembers = count => new Promise((resolves, rejects) => {
  const api = `https://api.randomuser.me/?nat=US&results=${count}`
  const request = new XMLHttpRequest()
  request.open('GET', api)
  request.onload = () => 
       (request.status === 200) ? 
        resolves(JSON.parse(request.response).results) : 
        reject(Error(request.statusText))
  request.onerror = (err) => rejects(err)
  request.send()
})

const userLogs = userName => message => 
    console.log(`${userName} -> ${message}`)

const log = userLogs("grandpa23")

log("attempted to load 20 fake members")
getFakeMembers(20).then(
    members => log(`successfully loaded ${members.length} members`),
    error => log("encountered an error loading members")
)

userLogs는 고차 함수다. userLogs를 호출해 만들어지는 log 함수를 호출할 때마다 메시지 맨 앞에 'grandpa23'이 덧붙여진다.

 

 

 

참고자료

러닝 리액트(Learning React), 알렉스 뱅크스, 한빛미디어 (2021)