여러 매개변수가 있는 JavaScript의 함수 구성

JavaScript의 함수 구성은 여러 함수 호출을 하나의 함수로 결합하는 프로세스입니다.

함수 구성을 수행할 수 있는 방법

고차 함수를 만들고 이 메서드에서 필요한 함수를 매개 변수로 전달합니다.

reduce() 또는 reduceright() 함수를 사용하고 결합해야 하는 모든 독립 함수를 전달합니다.

이것이 어떻게 가능한지 봅시다

접근법 1 : 고차 함수 사용

UseCase: 각 직원에 대한 일종의 직원 카드에 직원 세부 정보를 인쇄해야 하는 시나리오가 있고 세 가지 독립적인 기능이 있는 경우.
예제 코드는 다음과 같습니다.

    // function1 to print employee id
    const printId = (employeeId) =>{
      console.log("Printing| EmployeeId:", employeeId);
    }

    //function2 to print employee name
    function printname(name) {
      console.log("Printing| Name:", name);
    }

    //function3 to print email and designation among other info.
    const printOther = (email, designation) =>{
      console.log(`Printing| Email: ${email} ,Designation: ${designation}`);  
    }

    //function 4 is an higher order function that runs the functions being passed into it
    const print = (funcA, funcB) => (param_ToFunctionB) =>
      funcA(funcB(param_ToFunctionB));


    //printing the combination of above js functions
    print(
      printId(1234),
      print(
        printname("Rahul"),
        printOther("[email protected]", "software engineer")
      )
    );

    //output
    Printing| EmployeeId: 1234
    Printing| Name: Rahul
    Printing| Email: rahul@web.com ,Designation: software engineer

print(funcA, funcB) 함수는 더 큰 형식을 취합니다. 컴포지션에 더 많은 기능을 추가해야 할 때 더 많은 코드 줄.

접근법 2: 함수 구성에 reduce() 또는 reduceRight() 함수 사용

위와 동일한 사용 사례의 경우 JavaScript에서 함수 구성을 수행하는 두 번째 방법은 reduce() 또는 reduceRight() 함수를 사용하는 것입니다.

JavaScriptreduceRight() 함수는 배열의 각 요소에 대해 함수를 실행하여 단일 값으로 줄입니다. 또한 reduceRight() 함수는 오른쪽부터 요소를 실행하는 반면 reduce() 메서드는 왼쪽부터 요소를 실행합니다.

It is noteworthy that functions objects being passed to the reduce() or reduceRight() function should have same number of arguments in each of them, and it should also return one value
So, any function can be made composable by converting that function into a curry function

Currying은 클로저를 사용하여 여러 입력 인수(2개, 3개 또는 그 이상 다항식)를 취하는 함수를 내부적으로 관련된 함수 집합으로 변환하는 함수형 프로그래밍 기술입니다. 여기서 각 함수는 단일 입력, 단일 출력 함수 및 최종 출력입니다. 가장 바깥쪽 함수에서 반환됩니다.

Simply written, currying is the way of reshaping the function type f(a, b, c) to f(a)(b)(c) .
e.g.

    //normal function call
    const departmentEmployees=(departmentName,empId,empName)=>{
        console.log(`${departmentName} Info| ${empId} :: ${empName}`);
        return true;
    }
    //transformed carried function
    const departmentCarryTransformed = (departmentName)=>(empId)=>(empName)=>{
        console.log(`${departmentName} Info | ${empId} :: ${empName}`);
            return true;
    }
    //carry function benefit
    //we can create single global variable for a department and use it elsewhere across the file or the page
    let accountsDepartment= departmentCarryTransformed("Accounts");
    accountsDepartment(123)('bob');
    accountsDepartment(2)('tom');

따라서 이 경우의 기능

    // function1 to print employee id
    const printId = (attributes) => {
      console.log("Printing| EmployeeId:", attributes.employeeId);
      return attributes;
    };

    //function2 to print employee name
    function printname(obj) {
      console.log("Printing| Name:", obj?.name);
      return obj;
    }


    //function3 to print email and designation among other info.
    const printOther = (attributes) => {
      console.log(
        `Printing| Email: ${attributes?.email} ,Designation: ${attributes?.designation}`
      );
    };


    // TO make the function composition easier, we can use rest parameters to pass indefinite number of arguments to the function
    const smarterPrint =
      (...functions) =>
      (params) =>    functions.reduceRight((p, fn) => fn(p),params);


    // parameters that we need to pass to different functions to print specific info
    const fn_params = {
      employeeId: 1234,
      name: "rahul ranjan",
      email: "[email protected]",
      designation: "software engineer",
    };

    // this function composition way takes lesser code of lines.
    smarterPrint(printOther, printname, printId)(fn_params);

    // second way
    const smarterPrintOtherWay = (paramsObj) => printOther(printname(printId(paramsObj)));

    smarterPrintOtherWay(fn_params);

    //output is same 
    Printing| EmployeeId: 1234
    Printing| Name: Rahul
    Printing| Email: rahul@web.com ,Designation: software engineer

함수 구성에 대한 이 접근 방식의 이점은 코드 베이스가 증가함에 따라 시각적으로 나타납니다.

참조

https://javascript.info/currying-partials

https://jrsinclair.com/articles/2022/javascript-function-composition-whats-the-big-deal/

https://medium.com/hackernoon/javascript-functional-composition-for-every-day-use-22421ef65a10