함수형 프로그래밍을 사용한 JavaScript 고차 함수

이 기사에서는 자바스크립트 내장 고차 함수와 함께 함수형 프로그래밍(FP)의 장점을 살펴보겠습니다.

따라서 함수형 프로그래밍에 대해 더 잘 이해하는 방식으로 몇 가지 예제를 구현하여 시작하겠습니다.

const num = [2,3,4,5];

const calculateSquare = function (num){
const results = [];
for( let i=0; i<num.length;i++) {
 results.push(num[i] * num[i]);
}
return results;

};
console.log(calculateSquare(num));  //This returns ->(4) [4, 9, 16, 25]
const calculateCube = function (num){
const results = [];
for( let i=0; i<num.length;i++) {
 results.push(num[i] * num[i] * num[i]);
}
return results;
};
console.log(calculateCube(num));  //This returns ->(4) [8, 27, 64, 125]

우리는 필요한 기능을 구현하고 있지만 위의 코드에서 볼 수 있습니다(즉, array(num)에 있는 숫자의 제곱과 큐브). 이를 결과로 푸시한 다음 결과를 반환합니다.

보다 기능적인 방식으로 코드를 최적화하여 더 많은 유사한 기능을 추가하기가 훨씬 더 깔끔하고 쉽게 보이도록 합시다.

const num = [2,3,4,5];
console.log(num); // ->(4) [2, 3, 4, 5]

const square = function(num){
    return num * num;
}

const cube = function(num){
    return num* num * num;
}
//Added a new function to add the num
const add = function(num){
    return num + num;
}

const calculate = function(num,logic){
    const results = [];
    for( let i=0; i < num.length; i++) {
        results.push(logic(num[i]));
    }
    return results;
}
console.log(calculate(num,square)); -> (4)[4, 9, 16, 25]
console.log(calculate(num,cube)); ->(4) [8, 27, 64, 125]
console.log(calculate(num,add));-> (4) [4, 6, 8, 10]

이것은 이 코드와 우리가 작성한 위의 코드 사이의 차이점을 발견할 수 있는 것입니다.

기능적 접근 방식에서 코드는 프로그램의 논리 부분에서 분리된 기능 부분을 수행하는 더 작은 청크 조각 또는 구성 요소의 작은 조각으로 분할됩니다.

이렇게 하면 코드가 더 사용자 친화적이 되고 논리 부분이 기능에서 분리되어 디버깅 부분이 더 쉬워집니다.

나머지는 논리 부분에서 처리하고 필요한 경우 쉽게 수정할 수 있으므로 순수 함수 작성에만 집중해야 하므로 새 함수를 추가하는 것이 이전보다 더 간단합니다.

이제 우리가 생각하는 것보다 더 강력한 🚀 고차 함수에 들어갈 시간입니다. 계산 부분에서 모든 논리를 수행하고 있으므로 계산 부분이 이미 JavaScript(내장 방법)로 작성되었다고 말하면 어떻게 됩니까? 우리는 그것을 사용하고 고차 함수의 진정한 힘을 볼 수 있습니다.

//this is the part we have taking about
const calculate = function(num,logic){
    const results = [];
    for( let i=0; i < num.length; i++) {
        results.push(logic(num[i]));
    }
    return results;
}

//using MAP  function 

const results = (num.map(square)); 
console.log(results); -> (4)[4, 9, 16, 25]

위의 코드에서 지도가 무엇을 하는지 봅시다.

계산 함수는 맵 함수와 거의 유사한 사용자 정의 함수입니다. 맵 함수는 새 배열을 만들고 각 요소를 반복하여 출력을 반환합니다.

지도 기능을 구현하는 한 가지 방법일 뿐이며 MDN 문서에서 참조할 수 있는 지도 기능에는 훨씬 더 많은 가능성이 있습니다.

이것이 함수형 프로그래밍과 고차 함수의 사용에 대한 약간의 이해가 되기를 바랍니다.

읽어 주셔서 감사합니다