더 나은 코드를 위한 강력한 JavaScript 함수형 프로그래밍 기술-JS 튜토리얼-php.cn

owerful JavaScript Functional Programming Techniques for Better Code

베스트셀러 작가로서 Amazon에서 제 책을 탐색해 보시기 바랍니다. Medium에서 저를 팔로우하고 지지를 표시하는 것을 잊지 마세요. 감사합니다! 당신의 지원은 세상을 의미합니다!

JavaScript 함수형 프로그래밍은 코드 구성 및 문제 해결에 접근하는 방식에 혁명을 일으켰습니다. 개발자는 이러한 기술을 사용하여 유지 관리, 테스트 및 확장이 더 용이한 애플리케이션을 만들 수 있습니다. JavaScript 코드베이스를 크게 향상시킬 수 있는 8가지 강력한 함수형 프로그래밍 개념을 살펴보겠습니다.

순수 함수는 함수형 프로그래밍의 기초를 형성합니다. 이는 외부 상태를 수정하거나 부작용을 일으키지 않고 주어진 입력에 대해 일관되게 동일한 출력을 반환하는 함수입니다. 순수 기능은 예측 가능하고 테스트하기 쉬우므로 복잡한 애플리케이션에 이상적인 구성 요소입니다.

순수 함수의 예를 살펴보세요.

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

로그인 후 복사

이 함수는 외부 상태에 영향을 주지 않고 항상 두 인수의 합계를 반환합니다. 대조적으로, 불순한 함수는 다음과 같습니다:

let total = 0;

function addToTotal(value) {
  total += value;
  return total;
}

로그인 후 복사

addToTotal 함수는 외부 total 변수를 수정하여 불순하고 추론하기 어렵게 만듭니다.

불변성은 함수형 프로그래밍의 또 다른 중요한 개념입니다. 데이터를 직접 수정하는 대신 원하는 변경 사항이 포함된 새 복사본을 만듭니다. 이 접근 방식은 예상치 못한 부작용을 방지하고 코드를 더욱 예측 가능하게 만듭니다.

다음은 불변 데이터로 작업하는 예입니다.

const originalArray = [1, 2, 3, 4, 5];
const newArray = [...originalArray, 6];

console.log(originalArray); // [1, 2, 3, 4, 5]
console.log(newArray);      // [1, 2, 3, 4, 5, 6]

로그인 후 복사

이 경우에는 원래 배열을 수정하는 대신 추가 요소를 사용하여 새 배열을 생성합니다.

고차 함수는 다른 함수를 인수로 받아들이거나 함수를 반환하는 함수입니다. 이를 통해 강력한 추상화와 코드 재사용이 가능해집니다. map, filter, Reduce와 같은 JavaScript의 내장 메소드는 고차 함수의 훌륭한 예입니다.

맞춤형 고차 함수를 살펴보겠습니다.

function repeat(n, action) {
  for (let i = 0; i < n; i++) {
    action(i);
  }
}

repeat(3, console.log);
// Output:
// 0
// 1
// 2

로그인 후 복사

이 반복 함수는 숫자와 함수를 인수로 받아 해당 함수를 여러 번 실행합니다.

함수 합성을 사용하면 여러 함수를 결합하여 더 복잡한 작업을 만들 수 있습니다. 이 기술은 복잡한 문제를 더 작고 관리하기 쉬운 조각으로 나누는 데 도움이 됩니다.

다음은 함수 구성의 예입니다.

const double = x => x * 2;
const square = x => x * x;

const doubleAndSquare = x => square(double(x));

console.log(doubleAndSquare(3)); // 36

로그인 후 복사

작성 기능을 사용하여 이 프로세스를 더욱 유연하게 만들 수도 있습니다.

const compose = (...fns) => x => fns.reduceRight((y, f) => f(y), x);

const doubleAndSquare = compose(square, double);
console.log(doubleAndSquare(3)); // 36

로그인 후 복사

