함수형 프로그래밍 기술을 사용하여 아름다운 JavaScript_ibm_javascript를 작성하기 위한 팁

함수형 프로그래밍은 프로그램을 구성하는 데 완전히 다른 방법을 사용하기 때문에 명령형 패러다임에 익숙한 프로그래머는 함수형 프로그래밍을 배우기가 다소 어려울 수 있습니다. 이 기사에서는 함수형 스타일을 사용하여 JavaScript로 훌륭하고 아름다운 코드를 작성하는 방법에 대한 몇 가지 예를 배우게 됩니다. 논의할 내용은 다음과 같습니다.

익명 함수, 함수를 호출하는 다양한 방법, 함수를 다른 함수에 인수로 전달하는 방법 등을 포함한 함수형 프로그래밍 개념.

기능적 개념 적용의 예는 다음과 같습니다: 확장된 배열 정렬, 동적 HTML 적용으로 생성된 아름다운 코드;
함수형 프로그래밍 개념

모두에게 알려주세요. 다음 주소로 제출해 주세요:


Digg

Slashdot



"어떻게"를 설명하여 문제에 대한 해결책을 지정하는 언어 , 많은 개발자가 코딩 방법을 알고 있습니다. 예를 들어 계승을 계산하는 함수를 작성하려면 프로그램을 설명하는 루프를 작성하거나 재귀를 사용하여 모든 숫자의 곱을 찾을 수 있습니다. 두 경우 모두 계산 프로세스가 프로그램에 자세히 설명되어 있습니다. 목록 1은 계승 계산에 사용할 수 있는 C 코드를 보여줍니다.


목록 1. 절차적 스타일 계승

