고차 함수(Higher order function)란

G-NOTE·2021년 10월 6일
0

JavaScript

목록 보기
4/7

고차 함수(Higher order function)

  • 함수를 매개변수로 전달받거나 함수를 결과로 반환하는 함수
  • 고차 함수는 매개변수로 받은 함수를 필요한 시점에 호출하거나 클로저를 생성하여 반환한다.
  • 고차 함수는 함수형 프로그래밍에 기반을 두고 있다.

함수형 프로그래밍

  • 순수 함수를 통해 부수 효과를 최대한 억제해 오류를 피하고 프로그램의 안전성을 높이려는 프로그래밍 패러다임
  • 외부 상태 변경이나 가변적인 데이터를 피하고 불변성(immutability)을 지향한다.

built-in HOF 예시

  • Mutator : 원본 배열 변경 O
  • Accessor : 원본 배열 변경 X

Array.prototype.sort (Mutator)

  • 배열의 요소를 정렬해서 반환한다.

  • 오름차순 : 기본 정렬

const students = ['John', 'Annie', 'Lee'];
console.log(students.sort()); // [ 'Annie', 'John', 'Lee' ]
  • 내림차순 : sort + reverse 메서드
const students = ['John', 'Annie', 'Lee'];
console.log(students.sort().reverse()); // [ 'Lee', 'John', 'Annie' ]
  • 주의사항 : 숫자는 유니코드 포인트 순서를 따라가므로 정렬 순서를 정의하는 비교 함수를 인수로 전달해야 한다.
const numbers = [5, 1, 25, 100, 30, 10];
console.log(numbers.sort()); // [ 1, 10, 100, 25, 30, 5 ]

// 오름차순 정렬
console.log(numbers.sort((a, b) => a - b)); // [ 1, 5, 10, 25, 30, 100 ]

// 내림차순 정렬
console.log(numbers.sort((a, b) => b - a)); // [ 100, 30, 25, 10, 5, 1 ]

Array.prototype.forEach (Accessor)

  • 자신의 내부에서 반복문을 실행하여 자신을 호출한 배열을 순회하며 수행해야 하는 처리를 콜백 함수로 전달받아 반복 호출한다.
  • break, continue문을 사용할 수 없기 때문에 배열의 모든 요소를 빠짐없이 순회해야 한다.
  • forEach의 반환값은 항상 undefined
const numbers = [1, 2, 3];
const res = [];

numbers.forEach((item) => res.push(item ** 2));
console.log(res); // [ 1, 4, 9 ]

Array.prototype.map (Accessor)

  • 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출하고, 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다.
  • map 메서드를 호출한 배열과 map 메서드가 생성해 반환한 배열을 1:1 매핑(mapping)한다. 즉, length 프로퍼티 값이 일치한다.
[1, 2, 3].map((item, index, arr) => {
  console.log(`item: ${item}, index: ${index}, this: ${JSON.stringify(arr)}`);
  return item;
});
/*
  item: 1, index: 0, this: [1,2,3]
  item: 2, index: 1, this: [1,2,3]
  item: 3, index: 2, this: [1,2,3]
  */
  • 첫 번째 요소 : 요소값
  • 두 번째 요소 : 인덱스
  • 세 번째 요소 : 메서드를 호출한 배열(this)

Array.prototype.filter (Accessor)

  • 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출하고 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다.
const numbers = [1, 2, 3, 4, 5];
const odds = numbers.filter((item) => item % 2);

console.log(odds); // [1, 3, 5]

Array.prototype.reduce (Accessor)

  • 자신을 호출한 배열의 모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복 호출하고 콜백 함수의 반환값을 다음 순회 시 콜백 함수의 첫 번째 인수로 전달하면서 콜백 함수를 호출하여 하나의 결과값을 만들어 반환한다.
  • .reduce의 두 번째 인수로 초기값을 전달할 수 있으며, 이 값은 콜백 함수에 최초로 전달된다.
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((pre, cur, idx, arr) => pre + cur, 0);

console.log(sum); // 15
  • pre : 이전 콜백 함수의 return값
  • cur : 배열 요소의 값
  • idx : 인덱스
  • arr : 메서드를 호출한 배열(this)
// 최댓값 구하기
const numbers = [1, 2, 3, 4, 5];
const max = numbers.reduce((acc, cur, idx, arr) => (acc > cur ? acc : cur));

console.log(max); // 5

참조

https://poiemaweb.com/js-array-higher-order-function

profile
FE Developer

0개의 댓글