목차
머리말
이 기사에서는 매우 중요한 JavaScript 함수 개념인 고차 함수(Higher-order function)를 소개합니다.
고차 함수는 하나 이상의 함수를 매개변수로 사용하거나 결과로 함수를 반환하는 함수입니다.
이 글에서는 고차 함수가 무엇인지, 고차 함수를 사용하면 어떤 이점이 있는지, 실제 애플리케이션에서 고차 함수를 사용하는 방법을 자세히 살펴보겠습니다.
- 기능 지향이란 무엇입니까?
- 순수 기능
- 고차 함수
- 카레링
기능 지향이란 무엇입니까?
소위 함수 방향(Function Orientation)은 간단히 말해서 함수 자체가 변수입니다. 예를 들어, 함수 자체는 const, let, var를 사용하여 선언할 수 있고 인수(Argument)로 변환하여 다른 함수에 전달하거나 배열이나 객체에 추가할 수 있습니다.
함수를 인수로 변환하여 다른 함수에 전달
const print = (message) => { console.log(`${message}를 사용한 함수 인쇄`) } const helloMessage = () => { return "Hello Message" } print(helloMessage()) // 함수 인쇄 안녕하세요 메시지
배열 결합
const array = ["item0", (message) => console.log("나는 배열의 항목 함수입니다. " + message)] console.log(array[0]) // item0 array[1]("argument "); // 배열 인수의 항목 함수입니다.
개체 추가
const object = { helloWorld: "Hello World", print: (message) => { console.log(`${message}를 사용한 함수 인쇄`) } } object.print(object.helloWorld); // Hello를 사용한 함수 인쇄 세계
순수 기능
함수가 인수(Argument)에 의해서만 영향을 받는 경우 이를 순수 함수(Pure function)라고 부릅니다. 이러한 순수 함수는 다른 것의 간섭을 받지 않기 때문에 캡슐화되어 다른 변수나 인수의 간섭을 받지 않습니다. 즉 부작용(Side Effect)이 발생합니다.
소위 부작용은 기능 실행 중에 발생하는 외부 변경을 의미합니다.
- Date.now() 또는 Math.random()을 사용하세요.
- console.log() 사용
- 외부 데이터 수정
- DOM 조작
- HTTP 요청 시작
다음 예를 살펴보겠습니다. 이 예는 순수하지 않은 함수이므로 외부 데이터가 수정되면 함수가 영향을 받습니다.
y = 1; 함수 xAdd(x) { x + y } //6;
xAdd(5)를 실행하더라도 y의 변화로 인해 실행 결과가 달라지는 것을 알 수 있다.
따라서 함수는 캡슐화되어 외부 요인의 영향을 받지 않는 순수 함수로 바뀌어야 합니다. 순수 함수의 장점은 독립성뿐만 아니라 테스트 작성도 더 쉽다는 것입니다.
함수 합계(x, y) { 반환 x + y }; //3
고차 함수
고차 함수는 "함수를 받아들이거나 반환하는" 함수를 말합니다.
소위 수용이란 함수를 인수(Argument)로 입력하는 것을 말합니다.
콜백 함수는 함수를 변수 값으로 반환합니다. Map 및 Reduce와 같은 여러 가지 유형의 고차 함수가 있습니다.
위의 기능 중심 소개는 하나의 예이므로 다시 살펴보겠습니다.
// 고차 함수의 매개변수로 전달되는 콜백 함수 function callbackFunction(){ console.log('나는 콜백 함수입니다') } // 고차 함수 function lowerOrderFunction(func){ console.log('I am 고차 함수') func() } highOrderFunction(callbackFunction);
위 코드에서 lowerOrderFunction()은 콜백 함수를 매개변수로 전달하므로 HOF입니다.
위의 예는 매우 간단합니다. 더 확장하여 HOF를 사용하여 더 간단하고 모듈화된 코드를 작성하는 방법을 살펴보겠습니다.
고차 함수의 작동 방식
원의 면적과 지름을 계산하는 함수를 작성한다고 가정해 보겠습니다. 프로그래밍을 처음 접하는 사람들이 가장 먼저 생각하는 해결책은 면적이나 지름을 따로 계산하는 함수를 작성하는 것입니다.
const radius = [1, 2, 3]; // 원의 면적을 계산하는 함수 const 계산Area = function (radius) { const 출력 = [] for(let i = 0; i< radius.length; i++ ){ output.push(Math.PI * radius[i] * radius[i]); } return output; } // 원의 직경을 계산하는 함수 const 계산Diameter = function (radius) { const 출력 = []; (i = 0; i< radius.length; i++){ output.push(2 * radius[i]) } return 출력 } console.log(calculateArea(radius)); )
그런데 위 코드에서 문제점을 발견하셨나요?
거의 동일한 함수를 다시 작성하지만 약간 다른 논리를 사용합니다. 또한 우리가 작성한 함수는 재사용할 수 없으므로 고차 함수를 사용하여 동일한 코드를 작성하는 방법을 살펴보겠습니다.
const radius = [1, 2, 3]; // 면적을 계산하는 논리 constarea = function(radius){ return Math.PI * radius * radius } // 직경을 계산하는 논리 const Diameter = function(radius){ return; 2 * radius; } // 면적, 직경 등을 계산하는 재사용 가능한 함수 const 계산 = function(반경, 논리){ const 출력 = [] for(let i = 0; i < radius.length; i++){ 출력 .push(logic(radius[i])) } return 출력; } console.log(calculate(radius,area)) console.log(calculate(radius,diameter));
위 코드에서 볼 수 있듯이 원의 면적과 지름을 계산하는 함수calculate()만 작성했습니다. 로직을 작성하고 이를 Calculate()에 전달하면 함수가 작업을 수행합니다.
고급 함수를 사용하여 작성하는 코드는 간결하고 모듈식입니다. 각 함수는 자체 작업을 수행하므로 여기서는 아무 것도 반복하지 않습니다.
미래에 원의 둘레를 계산하는 프로그램을 작성한다고 가정해 보겠습니다. pi를 계산하는 로직을 작성하고 이를calcul() 함수에 전달하기만 하면 됩니다.
const 둘레 = function(radius){ return 2 * Math.PI * radius } console.log(calculate(radius, 둘레));
여기에는 다른 화살표 기능의 반례와 응용도 제공됩니다.
const print = (message) => { console.log(`${message}를 사용한 함수 인쇄`) } const helloMessage = () => { return "Hello Message" } print(helloMessage()) // 함수 인쇄 안녕하세요 메시지
그러나 고차 함수를 사용하면 보다 편리하고 복잡한 상황을 처리할 수 있습니다.
const printNameByCondition = (condition, trueFunc, falseFunc) => { 조건 ? trueFunc() : falseFunc() } const printHogan = () => console.log("Hello Hogan") const printBobo = () => console. log("안녕하세요 BoBo"); printNameByCondition(true, printHogan, printBobo); // 안녕 호건 printNameByCondition(false, printHogan, printBobo);
여기에서 볼 수 있듯이 세 개의 인수(Arguments)가 있는 함수를 만들었습니다. 그 중 마지막 두 개는 함수입니다.
첫 번째 인용문을 통해 판단하면 첫 번째 기능을 실행하고, 그렇지 않으면 두 번째 기능을 실행합니다.
고차 함수를 사용하는 방법
우리는 배열을 처리할 때 다양한 방법을 사용하여 배열의 데이터를 처리하고 변환할 수 있습니다.
고차 함수는 객체를 처리합니다.
Object.entries() 함수를 사용하여 객체에서 새 객체를 만들 수 있습니다.
고차 함수는 함수를 사용합니다.
compose() 함수를 사용하면 간단한 함수에서 복잡한 함수를 만들 수 있습니다.
중요한 고차 함수를 사용하는 방법
JavaScript에는 많은 고차 함수가 내장되어 있으며 가장 일반적인 것은 map(), filter() 및 Reduce()입니다. 아래에서 자세히 살펴보겠습니다.
JavaScript에서 map()을 사용하는 방법
map() 함수는 배열을 수신하고 원래 배열을 변경하지 않고 배열의 각 값을 변환합니다. 일반적으로 숫자 배열을 구조가 다른 새 배열로 변환하는 데 사용됩니다.
예 1: 배열의 각 요소에 추가하고 싶다고 가정합니다. 10. 우리는 사용할 수 있습니다 지도() 이 메서드는 배열의 각 요소를 반영하여 배열에 추가합니다. 10.
const arr = [1, 2, 3, 4, 5]; const 출력 = arr.map((num) => num += 10) console.log(arr); 5] console.log(출력); // [11, 12, 13, 14, 15]
위의 예에서 arr은 5개 요소의 배열입니다.
map 메소드를 사용하여 배열의 각 요소에 함수를 적용하고 수정된 요소가 포함된 새 배열을 반환합니다.
map에 전달된 콜백 함수는 화살표 함수를 사용하고 매개변수 num을 받습니다.
이 함수는 num(배열의 각 요소)에 10을 더하고 결과를 반환합니다.
예 2: 여기에는 일련의 사용자가 있습니다. 사용자 이름만 원한다고 가정해 보겠습니다.우리는 사용자 배열에서 추출하기 위해 map() 메소드를 사용합니다.
const users = [ {firstName: 'John', lastName: 'Doe', age: 25}, {firstName: 'Jane', lastName: 'Doe', age: 30}, {firstName: 'Jack', lastName: ' Doe', age: 35}, {firstName: 'Jill', lastName: 'Doe', age: 40}, {firstName: 'Joe', lastName: 'Doe', age: 45}, ] const result = 사용자. map((user) => user.firstName + ' ' + user.lastName) console.log(result) // ['John Doe', 'Jane Doe', 'Jack Doe', 'Jill Doe', 'Joe 암사슴']
위 코드에서 users는 사용자를 나타내는 객체의 배열입니다. 각 객체에는 성, 이름, 나이라는 세 가지 속성이 있습니다.
map() 메소드를 사용하여 각 사용자를 매핑하여 firstName 및 lastName 속성을 가져옵니다.
콜백 함수는 사용자 배열의 요소(객체)를 나타내는 user 매개변수를 받습니다.
이 함수는 사용자의 이름과 lastName 속성을 연결하고 결과를 반환합니다.
JavaScript에서 필터()를 사용하는 방법
filter() 함수는 배열을 가져와 특정 기준을 충족하는 값만 포함하는 새 배열을 반환합니다.
또한 원래 배열을 변경하지 않으며 특정 기준에 따라 배열에서 데이터 세트를 선택하는 데 자주 사용됩니다.
예 1: 숫자 배열에서 숫자를 반환하려면 filter() 함수를 사용합니다.
const arr = [1, 2, 3, 4, 5]; const 출력 = arr.filter((num) => num % 2) // 홀수 필터링 console.log(arr); , 3, 4, 5] console.log(출력) // [1, 3, 5]
위 코드에서 arr은 5개의 요소를 포함하는 배열입니다.
필터는 제공된 콜백 함수에 지정된 테스트를 요소가 통과해야 하는 새 배열을 생성하는 메서드입니다.
이 콜백 함수는 num이 2로 나누어지는지 확인하여(num % 2) num이 홀수인지 확인합니다. num을 2로 나눌 수 없으면 함수는 true를 반환하고, 그렇지 않으면 false를 반환합니다.
arr에 필터를 사용하면 함수가 배열의 각 요소에 적용되어 true를 반환하거나 지정된 조건을 통과하는 요소만 포함하는 새 배열이 생성됩니다. 원래 시퀀스는 변경되지 않고 그대로 유지되며 결과가 반환됩니다.
예제 2: filter()를 사용하여 배열에서 30세 이상의 사용자만 반환할 수 있습니다.
const users = [ {firstName: 'John', lastName: 'Doe', age: 25}, {firstName: 'Jane', lastName: 'Doe', age: 30}, {firstName: 'Jack', lastName: ' Doe', age: 35}, {firstName: 'Jill', lastName: 'Doe', age: 40}, {firstName: 'Joe', lastName: 'Doe', age: 45}, ] // 사용자 찾기 나이가 30세보다 큼 const 출력 = users.filter(({age}) => age > 30) console.log(output) // [{firstName: 'Jack', lastName: 'Doe', age: 35} , {firstName: 'Jill', lastName: 'Doe', age: 40}, {firstName: 'Joe', lastName: 'Doe', age: 45}]
위 코드에서 users는 사용자를 나타내는 배열입니다. 각 개체에는 이름, 성, 나이라는 세 가지 속성이 있습니다.
사용자 배열에 필터를 사용하고 배열의 각 요소에 대해 콜백 함수를 사용합니다.
함수는 하나의 인수, 즉 단일 속성 age로 재구성되는 객체를 받습니다.
이 함수는 나이가 30세 이상인지 확인합니다. 그렇다면 함수는 true를 반환하고, 그렇지 않으면반품 거짓.
사용자에 대해 필터를 사용하면 배열의 각 요소에 이 함수가 적용되어 함수에 전달된 값만 포함하는 새 배열이 생성됩니다.반품 실제 요소 및반품결과. 원래 사용자 배열은 변경되지 않고 그대로 유지됩니다.
JavaScript에서 Reduce()를 사용하는 방법
많은 사람들이 생각하는 Reduce()는 상대적으로 복잡한 함수입니다. 이전에 Reduce() 메서드를 접했지만 처음에는 이해할 수 없다면 계속해서 읽어보세요!
질문이 생길 수 있습니다: 왜 Reduce()를 사용하는가? 이미 유용한 기능이 많이 있으므로 어떤 기능을 언제 사용할지 어떻게 결정합니까?
Reduce()에 관한 한, 배열 요소에 대해 일부 작업을 수행하고 단일 값을 반환하려는 경우 이를 사용해야 합니다.
단일 값: 배열 요소에 함수를 반복적으로 적용한 누적 결과를 나타냅니다.
예를 들어, Reduce()를 사용하면 시퀀스에 있는 모든 요소의 합계를 찾고, 최대값 또는 최소값을 찾고, 여러 개체를 단일 개체로 결합하거나, 시퀀스의 여러 요소를 분할할 수 있습니다. 예를 통해 이것을 이해해 봅시다.
예 1: Reduce()를 사용하여 배열에 있는 모든 요소의 합계를 찾습니다.
const 숫자 = [1, 2, 3, 4, 5]; const sum = 숫자.reduce((total, currentValue) => { return total + currentValue; }, 0) console.log(sum);
이 예제에서는 감소() 메서드가 배열에 사용되며 total 및 currentValue라는 두 매개변수를 사용하는 콜백 함수를 통해 전달됩니다.
total 매개변수는 함수 사용 시 반환된 값의 누적이고 currentValue는 배열에서 현재 처리 중인 요소입니다.
Reduce()의 두 번째 매개변수 역시 초기값으로 위의 예에서는 0으로 첫 번째 반복에서는 total의 초기값으로 사용된다.
각 반복에서 함수는 현재 값을 합계에 더하고반품합계의 새 값입니다.
그런 다음, Reduce() 메서드는 반환된 값을 배열의 모든 요소가 처리될 때까지 다음 반복의 총 개수로 사용합니다.
마지막으로 배열의 모든 요소의 합계인 합계의 최종 값을 반환합니다.
예 2: 감소()를 사용하여 시퀀스의 최대값을 찾습니다.
숫자 = [5, 20, 100, 60, 1]; const maxValue = number.reduce((max, curr) => { if(curr > max) max = curr; return max; }); 최대값); // 100
이 예에서는 콜백 함수에서 max와 curr라는 두 매개변수를 다시 사용하고 있으며, 이번에는 Reduce() 메서드에서 두 번째 매개변수를 전달하지 않습니다. 따라서 기본값은 배열의 첫 번째 요소가 됩니다.
콜백 함수는 먼저 현재 요소 curr가 현재 최대값 max보다 큰지 확인합니다. 그렇다면 max 값을 업데이트하여 현재 요소로 만듭니다. 그렇지 않으면 max가 업데이트되지 않습니다. 마지막으로 함수는 최대값을 반환합니다.
이 예에서 Reduce() 메서드는 먼저 max를 5로 설정하고 curr를 20으로 설정합니다. 그런 다음 20이 5보다 큰지 확인하여 5보다 크므로 최대 값을 20으로 업데이트합니다.
그런 다음 curr를 100으로 설정하고 100이 20보다 큰지 확인합니다. 결과는 20보다 크므로 max는 100으로 업데이트됩니다.
이 프로세스는 배열의 모든 요소가 처리될 때까지 계속됩니다. max의 최종 값은 시퀀스에서 가장 큰 값이 되며 이 예에서는 100입니다.
고차 함수의 장점
고차 함수를 사용하면 개발자에게 몇 가지 중요한 이점이 있습니다.
첫째, 고차 함수는 코드를 더욱 간결하고 이해하기 쉽게 만들고, 코드의 가독성을 향상시키며, 개발 프로세스 속도를 높이고, 코드를 사용하기 쉽게 만듭니다.
둘째, 고차 함수는 프로그램 코드를 그룹화하여 유지 관리 및 확장을 더 쉽게 만드는 데 도움이 될 수 있습니다.
카레링
고차 함수 중에서 Currying은 특별하고 중요한 기술입니다.
고차 함수의 다양한 수준에 있는 인수는 별도로 전달될 수 있으며 이 개념을 사용하여 고차 함수에 접두사를 추가할 수도 있습니다.
const userLogs = userName => message => console.log(`${userName} -> ${message}`) const log1 = userLogs("Hogan") log1("Hello World"); ; const log2 = userLogs("보보"); log2("안녕하세요");
여기서는 또한 고차 함수에 대해 두 개의 서로 다른 접두사를 제공하는 구현 예를 사용합니다.
결론
이 기사에서는 함수 방향의 개념, 고차 함수가 무엇인지, 고차 함수를 사용하면 어떤 이점이 있는지, 실제 응용 프로그램에서 고차 함수를 사용하는 방법에 대해 설명합니다. 또한 Curring이 무엇인지 소개하기 위해 상대적으로 작은 공간을 사용합니다. 이러한 함수는 순수 함수에도 도입되었습니다.
고차 함수를 사용함으로써 개발자는 프로그램을 더 스마트하게 작성하고 코드를 모듈화하여 더 명확하고 사용하기 쉽게 만들 수 있습니다.
제안사항이나 질문이 있으시면 메시지를 남겨주세요!
이 글이 마음에 드셨다면 더 많은 분들이 보실 수 있도록 좋아요와 공유 부탁드립니다~
인용하다
React Vernacular Movement 05 - 고차 함수(Higher-order function)
다른 기사 참조
JavaScript Async Await – React Vernacular Movement 03
JavaScript ES6 객체 – React Vernacular Movement 02
한국어 
繁體中文 
English 
简体中文 
日本語 
Español