int 계승 (int n)
{
if (n return 1; else
return n * 계승 (n-1);
}



이 유형의 언어는 문제 해결 프로세스를 정의하므로 절차적 프로그래밍 언어라고도 합니다. 함수형 프로그래밍은 이 원칙과 크게 다릅니다. 함수형 프로그래밍에서는 문제가 "무엇"인지 설명해야 합니다.함수형 프로그래밍 언어는 선언적 언어라고도 합니다. 계승값을 계산하는 동일한 프로그램은 n까지의 모든 숫자의 곱으로 작성될 수 있습니다. 계승 계산을 위한 일반적인 기능적 프로그램은 목록 2의 예와 같습니다.


목록 2. 기능적 스타일 계승

factorial n, 여기서 n factorial n :=foldr * 1 take n [1.. ]



두 번째 문은 1부터 시작하는 처음 n개 숫자의 목록을 가져온 다음(n [1..] 사용) 해당 제품을 찾도록 지정합니다. 1은 기본 위안입니다. 이 정의는 루프나 재귀가 없다는 점에서 이전 예제와 다릅니다. 이는 계승 함수의 산술적 정의와 같습니다. 라이브러리 함수(take 및foldr)와 표기법(목록 표기법 [ ])의 의미를 이해하면 코드 작성이 쉽고 읽기 쉽습니다.

단 세 줄의 미란다 코드만으로 너비 우선 또는 깊이 우선 순회를 사용하여 매개변수에 따라 n항 트리의 각 노드를 처리하는 루틴을 작성할 수 있으며 요소는 다음과 같습니다. 어떤 일반적인 유형이든.​

역사적으로 함수형 프로그래밍 언어는 여러 가지 이유로 인기가 떨어졌습니다. 그러나 최근에는 일부 기능적 프로그래밍 언어가 컴퓨터 산업에 진출하고 있습니다. 한 가지 예는 .NET 플랫폼의 Haskell입니다. 다른 경우에는 기존 언어가 함수형 프로그래밍 언어의 개념을 차용합니다. 일부 C 구현의 반복자와 연속은 물론 JavaScript에서 제공되는 일부 기능적 구성도 이러한 차용의 예입니다. 그러나 기능적 구조를 빌려도 전체 언어 프로그래밍 패러다임은 변하지 않습니다. JavaScript는 함수형 구조가 추가되었다고 해서 함수형 프로그래밍 언어가 된 것은 아닙니다.

이제 JavaScript 함수 구조의 다양한 아름다움과 일상적인 코딩 및 작업에서 이를 사용하는 방법에 대해 논의하겠습니다. 몇 가지 기본 기능부터 시작한 다음 이를 포함하는 몇 가지 흥미로운 애플리케이션을 살펴보겠습니다.

익명 함수

자바스크립트에서는 익명 함수나 이름 없이 함수를 작성할 수 있습니다. 왜 그런 기능이 필요한가요? 계속 읽어보세요. 먼저 그러한 함수를 작성하는 방법을 배우겠습니다. 다음 JavaScript 함수가 있는 경우:
목록 3. 일반적인 함수

function sum(x,y,z) {
return (x y z)}




그러면 해당 익명 함수는 다음과 같아야 합니다.
목록 4. 익명 함수

function(x,y,z) {
return (x y z) ;
}




이를 사용하려면 다음 코드를 작성해야 합니다.


목록 5. 익명 함수 적용

var sum = function(x,y,z) {
return (x y z)
}(1,2,3)
alert(sum); >
함수를 값으로 사용

함수를 값으로 사용할 수도 있습니다. 할당된 값이 함수인 변수를 가질 수도 있습니다. 마지막 예에서는 다음을 수행할 수도 있습니다.
목록 6. 함수 할당 사용

var sum = function(x,y,z) {
return (x y z); }
alert(sum(1,2,3));




위 목록 6의 예에서 변수 sum에 할당된 값은 함수 정의입니다. 그 자체. 이런 식으로 sum은 함수가 되어 어디에서나 호출할 수 있습니다.

함수를 호출하는 다양한 방법

JavaScript에서는 목록 7과 8에 표시된 것처럼 함수를 호출하는 두 가지 방법을 허용합니다.


목록 7. 일반적인 함수 적용

alert ("Hello, World!")



또는


목록 8. 함수를 표현식으로 사용

(alert) ("Hello, World!")



따라서 다음 코드를 작성할 수도 있습니다.


목록 9. 함수 정의 후 바로 사용 가능

( function(x,y,z) { return (x y z) } ) (1, 2, 3) ;



괄호 안에 함수 표현식을 작성한 다음 이를 매개변수에 전달하여 매개변수에 대한 연산을 수행할 수 있습니다. Listing 8의 예제에는 함수 이름이 괄호 안에 직접 포함되어 있지만 Listing 9와 같이 사용할 때는 그렇지 않습니다.

함수를 다른 함수에 인수로 전달

함수를 다른 함수에 인수로 전달할 수도 있습니다. 이는 새로운 개념은 아니지만 다음 예에서는 광범위하게 사용됩니다. 목록 10에 표시된 대로 함수 인수를 전달할 수 있습니다.


목록 10. 함수를 매개변수로 전달하고 함수 적용

var passFunAndApply = function (fn,x,y,z) { return fn(x,y,z ); };

var sum = function(x,y,z) {
return x y z
}

alert( passFunAndApply(sum,3,4,5) ) ); // 12



마지막 경고 문을 실행하면 크기 12의 값이 출력됩니다.

함수 개념 사용

이전 섹션에서는 함수 스타일을 사용하는 몇 가지 프로그래밍 개념을 소개했습니다. 제시된 예는 모든 것을 포괄하는 것도 아니고 중요한 순서대로 나열한 것도 아니며 단지 이 논의와 관련된 일부 예일 뿐입니다. 다음은 JavaScript의 기능적 스타일에 대한 간략한 요약입니다.

함수에 항상 이름이 필요한 것은 아닙니다.
다른 값과 마찬가지로 변수에 함수를 할당할 수 있습니다.
함수 표현식을 작성하고 나중에 적용할 수 있도록 괄호 안에 넣을 수 있습니다.
함수는 다른 함수에 매개변수로 전달될 수 있습니다.

이 섹션에서는 아름다운 JavaScript 코드를 작성하기 위해 이러한 개념을 효과적으로 사용하는 몇 가지 예를 소개합니다. (JavaScript의 함수형 스타일을 사용하면 이 논의 범위를 넘어서는 많은 일을 할 수 있습니다.)

