Currying(커링 함수)

0. 개요

커링(Currying)은 함수의 재 사용성을 높이기 위해, 함수 자체를 return 하는 함수다
커링은 함수를 호출하지 않는다 단지 반환할 뿐이다.

매개변수 일부를 적용하여 서로운 함수를 동적으로 생성하면 동적 생성된 함수는 반복적으로 사용되는 매개변수를 내부적으로 저장하여, 매번 인자를 전달하지 않아도 원본 함수가 기대하는 기능을 채워놓을 수 있다.

 

이로서 코드의 가독성을 높이고 함수의 작동방식을 명확하게 하여 유지보수를 용이하게 한다.

 

 

1. 예시 코드

import React, { Component } from 'react';

class R074_ReactCurrying extends Component {

    plusNumOrString(c, d){
        return c + d;
    }
    // PlusFunc1 함수는 this.plusNumOrString(a,b)를 리턴하는 또 다른 함수를 return 한다.
    PlusFunc1(a){
        return function(b){
            return this.plusNumOrString(a,b)
        }.bind(this)
    }
    //PlusFunc2는 호출되진 않지만, PlusFunc1과 완전히 동일한 기능을 하는 람다식 표현 함수
    PlusFunc2 = a => b => this.plusNumOrString(a,b)
    
    // PlusFunc함수가 호출되면, 인자로 받은 값을 포함하여 PlusFunc1함수를 호출한다
    PlusFunc(a){
        return this.PlusFunc1(a)(200)
    }

    render() {
        return (
            <>
            {/* 버튼형태의 input태그를 눌러 alert창 생성, 
            PlusFunc()함수 호출 */}
             <input type="button" value="NumberPlus" onClick={e => alert(this.PlusFunc(100))}/> 
             {/* 300 */}
             <input type="button" value="StringPlus" onClick={e => alert(this.PlusFunc("react"))}/>
             {/* react200 */}
            </>
        );
    }
}

export default R074_ReactCurrying;

본 예시 코드는 이정열 저자의) React200제를 참고하였습니다. 

 

- PlusFunc(a)의 반환 값은 PlusFunc1을 호출하는 형태이다

- PlusFunc1(a)의 반환 값은 function(b)의 형태이다.

- 최종적으로 plusNumOrString(c, d)가 호출되어, 숫자 혹은 문자열이 합산되는 형태로 반환되어 alert창에 출력된다.

 

 

 

2. 결론

커링 함수는 함수를 리턴하는 함수이다.

함수를 통해 처리된 값이나 인자를 포함하여 리턴하여 사용될 수 있다.

부수효과를 최대한 줄이고 동일한 입력이 들어가면 동일한 출력이 나오게 하여 가독성과 유지보수를 용이하게 할 수 있다.

 

 

3. 고차 함수, 콜백 함수, 커링 함수의 비교

1. 고차 함수는 다음의 두 조건 중 하나 이상을 만족하는 함수이다.
   (1) 함수를 전달 인자로 받는 함수
   (2) 함수를 리턴하는 함수
2. 이때, (1)에서 전달인자로 받는 함수를 콜백 함수라고 부르고, (2)에서 함수를 리턴하는 함수를 커링 함수라 한다.
3. 따라서 고차 함수는 보다 크고 넓은 개념이며, 커링 함수와 고차 함수를 포함한다. 

 

 

00. 참고 자료

• 초보자를 위한 리액트 200제 / 이정열 저 / 정보문화사
• https://velog.io/@hustle-dev/Javascript-%EC%BB%A4%EB%A7%81%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

[JavaScript] - 커링에 대해 알아보자

 

• https://velog.io/@jwp9633/JavaScript-%EA%B3%A0%EC%B0%A8-%ED%95%A8%EC%88%98-%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98-%EC%BB%A4%EB%A7%81-%ED%95%A8%EC%88%98

[JavaScript] 고차 함수, 콜백 함수, 커링 함수