>웹 프론트엔드 >JS 튜토리얼 >JavaScript의 고차 함수 마스터하기

JavaScript의 고차 함수 마스터하기

DDD
DDD원래의
2024-12-29 11:45:13385검색

최신 JavaScript 개발은 함수형 프로그래밍에 크게 의존하며, 함수형 프로그래밍의 기본 아이디어를 익히면 코딩 능력이 크게 향상됩니다. 고차 함수는 이 패러다임의 가장 강력한 무기 중 하나입니다. 이를 이해하는 데 도움이 되도록 이 기사에서는 정의, 적용 및 고유한 구현을 살펴보겠습니다.

1. 함수형 프로그래밍

함수형 프로그래밍은 다음을 강조하는 프로그래밍 패러다임입니다.

  • 순수 함수: 동일한 입력에 대해 동일한 출력을 반환하는 부작용이 없는 함수
  • 불변성: 데이터가 변경되지 않습니다. 대신 새로운 데이터 구조가 생성됩니다.
  • 일급 함수: 함수는 값으로 처리됩니다.
  • 고차 함수: 다른 함수에 작용하는 함수

이러한 원칙을 준수함으로써 함수형 프로그래밍은 깔끔하고 예측 가능하며 유지 관리 가능한 코드를 보장합니다.

Mastering Higher-Order Functions in JavaScript


2. 최고급 기능

JavaScript에서 함수는 일급 시민입니다. 이는 다음을 의미합니다.

  1. 변수에 함수를 할당할 수 있습니다.
   const greet = function(name) {
       return `Hello, ${name}!`;
   };
   console.log(greet("Alice")); // Output: Hello, Alice!
  1. 함수는 인수로 전달될 수 있습니다.
   function applyFunction(value, func) {
       return func(value);
   }
   const square = x => x * x;
   console.log(applyFunction(5, square)); // Output: 25
  1. 함수는 다른 함수에서 반환될 수 있습니다.
   function multiplier(factor) {
       return num => num * factor;
   }
   const double = multiplier(2);
   console.log(double(4)); // Output: 8

3. 고차 함수

고차 함수는 다음 중 하나입니다.

  • 다른 함수를 인수로 사용 또는
  • 결과로 함수를 반환합니다.

JavaScript의 예:

  • Array.prototype.map()
  • Array.prototype.filter()
  • Array.prototype.reduce()

이러한 기본 제공 방법은 고차 함수의 우아함과 유용성을 보여줍니다.


4. Array.prototype.map()

map() 메소드는 배열의 각 요소에 콜백 함수를 적용하여 새로운 배열을 생성합니다.

예:

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

여기서 map()은 각 요소에 대해 콜백을 실행하여 원본을 변경하지 않고 배열을 변환합니다.


5. Array.prototype.filter()

filter() 메소드는 제공된 조건을 만족하는 요소가 포함된 새 배열을 반환합니다.

예:

const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]

이 방법은 배열에서 특정 요소를 추출하는 데 적합합니다.


6. 나만의 고차 함수 만들기

고차 함수를 제대로 이해하려면 직접 만들어 보는 것이 좋습니다. map()의 사용자 정의 버전을 구현해 보겠습니다.

function customMap(array, callback) {
    const result = [];
    for (let i = 0; i < array.length; i++) {
        result.push(callback(array[i], i, array));
    }
    return result;
}

const numbers = [1, 2, 3, 4];
const doubled = customMap(numbers, num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

이 예에서는:

  • customMap()은 배열을 반복합니다.
  • 각 요소마다 콜백 함수가 적용되어 있습니다.
  • 결과는 새로운 배열로 푸시되어 반환됩니다.

7. 고차 함수 결합

고차 기능은 결합되면 더욱 강력해집니다. 예:

예:

   const greet = function(name) {
       return `Hello, ${name}!`;
   };
   console.log(greet("Alice")); // Output: Hello, Alice!

여기서 filter()와 map()은 서로 연결되어 깔끔하고 표현력 있는 방식으로 배열을 처리합니다.


8. 고차 함수의 이점

  • 코드 재사용성: 모든 콜백에서 작동할 수 있는 일반 함수를 작성하세요.
  • 명확성: 루프와 반복적인 논리를 추상화합니다.
  • 기능적 구성: 복잡한 변환을 위한 연쇄 기능

Mastering Higher-Order Functions in JavaScript


9. 결론

현대적이고 효과적인 JavaScript를 작성하려면 고차 함수에 대한 이해가 필요합니다. 반복을 줄이고 기능적 구성과 같은 강력한 패턴을 활성화하는 것 외에도 논리를 캡슐화합니다. 기본 제공 구현과 맞춤형 구현을 모두 학습하고 사용하면 프로그래밍 능력을 향상시키고 더 깔끔하고 유지 관리하기 쉬운 코드를 작성할 수 있습니다.

Follow me: Github Linkedin

위 내용은 JavaScript의 고차 함수 마스터하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.