Ramda.js를 통한 실습 기능 프로그래밍-JS 튜토리얼-php.cn

Hands-on Functional Programming with Ramda.js 이 기사는 Yaphi Berhanu, Vildan Softic, Jani Hartikainen 및 Dan Prince에 의해 검토되었습니다. itepoint 컨텐츠를 최대한 활용 한 모든 Sitepoint Peer Reviewer에게 감사합니다! JavaScript의 매력 중 하나는 기능적 프로그래밍 특성입니다. 처음부터 기능은 JavaScript 세계의 일류 시민이었습니다. 이를 통해 여러 가지 방법으로 쉽게 구성 할 수있는 우아하고 표현적인 코드를 작성할 수 있습니다. 그러나 기능 프로그래밍만으로는 기능적 프로그래밍을 자동으로 구현할 수 없습니다. Ramda.js는 기능적 프로그래밍을 위해 JavaScript를 시작하는 데 도움이되는 매우 인기있는 도서관 (Github에 4K 이상의 별이있는)입니다.

키 포인트

Ramda.js의 주요 특징에는 자동 컬링 기능과 불변에 대한 강조가 포함되어있어 부작용없이 기능 파이프 라인을 쉽게 구축 할 수 있습니다.

이 라이브러리는 프론트 엔드 및 Node.js 환경에 적합하며 다른 JavaScript 라이브러리 또는 프레임 워크와 완벽하게 통합 될 수 있습니다.

<..> ramda.js는 데이터 구조의 작동을 단순화하고 코드의 가독성과 유지 가능성을 향상시키는 실용적인 방법과 함수를 제공합니다.

Ramda.js는 많은 장점이 있지만 개발자는 사용 여부를 결정할 때 특정 프로젝트 요구 사항과 팀의 친숙 함을 고려해야합니다. 초보자

Ramda.js를 최대한 활용하려면 작은 node.js 프로젝트를 만들어 그 장점에 익숙해야합니다. NPM (Node Package Manager)을 통해 간단히 설치할 수 있습니다.

일반적으로 라이브러리의 기능을 네임 스페이스 R로 가져옵니다. 이런 식으로 Ramda 메소드에 대한 모든 호출은 R. 접두사를 갖습니다.

물론 프론트 엔드 코드에서 Ramda.js를 사용하는 것을 막을 수있는 것은 없습니다. 브라우저에는 라이브러리 사본에 대한 올바른 경로 만 포함하면됩니다. 다음 HTML 코드 스 니펫만큼 간단 할 수 있습니다.

<..> ramda.js는 dom 또는 node.js-specific 기능을 사용하지 않습니다. 언어 라이브러리/확장 일 뿐이며 JavaScript 런타임에 이미 노출 된 구조 및 알고리즘을 기반으로합니다 (ECMAScript 5에서 표준화). 심층적 인 연구를 수행 할 준비가 되셨습니까? 일부 기능의 실제 적용을 살펴 보겠습니다!

R.map 개념 R.prop 기능 프로그래밍에서 가장 중요한 개념은 순수한 기능의 개념입니다. 순수한 기능은 묘사 적이며 어떤 상태도 바꾸지 않습니다. 수학적 관점에서 볼 때, 이것은 sin (x)과 같은 기능이 매우 자연스럽고 외부 상태에 의존하지 않기 때문에 의미가 있습니다. 순수한 기능 외에도 단일 파라미터 기능을 원합니다. 그들은 가장 원시적입니다. 제로 파라미터 함수는 일반적으로 외부 상태가 변경되므로 순수한 기능이 아닙니다. 그러나 JavaScript와 같은 언어에서는 일반적으로 여러 매개 변수가있는 기능이 있습니다.

currihua

더 높은 차수 함수 (즉, 함수를 입력 및 출력으로 방출 할 수있는 함수)와 결합 된 클로저 (로컬 변수 캡처)를 가질 수있는 기능은 좋은 방법을 제공합니다 : 카레. 카레는 다중 (N을 가정하면) 매개 변수를 가진 함수가 단일 매개 변수를 갖는 함수로 변환되는 프로세스로서 단일 매개 변수로 다른 함수를 반환하는 프로세스입니다. 이것은 모든 필요한 매개 변수가 수집 될 때까지 계속됩니다. ramda.js 헬퍼 함수를 사용하여 매개 변수가 문자열인지 테스트하는 단일 매개 변수 래퍼를 작성한다고 가정 해 봅시다. 다음 코드는 작업을 수행합니다.

이것은 카레를 사용하여 더 쉽게 수행 할 수 있습니다. R.IS는 Ramda.js의 일부이므로 기능에 필요한 것보다 적은 매개 변수를 제공하면 라이브러리는 자동으로 카레 기능을 반환합니다.

