[JavaScript] - 고차함수

 

고차 함수란?

 

1. 다른 함수를 인자로써 전달받는 함수를 의미한다.

•  이 때 전달이 되는 함수는 콜백함수이다.

2. 다른 함수를 결과로써 리턴하는 함수

•  이런 함수를 커링 함수라고 부른다.

 

🧐 왜 고차 함수가 중요할까?

• 시야가 트이고 생산성이 증가하기 때문이다.
• 추상화라는 것은 복잡한 자료, 모듈, 시스템으로 부터 핵심적인 개념 즉 에센셜을 추출해 내는 것으로 이해할 수 있다.
• 정확한 내부 동작을 몰라도 이해하고 사용할 수 있기 때문에, 문제를 더 쉽고 빠르게 해결할 수 있다는 장점이 있다.
• 추상화의 관점에서 바라보면, 함수도 사고 혹은 논리의 모음이다. 자주 사용하는 기능들을 모아서 함수를 하나의 모듈처럼 만들어서 계속 재사용한다. 복잡한 모든 로직을 일일이 짜지 않아도 미리 만들어두면 가져다 쓸 수 있기 때문에
• 추상화를 단순히 값을 전달하는 수준에서 벗어나서, 함수 차원으로 넓어지면 더 고차원에서 생각할 수 있고 그렇기에 시야가 트이고 생산성이 증가한다고 할 수 있다. 

 

일급 객체란?

다른 객체들에게 적용 가능한 연산은 모두 지원하는 객체이다. 아래의 세 가지 특징을 가지면 일급 객체라고 할 수 있다.

1. 변수에 할당할 수 있다.
2. 다른 함수의 전달인자로 전달될 수 있다.
3. 다른 함수의 결과로서 리턴될 수 있다.

• 자바스크립트에서 함수(함수도 객체이다)는 위 세가지 모두를 충족하기 때문에 일급 객체, 일급 함수라고 할 수 있는 것이다.
• 또 다른 의미로는 자바스크립트에서는 함수가 값 처럼 다루어진다는 의미이기도 하다.(변수에 할당할 수 있다.)

 

내장 고차 함수 이해하기

JavaScript에는 기본적으로 내장된 고차 함수가 여럿 있습니다. 그중에서 배열 메서드들 중 일부가 대표적인 고차 함수에 해당합니다.

예를 들면, Array.prototype.map, Array.prototype.filter 그리고 Array.prototype.reduce가 언어 내부에 포함된 (built-in) 고차함수입니다.

 

 

Array.prototype.filter

filter() 메소드는 콜백 함수에 의해 제공된 테스트를 통과한 모든 엘리먼트를 가진 새로운 배열을 만들어냅니다. filter() 메소드로 넘겨진 콜백 함수는 3가지 인자를 받습니다: element, index,array를 받습니다.

 

Example #1

 

우리가 이름과 나이 프로퍼티를 가진 오브젝트를 가지고 있다고 해봅시다. 우리는 18살 이상의 사람만 필터링된 새로운 배열을 만들고 싶습니다.

 

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

const persons = [
  { name: 'Peter', age: 16 },
  { name: 'Mark', age: 18 },
  { name: 'John', age: 27 },
  { name: 'Jane', age: 14 },
  { name: 'Tony', age: 24},
];
const fullAge = [];
for(let i = 0; i < persons.length; i++) {
  if(persons[i].age >= 18) {
    fullAge.push(persons[i]);
  }
}
console.log(fullAge);

고차 함수로 작성

const persons = [
  { name: 'Peter', age: 16 },
  { name: 'Mark', age: 18 },
  { name: 'John', age: 27 },
  { name: 'Jane', age: 14 },
  { name: 'Tony', age: 24},
];
const fullAge = persons.filter(person => person.age >= 18);
console.log(fullAge);

 

Array.prototype.map

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

map 메소드로 전해진 콜백 함수는 3가지 인자를 받습니다: element, index, 그리고 array

 

Example #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);

 

Array.prototype.reduce

reduce 메소드는 호출하는 배열의 각각의 멤버에 대해서 콜백 함수를 실행하고 하나의 결과 값만 내보냅니다. reduce 메소드는 2가지 파라미터를 받습니다. 1) 리듀서 함수 (콜백), 2) 초기값(initialValue) 옵션

 

리듀서(콜백) 함수는 4가지 파라미터를 받습니다: accumulator, currentValue, currentIndex, sourceArray.

 

만일 initialValue가 제공되었다면, 그 후에 accumulator는 initialValue와 같아지고 currentValue는 배열의 첫번째 값과 동일할 것입니다.

만일 intialValue가 제공되지 않았다면, 그 후에 accumulator는 배열의 처음 요소와 동일해지고 currentValue는 배열의 두번째 요소와 같아질 것입니다.

 

Example #1

숫자 배열의 합을 구하는 예제를 만들어봅시다.

 

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

const arr = [5, 7, 1, 8, 4];

let sum = 0;

for (let i=0; i<arr.length; i++) {
  sum = sum + arr[i];
}

// prints 25
console.log(sum);

 

고차 함수로 작성

const arr = [5, 7, 1, 8, 4];

const sum = arr.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
});

// prints 25
console.log(sum);

배열 내부의 각 값에 대해 리듀서 함수가 호출되는 모든 순간에, accumulator는 리듀서 함수로부터 반환된 이전 연산의 결과를 갖고 있습니다. 그리고 currentValue는 배열의 현재 값으로 세팅됩니다. 마지막에, 결과 값은 sum 변수에 저장됩니다.