커링은 여러 인수가 있는 함수를 각각 단일 인수를 사용하는 일련의 함수로 변환하는 기술입니다. 이를 통해 기능을 부분적으로 적용할 수 있으며 재사용 가능한 코드가 더욱 많아질 수 있습니다.

다음은 카레의 예입니다.

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

로그인 후 복사

재귀는 문제를 더 작고 유사한 하위 문제로 분해하여 문제를 해결하기 위해 함수가 자신을 호출하는 강력한 기술입니다. 함수형 프로그래밍에만 국한되지는 않지만 함수형 코드에서는 명령형 루프보다 재귀가 선호되는 경우가 많습니다.

다음은 계승 함수의 재귀적 구현입니다.

let total = 0;

function addToTotal(value) {
  total += value;
  return total;
}

로그인 후 복사

암묵적 프로그래밍이라고도 알려진 포인트 프리 스타일에는 인수를 명시적으로 언급하지 않고 함수를 작성하는 방식이 포함됩니다. 이 스타일은 함수 구성에 중점을 두고 있어 더욱 간결하고 읽기 쉬운 코드로 이어질 수 있습니다.

다음 예를 고려해보세요.

const originalArray = [1, 2, 3, 4, 5];
const newArray = [...originalArray, 6];

console.log(originalArray); // [1, 2, 3, 4, 5]
console.log(newArray);      // [1, 2, 3, 4, 5, 6]

로그인 후 복사

차이가 미미해 보일 수 있지만 포인트 프리 스타일은 고차 함수 및 함수 합성 작업에 특히 유용할 수 있습니다.

펑터와 모나드는 함수형 방식으로 부작용과 복잡한 작업을 처리하는 방법을 제공하는 함수형 프로그래밍의 고급 개념입니다. 펑터는 매핑할 수 있는 유형인 반면, 모나드는 해당 특정 유형에 대해 함수 적용 및 구성이 작동하는 방식을 정의하는 유형입니다.

다음은 JavaScript 펑터의 간단한 예입니다.

function repeat(n, action) {
  for (let i = 0; i < n; i++) {
    action(i);
  }
}

repeat(3, console.log);
// Output:
// 0
// 1
// 2

로그인 후 복사

이 예에서 Maybe는 null이거나 정의되지 않은 값에 대해 안전하게 작업을 수행할 수 있게 해주는 펑터입니다.

이제 8가지 함수형 프로그래밍 기술을 다루었으므로 이를 실제 시나리오에 적용하여 더 깔끔하고 유지 관리하기 쉬운 코드를 만드는 방법을 살펴보겠습니다.

함수형 프로그래밍의 일반적인 사용 사례 중 하나는 데이터 변환입니다. 사용자 개체 배열이 있고 특정 정보를 추출하고 형식을 지정한다고 가정해 보겠습니다. 이를 달성하기 위해 순수 함수, 고차 함수 및 함수 합성의 조합을 사용할 수 있습니다.

const double = x => x * 2;
const square = x => x * x;

const doubleAndSquare = x => square(double(x));

console.log(doubleAndSquare(3)); // 36

로그인 후 복사

이 예에서는 순수 함수(getName, capitalize, addGreeting), 함수 합성(compose) 및 고차 함수(map)를 사용하여 데이터를 깔끔하고 재사용 가능한 방식으로 변환했습니다.

함수형 프로그래밍의 또 다른 강력한 응용 분야는 상태 관리입니다. 상태를 불변으로 취급하고 순수 함수를 사용하여 새로운 상태를 계산함으로써 더 예측 가능하고 디버그하기 쉬운 애플리케이션을 만들 수 있습니다. 다음은 기능적 원리를 사용하여 구현된 카운터의 간단한 예입니다.

const compose = (...fns) => x => fns.reduceRight((y, f) => f(y), x);

const doubleAndSquare = compose(square, double);
console.log(doubleAndSquare(3)); // 36

로그인 후 복사

이러한 불변 상태 업데이트 패턴과 새로운 상태 계산을 위한 순수 함수는 Redux와 같은 많은 최신 상태 관리 라이브러리의 기초입니다.