이것은 더 표현력이 있습니다. 우리는 단일 논쟁으로 R.IS를 불렀기 때문에 기능을 얻었습니다. 두 번째 호출에서 (원래 함수 호출은 두 개의 매개 변수를 사용합니다) 결과를 얻습니다. 그러나 처음에 Ramda.js 도우미 기능을 사용하지 않으면 어떻게해야합니까? 코드 어딘가에 다음 함수를 정의했다고 가정 해 봅시다.

이것은 완전한 2 차 다항식입니다. 가능한 모든 값을 허용하는 네 가지 매개 변수가 있습니다. 그러나 일반적으로 고정 된 매개 변수 세트 a, b 및 c에 대해 x를 변경하려고합니다. ramda.js : 를 사용하여 변환하는 방법을 살펴 보겠습니다

npm install ramda

로그인 후 복사

마찬가지로, 우리는 단순히 매개 변수 평가를 사용하여 특정 서브 세트에 대한 별칭을 생성 할 수 있습니다. 예를 들어, 방정식 x -1은 다음과 같이 얻을 수 있습니다.

기능의 매개 변수에 의해 매개 변수 수가 제공되지 않는 경우, 우리는 Curryn을 사용하고 매개 변수 수를 명시 적으로 지정해야합니다. 카레는 Ramda.js의 중심에 있지만 도서관은 더 이상 흥미롭지 않은 것처럼 보입니다. 기능 프로그래밍의 또 다른 중요한 개념은 불변입니다.

변경되지 않은 구조 <🎜 🎜> 함수가 상태를 변경하지 못하게하는 가장 쉬운 방법은 변경할 수없는 데이터 구조 만 사용하는 것입니다. 간단한 개체의 경우 읽기 전용 액세서가 필요합니다.

var R = require('ramda');

로그인 후 복사

<.>는 허용되지 않습니다. 읽기 전용 속성을 선언하는 것 외에도 Getter 기능으로 변환 할 수도 있습니다.

이것은 이제 훨씬 나아졌지만 객체는 여전히 변경 될 수 있습니다. 이것은 누군가가 getx 함수의 사용자 정의를 추가 할 수 있음을 의미합니다.

npm install ramda

로그인 후 복사

불변을 달성하는 가장 좋은 방법은 Object.freeze를 사용하는 것입니다. Const 키워드와 결합하여 변경할 수없는 불변 변수를 소개 할 수 있습니다.

또 다른 예제에는 목록이 포함됩니다. 불변의 목록에 요소를 추가하려면 원래 목록을 복사하고 끝에 새 요소를 추가해야합니다. 물론, 우리는 원래 객체의 불변 지식을 사용하여 구현을 최적화 할 수 있습니다. 이렇게하면 사본을 간단한 참조로 바꿀 수 있습니다. 본질적으로 이것은 링크 된 목록으로 바뀔 수 있습니다. 우리는 표준 JavaScript 배열이 변경 가능하므로 정확성을 보장하기 위해 복사해야한다는 것을 알아야합니다. 부록 ()와 같은 방법은 JavaScript 배열에서 작업하고 이러한 배열을 반환합니다. 작업은 동일한 인수로 기능을 여러 번 호출하면 항상 동일한 결과를 얻을 수 있습니다.

var R = require('ramda');

로그인 후 복사

주어진 배열을 반환하지만 지정된 항목을 포함하지 않는 제거 메소드도 있습니다. 다음과 같이 작동합니다

유연한 수의 매개 변수가 있으므로 카레화를 적용하려면 앞에서 언급 한 Curryn 기능이 필요합니다. 사용 가능한 유용한 일반 도우미 기능도 있습니다.

<🎜>

로그인 후 복사

<🎜 🎜> <<> 실용적 방법

<🎜 🎜> 모든 헬퍼 기능의 가장 중요한 개념은 카레링을 용이하게하기 위해 매개 변수가 주문된다는 것입니다. 매개 변수가 더 자주 변경 될수록 다른 매개 변수 이전에있을 가능성이 줄어 듭니다.

sum () 및 range () <🎜 🎜> 물론 Sum and Range와 같은 Ramda.js에서 일반적인 기능을 찾을 수 있습니다.

function isString (test) {
    return R.is(String, test);
}

var result = isString('foo'); //=> true

로그인 후 복사

Range () 헬퍼 함수의 경우 Curry를 사용하여 래퍼를 만들 수 있습니다.

