고차함수

cutiepazzipozzi·2023년 8월 13일

자바스크립트

Challenge

목록 보기

5/7

고차함수?

함수형 프로그래밍이 갖는 특징 중 하나이다.
= 함수를 인자로 전달받거나, 함수를 결과로 반환하는 함수
(인자로 받은 함수를 필요한 시점에 호출 or 클로저로 반환)

※ 함수를 인자로 전달하고 return할 수 있다고?
자바스크립트의 함수는 일급 객체이기 때문에 함수가 값처럼 쓰일 수 있다!

고차함수를 사용하는 이유

추상화 때문 !! => 생산성 ↑

우리는 반복되는 기능을 하나의 함수로 묶어 값을 인자로 전달하기만 하면 원하는 값을 얻을 수 있다. 이 경우도 추상화(값 수준의) 라고 부를 수 있다. 여기서 추상화 단계가 더 높아진 것이 고차함수인데, 이는 사고의 추상화이기 때문이다. 사고의 추상화는 함수(사고 묶음)를 전달받아 처리하는 것으로, 고차함수는 함수를 인자로 전달받거나 반환하기 때문에 함수에 대한 로직은 감춰져 있다.

여기서 자주 언급될 콜백함수 ?!

= 인자로 함수를 전달받고, 함수 내부에서 실행되는 함수

아래에 소개될 고차함수들도 주어진 함수 안에 익명의 함수 (forEach라면 모든 요소들을 탐색하며 console.log()를 찍는 익명함수가 쓰인다던지 ..)를 활용해 동작시킨다.

함수 내부에서 실행되므로 익명 함수여도 O
함수를 인자로 사용할 때 ()를 붙일 필요 X

고차함수들 소개!

배열 메서드들 중 대부분이 내부 고차함수이다.

1. forEach

주어진 배열의 모든 요소들을 빠짐없이 순회하는 함수
(반환값 X)
-> 그래서 break문이 무용지물

배열을 순회하여 요소 값들을 모두 참조해 무언가를 하기 위한 함수

const arr = [1,2,3,4,5]
let sum = 0;

arr.forEach((element) => sum += element);
console.log(sum); //15

2. map

주어진 콜백함수의 반환 값으로 새로운 배열을 반환하는 함수
-> 절!대! 기존배열을 수정하지 않음

배열을 순회하며 요소 값을 다른 값으로 매핑하기 위한 함수

const arr = [1, 2, 3, 4, 5];
const newArr = arr.map((element) => {
  return element * element;
});

console.log(newArr); // [1,4,9,16,25]

3. filter

주어진 배열의 요소들 중 특정 조건에 해당하는 요소만 담아 새로운 배열로 반환해주는 함수

const arr = [1,2,3,4,5];
const newArr = arr.filter((element) => element > 2);

console.log(newArr); // [3,4,5]

4. reduce

주어진 배열의 요소를 어떤 함수에 따라 원하는 하나의 형태로 만들어 반환

특이하게 콜백함수에서 4가지 인수를 가진다. 누적값, 현재 요소, 현재 인덱스, 호출 배열!

const arr = [1, 2, 3, 4, 5];
const newArr = arr.reduce((sum, cur) => (sum -= cur), 0);
//여기서는 위에 0이라는 초기값을 꼭 설정해줘야 함!
//(왜냐면 최초 호출 시의 초기값, 누적값이 달라짐)

console.log(newArr); //-15

5. curry (커링)

** 자스외의 다른 언어에도 존재!

인자가 여러개인 함수의 일부 인자를 고정시켜 새로운 함수를 만드는 기법
ex. f(a,b,c) -> f(a)(b)(c)

//ex1
// a와 b 두 개의 인수를 커링하는 헬퍼함수 curry2
function curry2(f) {
  return function (a) {
    return function (b) {
      return f(a, b);
    };
  };
}

function sum(a, b) {
  return a + b;
}

let curry = curry2(sum);

console.log(curry(3)(4)); // 7

//ex2
const curry = (a) => (b, c) => (d) => {
  console.log(a, b, c, d);
};

curry("커링")("너무", "어려워")("적용가능?");
// 커링 너무 어려워 적용가능?

커링은 partial 적용을 쉽게 만들어준다는 이점을 가짐
(근데 partial하다는게 함수의 인자를 나눠 관리가 편하다는 건가?)

6. some

주어진 배열의 한 요소라도 특정 조건을 만족하는지 확인하는 함수
(= 하나라도 만족: true 반환, 아니면 false 반환)

7. every

주어진 배열의 모든 요소가 특정 조건을 만족하는지 확인하는 함수
(= 모두 만족: true반환, 아니면 false 반환)

//some과 every의 아주 간단한 예시
const arr = [1, 2, 3, 4, 5];
console.log(arr.some((element) => element > 0)); //true
console.log(arr.every((element) => element < 1)); //false