Computer >> 컴퓨터 >  >> 프로그램 작성 >> JavaScript

JavaScript의 고차 함수:가이드

개발자로서 일반 JavaScript 기능을 사용했을 가능성이 큽니다. 1차 함수라고 하는 이 함수는 함수를 매개변수로 받거나 함수를 반환하지 않습니다. 

function hello(name) {
   return "Hello," + " " +  name
}
 
console.log(hello("Career Karma")); // Hello, Career Karma

이 문서에서는 고차 함수(HOF)에 대해 설명합니다. 개발자가 함수를 인수로 전달하거나 함수를 반환하여 코드를 더 읽기 쉽게 만드는 데 도움이 되는 함수입니다. HOF 및 함수형 프로그래밍을 소개하기 위해 몇 가지 기본 예제를 살펴보고 작동하도록 고차 함수 구조를 사용하는 두 가지 인기 있는 고급 배열 방법에 대해 이야기하겠습니다.

기본 고차 함수 예제

JavaScript에서 고차 함수를 사용하는 방법에는 여러 가지가 있습니다.

계산기

콜백 함수를 인수로 사용하고 일부 인수와 함께 해당 콜백을 반환하는 기본 HOF부터 시작하겠습니다. 

//higher order function
function higherOrderFunction(num1, num2, cb) {
   return cb(num1, num2); //this invokes our cb function and passes in our arguments to the callback. 
}
 
//callbacks
function add(num1, num2) {
   return num1 + num2;
}
function multiply(num1, num2) {
   return num1 * num2;
}
function divide(num1, num2) {
   return num1/num2;
}
function subtract(num1, num2) {
   return num1 - num2;
}
function modulo(num1, num2) {
   return num1 % num2;
}
 
console.log(higherOrderFunction(43, 13, add));

여기에는 두 가지 유형의 함수가 있습니다. 콜백을 반환하는 고차 함수와 두 숫자에 대한 연산을 수행하는 1차 설정 함수입니다. 스니펫 끝에서 higherOrderFunction()에 대한 함수 호출을 수행합니다. . 이 함수는 주어진 매개변수와 함께 전달된 cb 호출의 결과를 리턴합니다. 가능한 모든 산술 연산자에 대한 콜백 함수를 작성했다면 highOrderFunction을 사용하여 필요한 연산을 호출할 수 있습니다.

이벤트 리스너

고차 함수의 또 다른 예는 이벤트 리스너를 DOM(문서 객체 모델)의 요소에 추가할 때 발생하는 것입니다. 다음 예를 들어보세요. 

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <title></title>
       <meta name="description" content="">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" href="">
   </head>
   <body>
       <!--[if lt IE 7]>
           <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
       <![endif]-->
       <button>Click Me!</button>
       <script async defer>
           const button = document.querySelector("button");
           button.addEventListener("click", (e) => {
               alert("The button has been clicked!");
           })
 
       </script>
   </body>
</html>

이 예제에서는 HTML로 버튼을 만들고 JavaScript를 사용하여 선택하고 이벤트 리스너를 추가했습니다. 이벤트 리스너의 구조는 단순한 고차 함수의 구조입니다. 두 번째 인수로 익명의 함수를 받습니다.

JavaScript의 고차 함수:가이드

강조 표시된 섹션은 고차 함수입니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

고급 배열 방법

JavaScript 내장 배열 메서드는 ES6에 새로 추가된 특별한 고차 함수로 배열을 반복하고 이를 조작하거나 값이 조작된 완전히 새로운 배열을 반환하는 데 사용할 수 있습니다.

JavaScript에서 보다 복잡한 문제를 해결하기 시작하면서 배열을 반복할 때 작성하는 일부 논리를 추상화하는 것에 대해 생각하기 시작합니다. 이러한 고차 함수 배열 방법을 사용하면 더 나은 JS 개발자가 되는 데 도움이 됩니다.

