함수 합성은 프로그래밍에서 매우 강력한 개념입니다. 여러 개의 함수를 조합해 더 복잡한 기능을 구현할 수 있기 때문이죠. 하지만 여러 매개변수를 가진 함수를 합성하는 일은 생각보다 까다로울 수 있습니다. 이번 글에서는 자바스크립트에서 이러한 문제를 해결하는 방법을 알아보겠습니다.
함수 합성은 마치 팬케이크 위에 메이플 시럽을 뿌리듯 데이터가 흐르게 만드는 작업입니다. 그러나 둘 이상의 매개변수를 가진 함수의 경우 이러한 합성은 불가능해 보일 수 있습니다. 하지만 걱정하지 마세요. 우리가 할 수 있는 방법은 있습니다.
1. 복합 데이터 구조를 활용하라
복합 데이터 구조는 배열과 객체를 의미합니다. 여러 값을 하나의 배열이나 객체에 담아 반환함으로써 합성을 쉽게 할 수 있습니다.
예를 들어, 리액트의 `useState` 훅을 사용해 보겠습니다. 이 훅은 값과 setter 함수를 배열로 반환합니다:
const [temperature, setTemp] = useState(23);이를 변환 함수와 함께 사용하면 다음과 같이 작성할 수 있습니다:
const celsiusToFahrenheit = t => t * 9 / 5 + 32;
const fahrenheitToCelsius = t => (t - 32) * 5 / 9;
const stateCelsiusToFahrenheit = ([temperature, setTemp]) => {
const tempF = celsiusToFahrenheit(temperature);
const setTempF = tempC => setTemp(fahrenheitToCelsius(tempC));
return [tempF, setTempF];
};
const useFahrenheit = compose(
stateCelsiusToFahrenheit,
useState
);
const [tempF, setTempF] = useFahrenheit(23);2. 부분 적용 (Partial Application)
부분 적용은 함수의 일부 매개변수를 고정시켜 새로운 함수를 만드는 기술입니다. 예를 들어, HTML 요소를 만드는 함수를 부분 적용할 수 있습니다:
const el = (tag, contents) => `<${tag}>${contents}</${tag}>`;
const ul = el.bind(null, 'ul');
const li = el.bind(null, 'li');
const listify = compose(
ul,
list => list.join(''),
list => list.map(li)
);
const characterList = ['Holmes', 'Watson', 'Mrs. Hudson'];
const characterListHTML = listify(characterList);3. 커링 (Currying)
커링은 다중 인수 함수를 단항 함수의 연속으로 변환하는 기술입니다.
const elCurried = tag => contents => `<${tag}>${contents}</${tag}>`;
const map = func => list => list.map(func);
const join = joinStr => list => list.join(joinStr);
const listify = compose(
elCurried('ul'),
join(''),
map(elCurried('li'))
);
const characterList = ['Holmes', 'Watson', 'Mrs. Hudson'];
const characterListHTML = listify(characterList);결론
이 글에서는 복합 데이터 구조, 부분 적용, 커링 등 여러 기법을 통해 다중 매개변수를 처리하는 방법을 알아보았습니다. 이러한 기술을 적절히 활용하면 복잡한 작업도 효율적으로 수행할 수 있습니다. 다양한 기법으로 함수 합성의 힘을 극대화 시키세요.
참고 자료: J.R. Sinclair, “How to Compose Functions that Take Multiple Parameters (Epic Guide)”