함수형 프로그래밍은 비동기 작업을 크게 단순화할 수도 있습니다. 펑터와 모나드를 사용하면 보다 예측 가능하고 구성 가능한 방식으로 비동기 코드를 처리할 수 있습니다. 다음은 간단한 Task 모나드를 사용하는 예입니다:

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

로그인 후 복사

이 예에서는 비동기 작업을 연결하고 기능적인 방식으로 오류를 처리할 수 있는 작업 모나드를 만들었습니다. 이 접근 방식은 기존 콜백이나 약속 기반 접근 방식에 비해 더 읽기 쉽고 유지 관리하기 쉬운 비동기 코드로 이어질 수 있습니다.

함수형 프로그래밍 기술은 프런트 엔드 개발의 DOM 조작 및 이벤트 처리에도 적용될 수 있습니다. DOM을 불변 데이터 구조로 취급하고 순수 함수를 사용하여 새로운 DOM 상태를 계산함으로써 더 예측 가능하고 테스트하기 쉬운 UI 코드를 만들 수 있습니다.

다음은 DOM에서 카운터를 업데이트하는 기능적 접근 방식의 간단한 예입니다.

let total = 0;

function addToTotal(value) {
  total += value;
  return total;
}

로그인 후 복사

이 예에서는 순수 함수를 사용하여 상태를 업데이트하고 UI를 렌더링하여 코드를 더 예측 가능하고 테스트하기 쉽게 만들었습니다.

함수형 프로그래밍 기술은 오류 처리에도 적용될 수 있습니다. 예측할 수 없는 제어 흐름으로 이어질 수 있는 예외를 발생시키고 포착하는 대신,either 또는 Result와 같은 펑터를 사용하여 실패할 수 있는 계산을 나타낼 수 있습니다.

const originalArray = [1, 2, 3, 4, 5];
const newArray = [...originalArray, 6];

console.log(originalArray); // [1, 2, 3, 4, 5]
console.log(newArray);      // [1, 2, 3, 4, 5, 6]

로그인 후 복사

이 접근 방식을 사용하면 예외 처리에 의존하지 않고도 보다 예측 가능하고 구성 가능한 방식으로 오류를 처리할 수 있습니다.

결론적으로 함수형 프로그래밍 기술은 더욱 깔끔하고 유지 관리가 쉬운 JavaScript 코드를 생성하는 강력한 도구를 제공합니다. 순수 함수, 불변성, 고차 함수, 함수 합성과 같은 개념을 수용함으로써 우리는 더 쉽게 이해하고, 테스트하고, 디버깅할 수 있는 코드를 작성할 수 있습니다. 커링, 재귀, 포인트 프리 스타일, 펑터 등의 고급 개념은 유연성과 재사용성을 극대화하기 위해 코드를 구성하는 더 많은 방법을 제공합니다.

함수형 프로그래밍 패러다임에 적응하는 데는 다소 시간이 걸릴 수 있지만 코드 품질 및 개발자 생산성 측면에서 얻을 수 있는 이점은 상당합니다. 이러한 기술을 JavaScript 프로젝트에 통합하면 코드가 더욱 모듈화되고 추론하기가 더 쉬워지며 버그가 발생할 가능성이 줄어듭니다. 중요한 것은 작은 규모로 시작하여 점진적으로 코드베이스에 기능적 개념을 도입하고, 기본 사항에 익숙해짐에 따라 더욱 발전된 기술을 구축하는 것입니다.

함수형 프로그래밍은 양자택일의 제안이 아니라는 점을 기억하세요. 기존 코드베이스에 순수 함수와 불변성을 도입하는 것부터 시작하고 적절하다고 판단되는 대로 점차적으로 고급 기술을 채택할 수 있습니다. 목표는 더 깔끔하고 유지 관리하기 쉬운 코드를 작성하는 것이며, 함수형 프로그래밍은 이러한 목표를 달성하기 위한 강력한 도구 세트를 제공합니다.