예를 들어 다음과 같은 교수가 있다고 가정해 보겠습니다.

JavaScript의 고차 함수:가이드

forEach

ES6을 사용하기 전에 배열을 반복하고 각 항목을 조작하려면 다음과 같이 해야 합니다. 

function forEachES5(arr){
   for(let i = 0; i < arr.length; i++) {
       arr[i] = "Professor " + arr[i];
   }
   return arr;
}
 
console.log(forEachES5(professors));

ES6 구문을 사용하면 forEach 메서드를 사용하여 코드를 줄일 수 있습니다.

function forEachES6(arr) {
   arr.forEach((professor, index, origArr) => {
       origArr[index] = "Professor " + professor;
   });
   return arr;
 
}

이 forEach 메서드는 고차 함수로 만들기 위해 첫 번째 매개변수로 콜백 함수를 사용합니다. 이 콜백 함수는 기본적으로 배열에 있는 각 항목에 대해 수행되는 "작업"입니다. 또한 forEach 메소드는 인덱스와 배열을 선택적인 두 번째 및 세 번째 매개변수로 사용합니다.

forEach 메서드(및 기타 내장 배열 메서드)에서 이러한 매개변수의 순서는 중요합니다. 첫 번째는 항상 콜백 함수이고, 두 번째는 항상 배열 항목의 인덱스이며, 세 번째는 항상 배열 자체의 복사본입니다.

forEach 메서드는 JavaScript에서 for 루프를 표시하는 또 다른 방법입니다. 아무것도 반환하지 않습니다. 이 메서드는 이미 있는 것을 조작하고 원하는 작업을 지정하면 작업 중인 배열에 저장합니다.

지도

forEach 메소드에 가장 가까운 메소드는 map 메소드입니다. 이 메서드가 새 배열을 반환한다는 점을 제외하고는 거의 동일한 방식으로 작동합니다. 콜백 함수에서 조작하는 모든 것은 원래 배열에 영향을 미치지 않습니다.

ES6 이전에 어떤 지도가 사용되었는지 살펴보겠습니다.

function mapES5(arr){
   let newArr = [];
   for(let i = 0; i < arr.length; i++) {
       newArr.push("Professor " + arr[i]);
   }
   return newArr;
}

보시다시피, 우리가 해야 할 일은 for 루프 외부에 새 배열을 인스턴스화하여 새 값을 푸시할 수 있도록 하는 것이었습니다. 그런 다음 실제로 다른 곳에서 사용할 수 있도록 새 배열을 반환해야 합니다!

ES6과 map 메소드를 사용하면 해당 로직의 일부를 추상화하여 더 읽기 쉽게 만들 수 있습니다.

function mapWithES6(arr) {
   const mapped = arr.map(professor => {
       return "Professor " + professor;
   })
   return mapped;
}

map 메서드와 이와 같은 다른 배열 메서드, 특히 reduce 및 filter 기능에 대한 특별한 기능은 변수에 할당하고 반환하거나 전체 함수를 반환할 수 있다는 것입니다! 새 어레이에 푸시할 필요가 없습니다. 이 맵 방법으로 완료됩니다. 지도 메서드 콜백 함수 내부의 논리에 반환 값이 있어야 함을 기억하십시오!

결론:

고차 함수는 더 나은 개발자가 되는 데 도움이 되는 JavaScript에서 매우 중요한 개념입니다. 일부 논리를 추상화하여 코드를 더 읽기 쉽게 만들고 경우에 따라 성능을 높이는 데 도움이 됩니다.

이 자습서에서는 기본 계산기 메서드에서 이벤트 수신기 및 고급 배열 함수에 이르기까지 고차 함수를 작성할 수 있는 몇 가지 다른 방법을 살펴보았습니다. 이것을 마스터하면 문제에 대한 좀 더 복잡한 솔루션을 다룰 준비가 된 것입니다!