이 기사에서는 JavaScript에서 더 작은 함수를 구성하여 복잡한 기능을 구축하는 방법을 이해하려고 합니다.

EAT, SLEEP, CODE — 중첩 접근 방식

"EAT, SLEEP, CODE" 활동을 수행하고 이를 다시 반복한다고 가정해 봅시다. 다음은 이를 수행할 수 있는 방법입니다.

const activity = (str) => str.toUpperCase();
const sleep = (str) => `${str} SLEEP`;
const code = (str) => `${str} CODE`;
const repeat = (str) => `${str} | ${str}`;

// EAT SLEEP CODE | EAT SLEEP CODE
console.log(
  repeat(code(sleep(activity('eat'))))
  );

EAT, SLEEP, CODE — 고차 구성

우리를 위해 컴포지션을 생성하는 고차 함수를 사용하여 이를 어떻게 개선할 수 있는지 살펴보겠습니다.

const activity = (str) => str.toUpperCase();
const sleep = (str) => `${str} SLEEP`;
const code = (str) => `${str} CODE`;
const repeat = (str) => `${str} | ${str}`;

// Higher order function that accepts any number of functions as arguments
const compose = (...fns) => x => fns.reduce((acc, fn)=> fn(acc),x);
const myRoutine = compose(activity, sleep, code, repeat);

// EAT SLEEP CODE | EAT SLEEP CODE
console.log(myRoutine('eat'));

• compose 메서드는 나머지 연산자를 사용하여 여러 함수를 인수로 받아들일 수 있습니다.
• 그런 다음 초기 값을 기다리는 함수를 반환합니다.
• 이 반환된 함수 내에서 인수(클로저)로 전달된 함수 배열에 액세스할 수 있습니다.
• 함수의 순서는 왼쪽에서 오른쪽으로 진행됩니다. 따라서 누산기와 함수인 현재 값을 받는 reduce 메서드를 사용할 것입니다. 이것은 현재 함수에 누적된 값의 결과를 반환합니다.
• 감소에 대한 두 번째 인수는 초기 값 x입니다.
• 그래서 우리는 모든 활동을 구성하여 마침내 루틴을 만들 수 있습니다. 루틴은 첫 번째 함수에 대한 인수를 전달하여 호출해야 합니다.

다음은 더 나은 명확성을 위해 작성 기능의 세분화된 보기입니다.

// Arrow variant
const compose = (...fns) => x => fns.reduce((acc, fn)=> fn(acc),x);

// Non arrow variant
function compose(...fns) {
  return function (x) {
    return fns.reduce((acc, fn) => fn(acc), x);
  };
}

이 접근 방식에는 다음과 같은 이점이 있습니다.

• 여러 기능을 중첩하여 발생하는 번거로움을 줄이는 데 도움이 됩니다.
• 읽기 및 확장 가능