[Js] 고차함수에 대해서

🟩 고차 함수(Higher-Order Function)

고차 함수는 함수를 인자로 받거나 또는 함수를 반환함으로써 작동 하는 함수를 말합니다. 간단히 말하자면, 고차 함수는 함수를 인자로 받거나 함수를 출력(output)으로 반환하는(return) 함수를 말합니다.

 

일단 함수형 프로그래밍에 대해서도 알아봅니다.

🟩 함수형 프로그래밍이란 무엇일까요?

함수형 프로그래밍은 함수를 다른 함수의 파라미터로 넘길 수도 있고 반환(return) 값으로 함수를 받을 수도 있는 프로그래밍 형태를 말합니다. 

js를 다루게 되면 다른 함수에 콜백으로 들어가는 거나, return 받을 때 변수에 그대로 넣을 수 있는거를 자연스럽게 지나갔던거 같습니다. 이게 가능할 수 있게되는 이유가 고차 함수라는 계념인 것을 최근에 알았습니다.

 

예시 #1

우리가 숫자가 들어있는 배열을 가지고 있고 각각의 숫자 값이 2배가 된 배열을 만들길 원한다고 해봅시다.

고차 함수(Higher-Order function)가 없을 때와 있을 때, 각각 우리가 문제를 어떻게 해결할 수 있는지 봅시다.

🟩 고차 함수가 아닌 함수로 작성

const arr1 = [1, 2, 3];
const arr2 = [];

for(let i=0; i<arr1.length; i++) {
  arr2.push(arr1[i] * 2);
}

// prints [2, 4, 6]
console.log(arr2);

🟩 고차 함수로 작성

const arr1 = [1, 2, 3];

const arr2 = arr1.map(function(item) {
  return item * 2;
});

console.log(arr2);

 

자연스럽게 2번째 예시가 가능하지 않을까 생각했습니다. java를 했던 때를 떠올려보면 분명 1번 예시처럼 했을것입니다. map이라는 함수가 새로운 배열을 return 하는 고차함수이기 때문에 가능한 일이였습니다.

map에 대해서

map() 메소드는 입력으로 들어온 배열 내 모든 엘리먼트를 인자로 제공받는 콜백 함수를 호출함으로써 새로운 배열을 만들어냅니다. map() 메소드는 콜백 함수에서 모든 반환된 값을 가져올 것입니다. 그리고 그 값들을 이용한 새로운 배열 하나를 만들어냅니다.

 

 

아직 감이 잘 안올 수 있습니다. 직접 고차함수를 만들어보면 이해가 될 수 있습니다.

고차함수 만들기

map을 고차함수형태로 만들어보겠습니다.

const strArray = ['Javascript', 'Python', 'PHP', 'Java', 'C'];

function mapForEach(arr, fn) {
  const newArray = [];
  for(let i=0; i<arr.length; i++){
    newArray.push(
      fn(arr[i])
    );
  }
  return newArray;
}

const lenArray = mapForEach(strArray, function(item) {
  return item.length;
});

// prints [10, 6, 3, 4, 1]
console.log(lenArray);

위의 예제에서, 우리는 배열과 콜백함수 fn을 받는 고차 함수 mapForEach를 만들었습니다. 이 함수는 제공받은 배열을 반복하고 newArray.push 함수 내부에서 각각의 반복마다 콜백 함수 fn을 호출합니다.

콜백 함수 fn은 배열의 현재 요소를 받고 newArray의 내부에 저장된 요소의 길이를 반환합니다. for 루프가 끝난 이후에, newArray가 반환되고, lenArray에 할당됩니다.

newArray = [(’Javascript’) ⇒{ return “Javascript”.length; } ,(’Python’) ⇒{ return “Python”.length; } … ,(’C’) ⇒{ return “C”.length; } ]

이렇게 될것입니다.

 

여기서 저는 조금 이해가 되었습니다. 객체안에 함수라는 형태가 존재할 수 있다는것이 고차함수 인가?.. '함수를 객체처럼 쓰고 반환하면 그게 고차함수 이겠구나' 라고 생각했습니다.

참고

• https://velog.io/@jakeseo_me/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%9D%BC%EB%A9%B4-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%A0-33%EA%B0%80%EC%A7%80-%EA%B0%9C%EB%85%90-22-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B3%A0%EC%B0%A8-%ED%95%A8%EC%88%98Higher-Order-Function-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0