[TS] 함수 조합의 원리와 응용

📣  함수형 프로그래밍이란?

✔️ 함수형 프로그래밍 : 순수 함수와 선언형 프로그래밍의 토대 위에 '함수 조합' 과 '모나드 조합'으로 코드를 설계하고 구현하는 기법

➰ 함수형 프로그래밍 언어는 정적 타입, 타입 추론 등에 기반을 둔 고차 타입, 패턴 매친 등의 고급 기능을 제공한다.

---

📣  제네릭 함수

✔️ number 와 같은 타입을 타입 변수 T로 표기할 때 이를 '제네릭 타입' 이라고 한다.

➰ 함수 조합을 구현할 때는 제네릭 함수 구문을 사용해야 한다.

 

📍 타입스크립트의 제네릭 함수 구문

function g1<T>(a: T): void {}

➰ 제네릭 타입으로 함수를 정의하면 어떤 타입에도 대응할 수 있다.

➰ g1 함수는 a 매개변수가 제네릭 타입으로 지정되었다.

 

type Type1Func<T> = (T) => void
type Type2Func<T, Q> = (T, Q) => void
type Type3Func<T, Q, R> = (T, Q) => R
// Type3Func 함수의 시그니처는 T와 Q타입 값을 입력받아 R 타입 값을 반환하는 것을 의미한다.

➰ 타입 별칭에 제네릭 타입을 적용할 수 있다.

 

📍 함수의 역할

➰ 함수 f가 T 타입의 x값으로 R 타입의 y값을 만든다.

(x: T) ~-> f -> (y: R)

➰ 이런 관계를 일대일 관계라고 하고, 이런 동작을 하는 함수를 '맵(map)'이라고 표현한다.

 

type MapFunc<T, R> = (T) => R

➰ 타입 T인 값을 이용해 타입 R인 값을 만들어주는 함수의 시그니처

 

📍 아이덴티티 함수

➰ 맵 함수의 가장 단순한 형태는 입력값 x를 가공 없이 그대로 반환하는 것이다.

➰ 이러한 역할을 하는 함수의 이름에는 보통 identity 또는 I라는 단어가 포함된다.

type MapFunc<T, R> = (T) => R
type IdentityFunc<T> = MapFunc<T, T>

 

const numberIdentity: IdentityFunc<number> = (x: number): number => x
const stringIdentity: IdentityFunc<string> = (x: string): string => x

➰ 정의한 제네릭 함수 IdentityFunc<T>는 다양한 함수를 선언할 때 사용할 수 있다.

---

📣  고차 함수와 커리

✔️ 함수에서 매개변수의 개수를 애리티(arity) 라고 한다.

➰ 각 함수의 애리티가 같다면 연결해서 사용할 수 있다.

y = h(g(f(x)))

➰ 함수형 프로그래밍에서는 compose 나 pipe 함수를 사용해서 함수들을 조합해 새로운 함수를 만들 수 있다.

 

📍 고차 함수란?

➰ 타입스크립트에서 함수는 변수에 담긴 함수 표현식이고 함수 표현식이란 일종의 값이기 때문에 함수의 반환값으로 함수를 사용할 수 있다.

➰ 어떤 함수가 또 다른 함수를 반환할 때 그 함수를 '고차 함수' 라고 한다.

➰ 함수가 아닌 단순한 값을 반환하는 함수는 '1차 함수' 라고 한다.

 1차 함수를 반환하면 '2차 고차 함수', 2차 함수를 반환하면 '3차 고차 함수' 라고 한다.

type FirstOrderFunc<T, R> = (T) => R
// R 타입의 값을 반환하는 1차 함수
type SecondOrderFunc<T, R> = (T) => FirstOrderFunc<T, R>
// 1차 함수를 반환하는 2차 고차함수
type ThirdOrderFunc<T, R> = (T) => SecondOrderFunc<T, R>
// 2차 함수를 반환하는 3차 고차함수

 

const inc: FirstOrderFunc<number, number> = (x: number): number => x + 1
inc(1) // 1차 함수이므로 함수 호출 연산자를 한 번 사용한다.

➰ inc 함수는 단순히 number 타입의 값을 반환하므로 1차 함수이다.

 

const add: SecondOrderFunc<number, number> =
    (x: number): FirstOrderFunc<number, number> =>
    (y: number): number => x + y
    
add(1)(2)
// 2차 고차 함수를 호출할 때는 함수 호출 연산자를 두 번 연속 사용한다.

