Functional JavaScript

1. 자바스크립트는 일급 함수를 통해 함수형 프로그래밍을 지원합니다

일급 함수란 다른 값이 갈 수 있는 곳 어디든 갈 수 있는 함수로, 제한이 거의 없거나 전혀 없는 함수를 말합니다.

값으로서의 함수. 자바스크립트에서는 함수가 변수에 할당될 수 있고, 다른 함수의 인수로 전달되며, 함수에서 반환되고, 데이터 구조에 저장될 수 있습니다. 이러한 유연성은 함수형 프로그래밍 기법을 가능하게 합니다. 예를 들어:

• 함수를 변수에 할당: var square = function(x) { return x * x; }
• 함수를 인수로 전달: [1, 2, 3].map(function(x) { return x * 2; })
• 함수를 반환: function makeAdder(x) { return function(y) { return x + y; }; }

이러한 일급 함수의 특성은 자바스크립트에서 많은 함수형 프로그래밍 패턴의 기초가 됩니다.

2. 고차 함수는 함수형 자바스크립트의 핵심입니다

다른 함수를 캡처하는 고차 함수는 추상화를 구축하는 데 매우 강력한 기법입니다.

강력한 추상화. 고차 함수는 함수를 인수로 받거나 결과로 반환합니다. 이는 강력한 추상화와 코드 재사용을 가능하게 합니다. 일반적인 예로는 다음이 있습니다:

• map: 컬렉션의 각 요소를 변환
• reduce: 컬렉션의 요소를 단일 값으로 결합
• filter: 조건에 따라 컬렉션에서 요소 선택

이러한 함수들은 복잡한 작업을 간결하게 표현하고 동작을 구성할 수 있게 합니다. 예를 들어:

const numbers = [1, 2, 3, 4, 5];
const evenSquares = numbers
  .filter(x => x % 2 === 0)
  .map(x => x * x);

이 코드는 짝수를 선택하고 제곱하는 의도를 명확하게 표현하며, 루프나 중간 배열을 명시적으로 관리하지 않습니다.

3. 클로저는 자바스크립트에서 강력한 함수형 기법을 가능하게 합니다

클로저는 정의된 스코프에서 외부 바인딩(자신의 인수가 아닌)을 캡처하여 나중에 사용할 수 있는 함수입니다(해당 스코프가 완료된 후에도).

캡슐화와 상태. 클로저는 함수가 외부 스코프의 변수를 "기억"하고 접근할 수 있게 합니다. 이는 다음을 가능하게 합니다:

• 비공개 상태: 특정 함수만 접근할 수 있는 변수 생성
• 함수 팩토리: 매개변수에 따라 특화된 함수 생성
• 부분 적용: 기존 함수의 일부 인수를 고정하여 새로운 함수 생성

비공개 상태를 유지하는 클로저의 예:

function counter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

const increment = counter();
increment(); // 1
increment(); // 2

count 변수는 직접 접근할 수 없지만, 반환된 함수는 이를 접근하고 수정할 수 있습니다.

4. 함수 조합은 단순한 부분에서 복잡한 동작을 구축할 수 있게 합니다

함수형 프로그래밍은 프로그램을 분해하고 동일한 부분에서 다시 조립하는 것입니다. 이는 함수 경계를 통해 추상화됩니다.

복잡성 구축. 함수 조합은 두 개 이상의 함수를 결합하여 새로운 함수를 만드는 과정입니다. 이를 통해:

• 단순하고 재사용 가능한 부분에서 복잡한 동작 생성
• 복잡한 작업을 분해하여 코드 가독성 향상
• 작은 기능 단위를 격리하고 테스트하여 유지보수성 향상

조합은 다양한 방법으로 달성할 수 있습니다:

• 수동 조합: const f = x => h(g(x))
• 유틸리티 함수: const compose = (f, g) => x => f(g(x))
• Ramda나 Lodash/FP 같은 라이브러리

조합을 통한 데이터 처리 파이프라인 구축 예:

const processData = compose(
  summarize,
  filterOutliers,
  normalize,
  parseInput
);

이는 데이터 처리의 단계를 명확하게 표현하며, 구현 세부 사항으로 코드를 어지럽히지 않습니다.

5. 순수 함수와 불변성은 더 예측 가능한 코드를 만듭니다

순수 함수로 프로그래밍하는 것은 매우 제한적으로 보일 수 있습니다. [...] 그러나 상태 변이를 자유롭게 허용하면 조합의 가능성을 제한하고, 각 명령문의 효과를 추론하기 어렵게 하며, 코드를 테스트하기 어렵게 만듭니다.