확장 배열 정렬
먼저 배열 요소의 날짜에 따라 데이터를 정렬할 수 있는 정렬 방법을 작성해 보겠습니다. . 이 메소드를 JavaScript로 작성하는 것은 매우 간단합니다. 데이터 객체의 정렬 방법은 비교 함수인 선택적 매개변수를 허용합니다. 여기서는 목록 11의 비교 함수를 사용해야 합니다.

목록 11. 비교 함수

function (x,y) {
return x.date – y.date
}




필요한 기능을 얻으려면 목록 12의 예제를 사용하세요.


목록 12. 정렬 함수의 확장

arr.sort( function (x,y) { return x.date – y.date; })



여기서 arr은 유형 배열 객체입니다. sort 함수는 날짜를 기준으로 arr 배열의 모든 객체를 정렬합니다. 비교 함수는 정렬 작업을 완료하기 위해 해당 정의와 함께 정렬 함수에 전달됩니다. 이 함수를 사용하세요.

모든 JavaScript 객체에는 날짜 속성이 있습니다.
JavaScript의 배열형 정렬 기능은 선택적 매개변수를 허용하며, 선택적 매개변수는 정렬에 사용되는 비교 함수입니다. 이는 C 라이브러리의 qsort 함수와 유사합니다.

HTML을 동적으로 생성하는 아름다운 코드
이 예에서는 배열에서 HTML을 동적으로 생성하는 아름다운 코드를 작성하는 방법을 보여줍니다. 데이터에서 얻은 값을 기반으로 테이블을 생성할 수 있습니다. 또는 배열의 내용을 사용하여 정렬된 목록과 정렬되지 않은 목록을 생성할 수 있습니다. 수직 또는 수평 메뉴 항목도 생성할 수 있습니다.
목록 13의 코드 스타일은 일반적으로 배열에서 동적 HTML을 생성하는 데 사용됩니다.


목록 13. 동적 HTML을 생성하는 일반 코드

var str=' '
for (var i=0;i var element=arr[i];
str =... HTML 생성 코드...
}
document.write(str)



이 코드를 목록 14의 코드로 바꿀 수 있습니다.


목록 14. 동적 HTML을 생성하는 일반적인 방법

Array.prototype.fold=function(templateFn) {
var len=this.length
var str; =' ';
for (var i=0; i str =templateFn(this[i])
return str; templateInstance(element) {
return ... HTML 생성 코드 ...
}

document.write(arr.fold(templateInstance))



새로운 함수 접기를 정의하기 위해 Array 유형의 프로토타입 속성을 사용합니다. 이제 이 함수는 나중에 정의된 모든 배열에서 사용할 수 있습니다.

일련의 함수 적용
다음 상황을 고려해보세요. 일련의 함수를 콜백 함수로 사용하고 싶습니다. 이를 달성하기 위해 두 개의 매개변수를 사용하는 window.setTimeout 함수가 사용됩니다. 첫 번째 매개변수는 두 번째 매개변수에 표시된 밀리초 이후에 호출되는 함수입니다. 목록 15에서는 이를 수행하는 한 가지 방법을 보여줍니다.
목록 15. 콜백에서 함수 세트 호출

window.setTimeout(function(){alert('First!');alert('Second!');}, 5000); >


목록 16은 이를 수행하는 더 좋은 방법을 보여줍니다.


목록 16. 일련의 함수를 호출하는 더 좋은 방법

Function.prototype.sequence=function(g) {
var f=this
return; function () {
f();g();
}
}
function AlertFrst() { Alert('첫 번째!') }
function AlertSec(); ( 'Second!'); }
setTimeout(alertFrst.sequence(alertSec), 5000);



이벤트를 호출한 후 다른 콜백을 호출하려는 경우 목록 16의 코드를 사용하여 콜백을 확장할 수도 있습니다. 이제 관심이 높아졌으므로 이는 스스로 완료할 수 있는 연습이 될 수 있습니다.






맨 위로




결론

당신은 여러 분야에서 JavaScript의 함수형 프로그래밍을 사용하여 일상 활동을 아름다운 방식으로 완료할 수 있습니다. 이 문서의 예제에서는 몇 가지 시나리오를 보여줍니다. 함수형 프로그래밍에 대한 올바른 컨텍스트를 찾고 개념을 적용하면 더 많은 이해를 얻고 우아함을 높일 수 있습니다.
에서 더보기