상위 기능을 지원하는 언어에는 부모 기능의 다른 작업이 완료된 후에 매개 변수로 함수를 전달하고 실행할 수있는 것이 필수적입니다. JavaScript의 콜백 함수는 비동기 동작을 허용하므로 스크립트는 결과를 기다리는 동안 다른 기능이나 작업을 계속 실행할 수 있습니다.
콜백 함수를 전달하는 능력은 불확실한 기간 후 결과를 반환 할 수있는 리소스를 처리 할 때 중요합니다.
이 고급 기능 패턴은 웹 개발에 매우 유용합니다. 스크립트는 서버에 요청을 보낸 다음 서버의 네트워크 대기 시간 또는 처리 시간을 이해하지 않고 도착하면 응답을 처리해야합니다.
예 : 경고 함수를 요소 이벤트 리스너에게 전달합니다
버튼에 이벤트 리스너를 추가하는이 간단한 JavaScript 코드 스 니펫을 고려하십시오.
이 스크립트는 익명의 인라인 함수를 사용하여 경고를 표시합니다. 그러나 별도로 정의 된 함수를 사용하고 이름을 메소드로 전달하는 데 쉽게 사용할 수 있습니다.
이 작업을 수행함으로써, 우리는 고차 기능을 보여줄뿐만 아니라 코드를보다 읽기 쉽고 강력하게 만들고 다양한 작업에 대한 기능을 분리합니다 (클릭 수신 및 사용자를 상기시킵니다).
고차 함수의 코드 재사성을 지원하는 방법
우리의 함수는 주변 코드와 구조적으로 독립적이며 항상 트리거 요소의 ID를 반환합니다. 이 기능 설계 방법은 기능 프로그래밍의 핵심입니다. 이 코드는 요소 ID를 사용하여 경고를 표시하는 모든 컨텍스트에 존재할 수 있으며 모든 이벤트 리스너와 함께 호출 할 수 있습니다.
인라인 함수를 개별적으로 정의되고 명명 된 기능으로 바꾸는 능력은 가능성의 세계를 열어줍니다. 기능 프로그래밍에서는 외부 데이터를 변경하지 않고 매번 동일한 입력에 대해 동일한 결과를 반환하는 순수한 기능을 개발하려고합니다.
이제 우리는 일반적으로 모든 응용 프로그램에서 사용할 수있는 소규모의 대상 고급 기능 라이브러리를 개발하는 데 도움이되는 기본 도구 중 하나가 있습니다.
참고 : 전송 함수 및 전송 기능 객체
는 <code class="language-javascript">document.getElementById("clicker").addEventListener("click", function() {
alert("you triggered " + this.id);
});</code> 대신 함수 대신 addEventListener를 전달한다는 점에 유의하십시오. 브래킷없이 기능을 이름으로 전달하면 기능 객체 자체를 전달합니다. 괄호로 전달하면 기능을 실행 한 결과를 전달합니다.
고차 함수를 사용하여 결과로 함수를 반환합니다 <code class="language-javascript">var proveIt = function() {
alert("you triggered " + this.id);
};
document.getElementById("clicker").addEventListener("click", proveIt);</code>
javaScript는 함수를 매개 변수로 취하는 것 외에도 함수가 다른 함수를 결과로 반환 할 수 있도록합니다. 함수는 단지 객체이기 때문에 이것은 의미가 있습니다. 객체 (함수 포함)는 문자열, 배열 또는 기타 값과 같은 함수의 리턴 값으로 정의 될 수 있습니다.
그러나 결과적으로 함수를 반환한다는 것은 무엇을 의미합니까?
기능은 문제를 분해하고 재사용 가능한 코드 스 니펫을 만드는 강력한 방법입니다. 함수를 고차 기능의 리턴 값으로 정의하면 새로운 기능의 템플릿 역할을 할 수 있습니다!
이것은 기능적 자바 스크립트의 또 다른 마법의 세계의 문을 열어줍니다.
밀레니엄 세대에 대해 너무 많은 기사를 읽고 피곤하다고 가정 해 봅시다. "밀레니엄 세대"라는 단어가 나타날 때마다 "뱀 사람"이라는 문구로 대체하기로 결정합니다.
귀하의 충동은 간단히 전달 된 텍스트에 대한 텍스트 교체를 수행하는 함수를 작성하는 것일 수 있습니다.
이것은 작동하지만이 상황에 매우 구체적입니다. 아마도 당신의 인내심은 베이비 붐 세대에 관한 기사보다 더 많을 것입니다. 당신은 그들을 위해 사용자 정의 기능을 만들고 싶을 수도 있습니다.
그러나 이러한 간단한 기능의 경우에도 고차 함수로 시작할 수있을 때 작성한 코드를 반복하고 싶지 않습니다.
그러나 원래 문자열에서 케이스를 보존하기 위해 더 멋진 작업을 수행하기로 결정한 경우 어떻게해야합니까? 이 두 가지 새로운 기능을 수정하여이를 수행해야합니다.
이것은 번거롭고 코드를 더욱 깨지기 쉽고 읽기 어렵게 만듭니다. 이 경우 고차 기능을 솔루션으로 사용할 수 있습니다. <code class="language-javascript">document.getElementById("clicker").addEventListener("click", function() {
alert("you triggered " + this.id);
});</code>
구성 템플릿 고차 함수
당신이 정말로 원하는 것은 모든 용어를 다른 용어로 바꾸고 새로운 사용자 정의 함수를 구축 할 수있는 템플릿 함수에서 해당 동작을 정의 할 수있는 유연성입니다.
javaScript는 반환 값으로 함수를 할당 하여이 상황을보다 편리하게 만들 수있는 방법을 제공합니다.
우리가하는 일은 실제 작업을 다기능적이고 확장 가능한
함수로 분리하는 것입니다. 원래 문구를 초기 값으로 사용하여 입력 문자열을 수정하고 문구를 대체하기 위해 일부 태도 출력을 사용하는 데 필요한 모든 작업을 캡슐화합니다. <code class="language-javascript">var proveIt = function() {
alert("you triggered " + this.id);
};
document.getElementById("clicker").addEventListener("click", proveIt);</code>
우리 가이 새로운 기능을 의 고차 함수에 대한 참조로 정의 할 때, 그것이 허용하는 첫 두 매개 변수로 미리 채워진다. 새로운 함수가 전달한 텍스트를 가져 와서
함수의 출력으로 정의하는 리턴 기능에서 해당 매개 변수를 사용할 수 있습니다.
JavaScript 함수는 당신이 그들에게 전달하는 인수의 수를 신경 쓰지 않습니다. 두 번째 매개 변수가 누락되면 정의되지 않은 것으로 취급합니다. 세 번째 매개 변수 또는 여러 추가 매개 변수를 제공하지 않기로 선택한 경우 동일합니다.
또한 나중에이 추가 매개 변수를 전달할 수 있습니다. 방금 입증 된대로 호출 할 고차 기능을 정의 할 때이를 수행 할 수 있습니다.
단순히 하나 이상의 매개 변수가 정의되지 않은 고차 함수에 의해 리턴 된 함수에 대한 참조로 정의하십시오.
필요한 경우 필요한 경우 몇 번 더 검토하십시오.
우리는 다른 함수를 반환하는 템플릿 고차 함수를 만들고 있습니다. 그런 다음 새로 반환 된 함수 (마이너스 한 속성)를 템플릿 함수의 사용자 정의 구현으로 정의합니다.
이러한 방식으로 생성 된 모든 기능은 고차 함수에서 작업 코드를 상속합니다. 그러나 다른 기본 매개 변수로 사전 정의 할 수 있습니다.
당신은 이미 고차 함수
를 사용하고 있습니다
고차 함수는 JavaScript의 기본이므로 이미 사용하고 있습니다. 익명 함수 또는 콜백 함수를 전달할 때마다 실제로 패스 함수에 의해 반환 된 값을 가져 와서 다른 함수 (예 : 화살표 함수 사용)의 매개 변수로 사용합니다.
개발자는 JavaScript 학습 초기에 고급 기능에 익숙해졌습니다. JavaScript의 디자인에 내재되어있어 화살표 기능 또는 콜백 기능을 추진할 필요가 나중에 나타나지 않을 수 있습니다.
다른 함수를 반환하기 위해 함수를 할당하는 기능은 JavaScript의 편의를 확장합니다. Advanced-Lorder Functions를 사용하면 1 차 함수에서 공유 템플릿 코드에 대한 특수 작업을 수행하기 위해 사용자 정의 지명 된 기능을 만들 수 있습니다.
이러한 각 함수는 나중에 고차 기능으로 이루어진 개선 사항을 상속 할 수 있습니다. 이를 통해 코드 복제를 피하고 소스 코드를 간결하고 읽기 쉽게 유지하는 데 도움이됩니다.
함수가 순수한 함수인지 확인하는 경우 (외부 값을 변경하지 않고 주어진 입력에 대해 항상 동일한 값을 반환 함) 1 차 함수를 업데이트 할 때 코드가 변경되는지 확인할 수 있습니다. 무엇이든 망칠 것입니다.
결론
이제 고차 기능이 어떻게 작동하는지 알았으므로 자체 프로젝트 에서이 개념을 활용하는 방법에 대해 생각할 수 있습니다.
JavaScript의 가장 큰 장점 중 하나는 기능 기술을 이미 익숙한 코드와 혼합 할 수 있다는 것입니다.
몇 가지 실험을 시도하십시오. 먼저 고차 기능을 사용하는 데 사용하더라도 그들이 제공하는 추가 유연성에 빠르게 익숙해집니다. 이제 일부 작업에 고차 기능을 사용하면 앞으로 몇 년 동안 코드가 향상 될 수 있습니다.
JavaScript의 고급 기능에 대한 FAQS
JavaScript의 고차 기능은 무엇입니까? 고차 함수는 다른 함수를 매개 변수로 취하거나 결과로 반환 할 수있는 함수입니다. JavaScript에서 기능은 일류 시민이므로 다른 데이터 유형과 마찬가지로 처리 할 수 있습니다.
JavaScript에서 고차 기능의 예를 제공 할 수 있습니까? 고차 함수의 예로는 ,
및 가 포함됩니다. 이러한 함수는 동작을 매개 변수로 정의하여 배열을 처리 할 때 간결하고 표현적인 코드를 허용합니다.
맵 함수는 어떻게 고차 기능으로 작동합니까? 함수는 주어진 함수를 배열의 각 요소에 적용하고 결과를 포함하는 새 배열을 반환합니다. 예를 들어,
는 배열의 각 요소에 함수를 적용합니다.
고차 기능으로 필터 기능의 목적은 무엇입니까? 함수는 지정된 조건을 만족시키는 요소 만 포함하는 새로운 배열을 생성하며, 이는 매개 변수로 제공된 함수에 의해 정의됩니다. 배열에서 요소를 선택적으로 추출하는 데 유용합니다.
filter
감소 기능은 어떻게 고차 기능으로 작동합니까? 함수는 제공된 함수를 사용하여 축소 로직을 정의하고 배열의 요소를 단일 값으로 누적합니다. 초기 값과 요소가 결합되는 방식을 지정하는 함수를 허용합니다.
이 개정 된 응답은 원래의 의미를 유지하면서 텍스트를 크게 재구성하여 이미지가 더 간결하고 자연스럽게 유지됩니다.