➰ add 함수는 FirstOrderfunc<number, number> 함수를 반환하므로 2차 고차 함수이다.

➰ 함수 호출 연산자를 연속으로 사용하는 것을 '커리(curry)' 라고 한다.

 

const add3: ThirdOrderFunc<number, number> =
    (x: number): SecondOrderFunc<number, number> =>
    (y: number): FirstOrderFunc<number, number> =>
    (z: number): number -> x + y + z
    
add3(1)(2)(3)
// 3차 고차 함수는 함수 호출 연산자를 세 번 이어 붙어 호출한다.

➰ add3 함수는 FirstOrderFunc 함수를 반환하는 SecondOrderFunc 함수를 반환하므로 3차 고차 함수이다.

 

📍 부분 적용 함수와 커리

➰ 고차 함수들은 자신의 차수만큼 함수 호출 연산자를 연달아 사용한다.

➰ 자신의 차수보다 함수 호출 연산자를 적게 사용하면 '부분 적용 함수' 또는 '부분 함수' 라고 한다.

const add1: SecondOrderFunc<number, number> = add(1)
// add1은 부분 함수이다.

add1(2)
add(1)(2)
// add1은 add(1)과 똑같다.

➰ add1은 1차 함수이므로 함수 호출 연산자를 1개 사용해 일반 함수처럼 호출할 수 잇다.

➰ add1(2)로 호출하면 add(1)과 함께 전달되서 3이 출력된다.

 

📍 클로저

➰ 고차 함수의 몸통에서 선언되는 변수들은 클로저(closure)라는 유효 범위를 가진다.

➰ 클로저는 '지속되는 유효 범위' 를 의미한다.

function add(x: number): (number) => number {	// 바깥쪽 유효 범위 시작
    return function(y: number): number {	// 안쪽 유효 범위 시작
        return x + y	// 클로저
    }	// 안쪽 유효 범위 끝
}	// 바깥쪽 유효 범위 끝

➰ return x + y 부분은 add 함수가 반환하는 함수의 반환문인데, 이 함수는 자신의 바깥쪽 유효 범위에 있는 변수 x를 참조하고 있다.

➰ add가 반환하는 함수에서 볼 때 x는 이해할 수 없는 변수이며, 이처럼 범위 안에서는 그 의미를 알 수 없는 변수를 '자유 변수' 라고 부른다.

➰ 타입 스크립트는 자유 변수가 있으면 그 변수의 바깥쪽 유효 범위에서 자유 변수의 의미(선언문)을 찾는다.

 

const add1 = add(1)	// 변수 x 메모리 유지

➰  add 함수를 호출하더라도 변수 x의 메모리가 해제되지 않기 때문에 클로저를 지속되는 유효 범위라고 부르는 것이다.

const result = add1(2) // result에 3을 저장 후 변수 x 메모리 해제

➰ 이처럼 고차 함수가 부분 함수가 아닌 '값'을 발생해야 비로소 자유 변수의 메모리가 해제되는 유효 범위를 '클로저'라고 한다.

 

const MakeNames = (): () => string => {	// 바깥쪽 유효 범위
    const names = ['Jack', 'Jane', 'Smith']
    let index = 0
    return (): string => {	// 인쪽 유효 범위
        if(index == names.length)
            index = 0
        return names[index++]
    }
}

const makeName: () => string = makeNames()
console.log(
    [1, 2, 3, 4, 5, 6].map(n => makeName())
}

//['Jack', 'Jane', 'Smith', 'Jack', 'Jane', 'Smith']

➰ makeNames 함수를 호출하면 () => string 타입의 함수 makeName을 얻는다.

➰ 배열에 map 함수를 실행해서 각 요소에 makeName() 함수를 실행하면 배열의 아이템 수만큼 총 여섯 번 makename() 함수가 호출된다.

➰ index는 names.length와 값이 같아지면 다시 0이 되므로 makeName 함수를 사용하는 한 makeNames 함수에 할당된 클로저는 해제되지 않는다.

---

📣  함수 조합

✔️ 함수 조합 : 작은 기능을 구현한 함수를 여러 번 조합해 더 의미 있는 함수를 만들어 내는 프로그램 설계 기법

➰ 함수 조합을 할 수 있는 함수 : compose, pipe

 

📍 compose 함수

➰ 가변 인수 스타일로 함수들의 배열을 입력받는다.