예측 가능성과 테스트 용이성. 순수 함수는 주어진 입력에 대해 항상 동일한 출력을 생성하며 부작용이 없습니다. 이는 불변 데이터와 결합하여:

• 코드 동작을 이해하기 쉽게 만듭니다
• 테스트와 디버깅을 용이하게 합니다
• 안전한 병렬 처리와 메모이제이션을 가능하게 합니다

순수성과 불변성을 유지하기 위한 전략:

• 변경되지 말아야 할 변수에 const 사용
• 기존 객체/배열을 수정하는 대신 새로운 객체/배열 생성
• 효율적인 불변 데이터 구조를 위한 Immutable.js 같은 라이브러리 사용

순수 함수의 예:

function addToCart(cart, item) {
  return [...cart, item];
}

이 함수는 원래의 장바구니를 수정하지 않으므로 변경 사항을 추적하고 동작을 예측하기 쉽습니다.

6. 재귀는 함수형 프로그래밍에서 루프의 대안을 제공합니다

재귀를 사용하면 상태는 함수 인수를 통해 관리되며, 변화는 한 재귀 호출에서 다음 호출로의 인수를 통해 모델링됩니다.

우아한 해결책. 재귀는 계층적이거나 반복적인 구조를 포함하는 문제에 대해 더 우아하고 간결한 해결책을 제공하는 경우가 많습니다. 이점은 다음과 같습니다:

• 일부 알고리즘의 자연스러운 표현 (예: 트리 순회)
• 루프와 관련된 가변 상태 회피
• 컴파일러 최적화 가능성 (꼬리 호출 최적화)

그러나 대부분의 환경에서 꼬리 호출 최적화가 없는 자바스크립트에서는 스택 오버플로우 위험이 있습니다. 이를 완화하는 기술로는:

• 트램폴린: 재귀 호출을 덩크로 감싸기
• 연속 전달 스타일: 호출 스택을 명시적으로 관리

중첩 배열을 평탄화하는 재귀 함수의 예:

function flatten(arr) {
  return arr.reduce((flat, next) => 
    flat.concat(Array.isArray(next) ? flatten(next) : next), 
  []);
}

7. 함수형 프로그래밍은 데이터 흐름과 변환 파이프라인을 촉진합니다

파이프라인은 순수해야 합니다—데이터는 이를 통해 실행됨으로써 손상되지 않습니다.

명확한 데이터 변환. 함수형 프로그래밍은 일련의 변환을 통해 데이터가 흐르는 방식으로 사고하도록 장려합니다. 이러한 접근 방식은:

• 데이터 처리 단계를 명확하게 보여주어 코드 가독성 향상
• 관심사를 분리하여 유지보수성 향상
• 병렬 처리와 최적화를 촉진

파이프라인 구축을 위한 기법:

• 메서드 체이닝 (예: lodash 사용)
• 순수 함수의 조합
• 비동기 데이터 스트림을 위한 RxJS 같은 전문 라이브러리

데이터 처리 파이프라인의 예:

const processOrders = pipe(
  fetchOrders,
  filterValidOrders,
  calculateTotals,
  generateReport
);

이는 주문을 처리하는 단계를 명확하게 보여주며, 구현 세부 사항으로 코드를 어지럽히지 않습니다.

8. 믹스인 기반 설계는 객체 조합에 대한 함수형 접근 방식을 제공합니다

단순한 데이터가 가장 좋습니다. 특수한 데이터 타입은 특별해야 합니다.

유연한 조합. 믹스인은 고전적 상속에 의존하지 않고 객체의 동작을 조합하는 방법을 제공합니다. 이러한 접근 방식은:

• 더 유연하고 모듈화된 코드 설계를 가능하게 합니다
• 깊은 상속 계층과 관련된 문제를 피합니다
• 객체 지향 프로그래밍의 함수형 스타일을 촉진합니다

자바스크립트에서 믹스인 구현:

• Object.assign()을 사용하여 메서드를 객체 프로토타입에 복사
• 믹스인을 적용하는 팩토리 함수를 생성하기 위해 고차 함수 사용

믹스인을 사용하여 객체를 생성하는 예:

const withLogging = (obj) => ({
  ...obj,
  log: (msg) => console.log(`[${obj.name}]: ${msg}`)
});

const withValidator = (obj) => ({
  ...obj,
  validate: () => { /* validation logic */ }
});

const createUser = (name) => 
  withValidator(withLogging({ name, data: {} }));

이 접근 방식은 엄격한 클래스 계층 없이 객체 동작의 유연한 조합을 가능하게 합니다.

Last updated: September 6, 2024