함수형 프로그래밍 (Functional Programming)

함수형 프로그래밍은 상태나 데이터를 변경하지 않고, 오직 표현식과 함수만을 사용해 프로그램을 구성하는 패러다임입니다. 이 방식을 사용하면 가독성이 향상되고, 값의 예측이 가능해지며, 재사용 가능한 구조를 만들 수 있습니다. 그 결과 버그 발생 가능성도 줄어듭니다.

while,break 같은 제어문은 코드의 추적이 어려워지기 때문에 함수형 프로그래밍에서는 지양합니다. 

• Pure Functions
• Immutability 
• HOC
• Composition

 

Pure Functions

입력값에 대해 항상 동일한 출력을 리턴하며, 외부 상태를 변경하지 않습니다. 

const sum = (a,b) => a + b;

위 함수는 고정된 입력값에 대해 동일한 출력을 내놓는 반면, 

const COUNT = 10; 
const getCost = (a) => COUNT * a;

이 함수는 COUNT값이 변경되면 동일한 입력값이라도 리턴되는 값이 변경되기때문에, 순수하지 않습니다. 

 

자바스크립트에서의 함수형 프로그래밍 

순수함수 메서드 : String.prototype.slice, Array.Prototype.filter, Array.prototype.map, Array.prototype.join 

비순수함수 메서드 : Array.prototype.forEach, Array.prototype.push 

 

HOC

const withMemo = (fn) => {
  const cache = new Map(); //클로저 생성 
  return (...args) => { 
    const key = JSON.stringify(args);
    if (cache.has(key)) { 
      return cache.get(key); // 캐시에서 반환 
    }
    const result = fn(...args);
    cache.set(key, result);
    return result;
  };
};

const add = (a, b) => a + b;
const memoizedAdd = withMemo(add);

memoizedAdd(1, 2); // 계산
memoizedAdd(1, 2); // 캐시에서 반환

 

Composition

const range = (a, b) => a > b ? [] : [a, ...range(a + 1, b)]; // 재귀로 배열을 만듦
const multiply = arr => arr.reduce((p, a) => p * a); // 배열 값 곱하기 
const factorial = n => multiply(range(1, n));

factorial(5); // 120


/*
* 반복문 버전 
*/
function factorial(n) {
  let result = 1;
  for (let i = 1; i <= n; i++) {
    result *= i;
  }
  return result;
}

console.log(factorial(5)); // 120

 

Currying

 

• 여러개의 인자를 받는함수 => 인자. 하나씩 받는 함수들의 체인으로 바꾼것 
• 재사용성, 부분 적용(partial application), 명확한 책임 분리 

function add(a, b) {
  return a + b;
}

위 함수를 아래처럼 바꾸는 것 

function curriedAdd(a) {
  return function (b) {
    return a + b;
  };
}

이제 add(2, 3) 대신, curriedAdd(2)(3)처럼 호출합니다.

 

const multiply = a => b => a * b;

const double = multiply(2);
const triple = multiply(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

 

//API 호출시 사용해보기 

const fetchWithToken = token => endpoint =>
  fetch(endpoint, { headers: { Authorization: `Bearer ${token}` } });

const fetchUser = fetchWithToken('abc123');
fetchUser('/api/users');
fetchUser('/api/posts');