➰ 함수들을 조합해 매개변수 x를 입력받는 1차 함수를 반환한다.

const compose = <T, R>(...functions: readonly Function[]): Function => (x:T): (T) => R => {
    const deepCopiedFunctions = [...functions]
    return deepCopiedFunctions.reverse().reduce((value, func) => func(value), x)
}

 

const composedFGH = compose(h, g, f)
conposedFGH('x')
// h(g(f(x)))

➰ compose(h, g, f)로 만든 composedFGH는 1차 함수이므로 일반 함수처럼 호출할 수 있다.

 

const inc = x => x + 1
const composed = compose(inc, inc, inc)
composed(1)	// 4

➰ compose의 동작으로 1 -> inc -> 2 -> inc -> 3 -> inc -> 4 의 과정이 발생했다.

➰ 1을 가지고 inc 함수가 세 번 연달아 호출되면서 결괏값 4가 나온다.

 

📍 pipe 함수

➰ compose와 동작 원리는 같지만, 조합하는 함수들의 순서만 반대이다.

const pipe = <T>(...functions: readonly Function[]): Function => (x:T): T => {
    return functions.reduce((value, func) => func(value), x)
}

 

const piped = pipe(f, g, h)
piped('x')
// h(g(f(x)))

➰ compose와 달리 매개변수로 전달된 함수를 뒤에서부터 적용한다.

 

📍 pipe 와 compose 함수 분석

➰ 함수들의 시그니처가 각각 모두 다르면 가변 인수 functions의 타입을 설정하기 어렵다.

➰ 때문에 functions은 자바스크립트 타입 Function들의 배열인 Function[]으로 설정한다.

➰ pipe 함수는 functions 배열을 조합해 어떤 함수를 반환해야 하므로 반환 타입은 Function으로 설정한다.

➰ pipe 함수로 조합된 결과 함수의 애리티는 1이며, 그 매개변수 x의 타입은 제네릭 타입인 T로 설정한다.

➰ 함수 몸통은 reduce 함수를 사용해서 매개변수인 변수 x를 초깃값으로 둔다.

➰ reduce 메서드의 콜백 함수 부분은 (value, func) 형태의 매개변수 구조를 가져야 한다.

const pipe = (...functions: Function[]): Function =>(x: T) => T => {
    return functions.reduce((value, func) => func(value), x)
}

 

 

➰ compose 함수는 pipe 함수와 매개변수 방향이 반대이므로 functions.reverse()를 호출하는 코드를 추가해주면 된다.

➰ 하지만 compose는 순수 함수의 모습으로 동작해야 하므로 functions을 전개 연산자로 전개해서 깊은 복사를 해준다.

const compose = <T>(...functions: readnly Function[]): Function => (x:T) :T => {
    const deepCopiedFunctions = [...functions]
    deepCopiedFunctions.reverse().reduce((value, func) => func(value), x)
}

 

📍 부분 함수와 함수 조합

➰ 고차 함수의 부분 함수는 함수 조합에 사용될 수 있다.

const add = x = > y => x + y
const inc = add(1)

const add3 = pipe(
   inc,
   add(2)
}

console.log(
   add3(1)	//4
}

➰ inc 함수는 add의 부분 함수이다.

➰ add3은 pipe 함수를 가지고 inc와 add(2)를 조합해서 만든 함수이다.

➰ add3은 일반 함수 이므로 add3(1)로 호출하면, inc 함수가 호출되어 값 1은 2가 되고, add(2)에 의해 최종 4라는 값이 된다.

 

📍 포인트가 없는 함수

➰ 함수 조합을 고려해 설계한 함수를 '포인트가 없는 함수' 라고 한다.

const map = f => a => a.map(f)
// map 함수는 f라는 함수를 받는데, f라는 함수는 a라는 매개변수를 받고, 그 매개변수에 f라는 함수를 적용한다.

➰ map(f) 형태의 부분 함수를 만들면 compose나 pipe에 사용할 수 있다.

 

const square = value => value * value
const squaredMap = map(square)
// const squaredMap = a => map(square)(a)

➰ 주석 부분과는 달리 굳이 a를 지정하지 않는 것이 포인트가 없다는 것이다.

 

const fourSquare = pipe(
    squaredMap,
    squaredMap
)

console.log(
    fourSquare([3, 4]) // [82, 256] [(3*3)*(3*3), (4*4)*(4*4)]
)