고차 함수 - 무엇을, 왜, 어디서

고차 함수란?

간단히 말해서 다른 함수를 인수로 받아들이거나 함수를 결과로 반환하는 모든 함수입니다.

고차 함수를 사용하는 이유

고차 함수는 Javascript 언어에서 광범위하게 사용됩니다.

도움이 되는 두 가지 주요 영역은 코드 크기 감소와 코드 재사용성입니다. 즉, 코드를 보다 선언적으로 만듭니다. 하나의 함수를 다른 함수에 넣을 수 있다는 사실은 더 작은 함수를 더 큰 함수로 합성할 수 있게 해줍니다.

아마도 당신은 깨닫지 못한 채 코드에서 이미 고차 함수를 사용했을 것입니다. Array , sort & map 와 같은 filter 메서드를 코드에서 한 번 이상 사용하지 않았습니까? 이들은 고차 함수입니다.

이론은 이제 충분합니다. 다음 섹션에서 몇 가지 실용적인 예를 살펴보겠습니다.

고차 함수를 사용하는 경우

실행될 때마다 woof를 반환하는 함수를 만들어 보겠습니다.

function dog() {
 console.log('woof');
}

이제 dog라는 함수가 있습니다. 따라서 dog를 호출할 때마다 콘솔에 woof가 표시됩니다.

우리는 항상 한 함수를 다른 함수에 인수로 전달할 수 있으며 특정 작업을 완료하기 위해 호출할 수 있습니다. 이 예를 보자:

function dog(callback) {
 console.log('woof');
 callback();
}

이제 이 함수dog를 실행할 때마다 먼저 콘솔에 출력woof한 다음 인수로 전달되는 함수의 논리를 호출합니다.

이 경우 dog 함수는 인수로 함수를 전달하지 않으면 오류를 반환합니다.

Uncaught TypeError: callback is not a function
    at dog (<anonymous>:3:2)
    at <anonymous>:1:1

코드를 수정하여 이 문제를 쉽게 해결할 수 있습니다.

function dog(callback) {
 console.log('woof');
 if (callback) {
   return callback();
 }
}

이제 위의 함수를 다른 함수를 인수로 허용하여 1차 함수에서 고차 함수로 변환했습니다.

이를 더 확인하기 위해 다른 기능을 추가합니다.

function cat() {
 console.log('meow');
}

위의 함수는 함수dog와 동일하지만 반환값이 다릅니다. 이제 위의 함수를 dog 함수에 인수로 전달하고 dog 함수는 이것을 콜백 함수로 실행합니다.

dog(cat);
// console will return woof
// console will return meow

위의 예는 함수를 다른 함수의 인수로 전달한 논리를 충족합니다. 이제 다른 함수에서 함수를 반환하는 방법을 살펴보겠습니다.

이제 인수로 전달된 두 숫자를 곱하는 함수를 만들어 보겠습니다.

  function multiply(x, factor) {
     return num1 * factor;
  }

이제 우리는 숫자를 취하고 다른 인수로 곱하는 다른 함수를 만들고 싶습니다. 이 예를 보자:

  function multiply(factor) {
     return function(x){
       return x * factor;
     }
  }

따라서multiply 함수는 이제 전달된 요소를 사용하는 새 함수를 반환합니다.

이제 다음과 같이 할 수 있습니다.

 let double = multiply(2);
 let triple = multiply(3);

이제 어떤 숫자에 2 또는 3을 곱하는 데 사용할 수 있는 두 가지 다른 함수가 있습니다. 방법을 살펴보겠습니다.

 double(3); // will return 6
 triple(3); // will return 9

따라서 고차 함수를 만들고 사용하는 방법을 배웠습니다. 이제 Javascript에서 다른Array 메서드를 사용하는 고차 함수의 몇 가지 예를 살펴보겠습니다.

Higher Order Function으로 array 메서드map의 예:

const myArray = [1, 2, 3, 4, 5]
const doubleIt = num => num * 2;

myArray.map(value => doubleIt(value)) // returns [2, 4, 6, 8, 10]

위의 예에서 함수map가 myArray를 반복하고 각 반복에서 값이 doubleIt인 다른 함수myArray를 반환하는 것을 볼 수 있습니다.

Higher Order Function으로 array 메서드filter의 예:

 let pets = [
  {
    name: 'Max', kind: 'dog',
  },
  {
    name: 'Shiro', kind: 'dog',
  },
  {
    name: 'romeo', kind: 'cat',
  },
  {
    name: 'niki', kind: 'cat',
  },
]

let cats = pets.filter(function(pet){ return pet.kind === 'cat'}) 

console.log(cats) // returns [{name: 'romeo', kind: 'cat'}, {name: 'niki', kind: 'cat'}]

let dogs = pets.filter(function(pet){ return pet.kind === 'dog'})

console.log(dogs) // returns [{name: 'Max', kind: 'dog'}, {name: 'Shiro', kind: 'dog'}]

위의 예에서 filter는 익명 함수에서 반환된 데이터가 포함된 새 배열을 반환합니다.
Array , map , filter 와 같은 reduce 메서드를 사용하면 코드 가독성과 품질이 향상됩니다.

이제부터는 함수가 인수로 전달되거나 함수가 함수에서 반환되는 패턴을 발견할 때마다 고차 함수를 다루고 있음을 알 수 있습니다.

읽어주셔서 감사하고 이 게시물에서 무언가를 배웠기를 바랍니다.

당신은 나를 팔로우하고 나에게 어떤 제안이든 자유롭게 드롭하거나 그냥 안녕이라고 말할 수 있습니다!