고정 된 (독점) 최대 값으로 래핑하려면 어떻게해야합니까? ramda.js는 r .__ : <🎜 🎜>로 표시되는 특수 매개 변수를 사용하여 우리의 요구를 충족시킵니다.

<<<> map () <🎜 🎜> 또한 Ramda.js는 "더 나은"솔루션을 사용하여 array.prototyp.map과 같은 JavaScript 코어 함수에 대한 대안을 제공하려고합니다. "더 나은"솔루션은 매개 변수 순서가 다르고 상자 밖으로 카레가 있습니다. 아래 그림과 같이 맵 함수의 경우 :

<<<> prop () <🎜 🎜> 또 다른 유용한 유틸리티는 지정된 속성의 값을 얻으려고하는 소품 함수입니다. 주어진 속성이 존재하지 않으면 정의되지 않은 것이 반환됩니다. 값이 실제로 정의되지 않은 경우에는 모호 할 수 있지만 실제로는 거의 관심이 없습니다.

<(> zipwith () <🎜 🎜> 이전에 도입 된 방법이 Ramda.js가 유용한 것을 제공 할 수 있음을 확신시키지 못하면 다음 방법이 더 흥미로울 수 있습니다. 이번에는 특정 예제에 대해 논의하지 않고 대신 선택된 시나리오를 살펴 봅니다. 두 개의 목록이 있고 연결하고 싶다고 가정합니다. 지퍼 기능을 사용하는 것은 실제로 매우 간단합니다. 그러나 일반적인 결과 (자체가 이중 값 배열 인 요소 배열)는 우리가 원하는 결과가 아닐 수 있습니다. 이것은 지퍼 기능이 작동하는 곳입니다. 임의의 함수를 사용하여 값을 단일 값으로 매핑합니다.

마찬가지로, 우리는 벡터에 도트 제품을 소개 할 수 있습니다.

npm install ramda

로그인 후 복사

우리는 곱셈 (생성 [1, 4, 9])에 의해 두 개의 배열을 압축하고 결과를 합 함수로 전달합니다. 어쨌든 열거 가능한 객체를 사용하는 것이 중요한 주제입니다. Ramda.js가 많은 유용한 도우미 기능을 제공한다는 것은 놀라운 일이 아닙니다. 각 요소에 함수를 적용하기 위해 R.MAP를 도입했습니다. 마찬가지로 요소 수를 줄이는 일부 도우미 기능이 있습니다. 단일 값은 가장 일반적인 필터 기능 (다른 배열 생성) 또는 감소 기능으로 생성 될 수 있습니다.

<<<> chain () <🎜 🎜> 배열 작동에 유용한 도우미 기능이 있습니다. 예를 들어, 체인을 사용하여 어레이를 쉽게 병합 할 수 있습니다. 숫자를 입력으로 사용하고 출력과 같은 프라임 요인이있는 배열을 제공하는 함수 PrimeFactorization이 있다고 가정하면 다음과 같이 함수를 숫자 세트와 함께 적용한 결과를 결합 할 수 있습니다.

<<> 실용적인 예 <🎜 🎜> 지금까지 모든 것이 잘 진행되고 있습니다. 가장 큰 문제는 이제 : Ramda.js가 도입 한 이러한 개념을 사용하여 일상 업무의 이점은 무엇입니까? 다음과 같은 (이미 아주 좋아 보이는) 코드 스 니펫이 있다고 가정 해 봅시다.

ramda.js를 사용하여 더 읽기 쉽게 만드는 방법은 무엇입니까? 글쎄, 첫 번째 줄은 충분합니다. 두 번째 줄은 이미 매우 혼란 스럽습니다. 우리가 정말로 원하는 것은 제공된 매개 변수의 게시물 속성을 추출하는 것입니다. 마지막으로, 우리는 약간 혼란스러운 세 번째 줄을 가지고 있습니다. 여기서는 모든 게시물 (매개 변수별로 제공)을 반복하려고합니다. 다시 말하지만, 그 유일한 목적은 특정 특성을 추출하는 것입니다. 다음 솔루션은 어떻습니까?

이것은 아마도 ramda.js 지원 기능 프로그래밍 덕분에 가독성을위한 최상의 솔루션 일 것입니다. 그러나 ECMAScript 6에 소개 된 "Fat Arrow"구문은 매우 간결하고 읽기 쉬운 코드로 이어집니다.

var R = require('ramda');

로그인 후 복사

이것은 Ramda.js 지식 없이는 읽기가 거의 쉽습니다. 또한 추상화 수를 줄입니다. 이는 성능과 유지 관리에만 도움이됩니다.

<🎜 🎜> <<> 렌즈 <🎜 🎜>

마지막으로 유용한 객체 도우미 기능에 대해서도 논의해야합니다. 여기서 렌즈 기능이 있다고 언급 할 가치가 있습니다. 렌즈는 특정 ramda.js 함수에 물체 나 배열과 함께 전달 될 수있는 특수 객체입니다. 이 기능은 각각 객체 또는 배열의 특정 속성 또는 인덱스에서 데이터를 검색하거나 변환 할 수 있습니다. 기사의 시작 부분에서 주어진 불변 예와 마찬가지로 두 개의 키 x와 y가있는 객체가 있다고 가정하십시오. Getter 및 Setter 메소드로 다른 객체의 물체를 감싸는 대신 관심 속성에 "초점"으로 렌즈를 만들 수 있습니다. 객체의 x 속성에 액세스하는 렌즈를 만들려면 다음을 수행 할 수 있습니다.

Prop은 표준 getter (이 소개)이지만 Assoc은 Setter 함수 (3 값 구문 : 키, 값, 개체)입니다. 이제 ramda.js의 함수를 사용 하여이 렌즈에 의해 정의 된 특성에 액세스 할 수 있습니다.

npm install ramda

로그인 후 복사

이 작업은 주어진 위치 객체에 닿지 않습니다 (우리가 동결 여부에 관계없이). 세트는 오버의 특별한 경우 일 뿐이며, 이는 비슷하지만 임의의 값 대신 함수를 취합니다. 그런 다음 함수를 사용하여 값을 변환합니다. 예를 들어, 다음 호출은 x 좌표에 3 :

를 곱합니다.

var R = require('ramda');

로그인 후 복사

Ramda.js, Lodash 또는 기타?

합리적인 질문은 물론 Ramda.js가 선택되는 이유입니다. 왜 우리가 Lodash를 사용하지 않습니까? 물론 Ramda.js가 업데이트되었다고 주장 할 수도 있으므로 더 좋을 것입니다. 그러나 그것은 진실과는 거리가 멀다. 진실은 Ramda.js가 매개 변수 배치 및 선택에 대한 새로운 접근 방식 (JavaScript 라이브러리)을 염두에두고 기능 원리를 염두에두고 구축된다는 것입니다. 예를 들어, ramda.js의 목록 반복자는 목록이 아닌 기본적으로 항목 만 전달합니다. 반면에, 다른 라이브러리 (예 : Lodash)의 표준은 항목과 색인을 콜백 함수로 전달하는 것입니다. 이것은 약간의 문제처럼 보이지만 parseint ()와 같은 편리한 내장 기능을 사용하지 않으면 Ramda.js를 사용하는 동안 잘 작동합니다. 궁극적으로 선택한 것은 특정 요구 사항 또는 팀의 경험 및/또는 지식에 따라 다르지만 Ramda.js가 주목할만한 관심을 가져야 할 몇 가지 이유가 있습니다. 추가 읽기

고급 순서 함수 왜 카레가 도움이되는지

불변성 왜 람다를 선택합니까? 램다 문서 ramda.js 를 사용한 기능적 프로그래밍

결론

기능적 프로그래밍은 만병 통치약으로 간주되어서는 안됩니다. 대신, 기존 도구 상자에 자연스럽게 추가되는 것으로 간주되어야하며, 이는 더 큰 부재 가능성, 유연성 및 더 큰 결함 공차/회전성을 제공합니다. 현대의 JavaScript 라이브러리는 일부 기능적 개념을 활용하려고 시도했습니다. Ramda.js는 자신의 기능 유틸리티 라이브러리를 확장하는 강력한 도구입니다. 기능 프로그래밍에 대해 어떻게 생각하십니까? 어떤 측면에서 그것이 잘 작동한다고 생각하십니까? 의견에 알려주세요!

Ramda 를 사용한 기능 프로그래밍에 대한 FAQS (FAQS)

기능 프로그래밍에 Ramda를 사용하는 주요 장점은 무엇입니까?

Ramda는 JavaScript 프로그래머를위한 실용적인 기능 라이브러리입니다. 기능적 프로그래밍 스타일을 위해 설계되었으므로 기능 파이프 라인을 쉽게 만들 수 있으며 사용자 데이터를 변경하지 않습니다. Ramda를 사용하는 주요 장점은 불변 및 부작용이없는 함수를 강조한다는 것입니다. 이는 기능이 입력 데이터를 변경하지 않으므로 코드를보다 쉽게 예측하고 테스트 할 수 있습니다. Ramda의 기능은 자동으로 Curried이므로 많은 괄호 나 콜백 지옥에서 길을 잃지 않고 오래된 기능에서 새로운 기능을 쉽게 구축 할 수 있습니다.