TIL(20210707) - 고차함수

🎁 Today

• 일급 객체의 특징 학습
• 고차함수 개념 학습
• 내장 고차함수(filter, map, reduce)학습 및
  내장 고차함수를 사용하여 간단한 알고리즘 문제풀이

🤔 Learned

First-class citizen : 일급객체 - 특별한 대우를 받는 함수

비행기에는 First class가 있습니다. 이코노미 클래스와는 탑승수속부터 기내식, 수하물이 나오는 순서까지 항공사와 관련된 모든 부분에서 혜택이 다릅니다. First class 좌석을 구매한 사람은 비싼 가격을 치르고, 항공사로부터 특별한 대우를 받습니다.

자바스크립트에도 특별한 대우를 받는 일급 객체(first-class citizen)가 있습니다. 대표적인 일급 객체 중 하나가 함수입니다. (자바스크립트가 나온 시점을 고려했을 때,) 자바스크립트에서 함수는 아래와 같이 특별하게 취급됩니다.

• 변수에 할당(assignment) 할 수 있다.
• 다른 함수의 인자(argument)로 전달될 수 있다.
• 다른 함수의 결과로서 리턴될 수 있다.

함수를 변수에 할당할 수 있기 때문에, 함수를 배열의 요소나 객체의 속성값으로 저장할 수 있습니다. 이는 함수를 데이터(string, number, boolean, array, object)를 다루듯이 다룰 수 있다는 걸 의미합니다.

1. 변수에 함수를 할당하는 경우

   /*
    * 아래는 변수 square에 함수를 할당하는 함수 표현식입니다.
    * 자바스크립트에서 함수는 일급 객체이기 때문에 변수에 저장할 수 있습니다.
    *
    * 함수 표현식은 할당 전에 사용할 수 없습니다.
    * square(7); // --> ReferenceError: Can't find variable: square
    */
   
   const square = function (num) {
     return num * num;
   };
   
   // square에는 함수가 저장되어 있으므로 (일급 객체), 함수 호출 연산자 '()'를 사용할 수 있습니다.
   output = square(7);
   console.log(output); // --> 49

[코드] 함수 표현식은 변수에 할당한 다음 사용할 수 있습니다.

여러분은 이미 함수를 변수에 저장하는 방법(함수 표현식)을 학습했습니다. 위의 함수 표현식(function expression)은 함수 선언식(function declaration)과 다르게 호이스팅(Hoisting)이 적용되지 않습니다.

• 호이스팅은 선언된 위치에 관계없이 어디서든 함수를 사용할 수 있도록 합니다.
• 코드가 실행되는 과정에서 함수 선언부를 코드의 최상단으로 끌어올리는 것처럼 보이게 합니다.

함수 선언식의 호이스팅에 지나치게 의존하면, 코드의 유지 보수가 쉽지 않습니다. 코드 리뷰나 디버깅을 할 때, 코드를 위아래로 왔다 갔다 하게 될 수 있습니다. 함수 선언식은 어느 위치에나 함수를 선언할 수 있고, 함수의 실행 위치도 중요하지 않습니다. 반면에 함수 표현식은 함수의 할당과 실행의 위치에 따라 결과가 달라지기 때문에, 코드의 위치를 어느 정도 예측할 수 있습니다. 호이스팅을 제외하면, 함수 선언식과 함수 표현식은 크게 차이가 없습니다. 다만, 함수 표현식의 경우는 함수가 변수에 저장될 수 있다는 사실을 보다 분명하게 보여 줍니다.

그리고 함수는 변수에 저장된 데이터를 인자로 받거나, 리턴 값으로 사용할 수 있습니다. 함수도 변수에 저장될 수 있기 때문에 함수를 인자로 받거나, 리턴 값으로 사용할 수 있습니다. 이어지는 콘텐츠를 통해 자바스크립트의 고급 주제, 고차 함수(higher order function)를 학습합니다.

---

고차 함수란

고차 함수(higher order function)는 함수를 인자(argument)로 받을 수 있고, 함수의 형태로 리턴할 수 있는 함수입니다. 이전 콘텐츠에서 확인했듯이, 함수는 변수에 저장할 수 있습니다. 그리고 함수는, 함수를 담은 변수를 인자로 전달받을 수 있습니다. 마찬가지로, 함수 내부에서 변수에 함수를 할당할 수 있습니다. 그리고 함수는 이 변수를 리턴할 수 있습니다. 여기서 변수에 할당하지 않고 함수를 바로 이용할 수 있습니다. 어떤 고차 함수에 함수를 인자로 전달하고, 고차 함수는 함수 자체를 리턴합니다. 변수가 빠졌을 뿐, 동일하게 동작합니다.

이때 다른 함수(caller)의 인자(argument)로 전달되는 함수를 콜백 함수(callback function)라고 합니다. 콜백 함수의 이름은, 어떤 작업이 완료되었을 때 호출하는 경우가 많아서, 답신 전화를 뜻하는 콜백이라는 이름이 붙여졌습니다.

콜백 함수를 전달받은 고차 함수는, 함수 내부에서 이 콜백 함수를 호출(invoke) 할 수 있습니다. caller는 조건에 따라 콜백 함수의 실행 여부를 결정할 수 있습니다. 아예 호출하지 않을 수도 있고, 여러 번 실행할 수도 있습니다. 특정 작업의 완료 후에 호출하는 경우는 이후에 충분히 접할 수 있습니다.

'함수를 리턴하는 함수'는 모양새가 특이한 만큼, 부르는 용어가 따로 있습니다. '함수를 리턴하는 함수'를 고안해 낸 논리학자 하스켈 커리(Haskell Curry)의 이름을 따, 커리 함수라고 합니다. 따로 커리 함수라는 용어를 사용하는 경우에는, 고차 함수란 용어를 '함수를 인자로 받는 함수'에만 한정해 사용하기도 합니다. 그러나 정확하게 구분하자면, 고차 함수가 커리 함수를 포함합니다. 이번 유닛부터는 '함수를 리턴하는 함수'와 '함수를 인자로 받는 함수' 모두, 용어를 고차 함수로 사용합니다.

1. 다른 함수를 인자로 받는 경우

   function double(num) {
     return num * 2;
   }
   
   function doubleNum(func, num) {
     return func(num);
   }
   
   /*
    * 함수 doubleNum은 다른 함수를 인자로 받는 고차 함수입니다.
    * 함수 doubleNum의 첫 번째 인자 func에 함수가 들어올 경우
    * 함수 func는 함수 doubleNum의 콜백 함수입니다.
    * 아래와 같은 경우, 함수 double은 함수 doubleNum의 콜백 함수입니다.
    */
   let output = doubleNum(double, 4);
   console.log(output); // -> 8

2. 함수를 리턴하는 경우

   function adder(added) {
     return function (num) {
       return num + added;
     };
   }
   
   /*
    * 함수 adder는 다른 함수를 리턴하는 고차 함수입니다.
    * adder는 인자 한 개를 입력받아서 함수(익명 함수)를 리턴합니다.
    * 리턴되는 익명 함수는 인자 한 개를 받아서 added와 더한 값을 리턴합니다.
    */
   
   // adder(5)는 함수이므로 함수 호출 연산자 '()'를 사용할 수 있습니다.
   let output = adder(5)(3); // -> 8
   console.log(output); // -> 8
   
   // adder가 리턴하는 함수를 변수에 저장할 수 있습니다.
   // javascript에서 함수는 일급 객체이기 때문입니다.
   const add3 = adder(3);
   output = add3(2);
   console.log(output); // -> 5

3. 함수를 인자로 받고, 함수를 리턴하는 경우

   function double(num) {
     return num * 2;
   }
   
   function doubleAdder(added, func) {
     const doubled = func(added);
     return function (num) {
       return num + doubled;
     };
   }
   
   /*
    * 함수 doubleAdder는 고차 함수입니다.
    * 함수 doubleAdder의 인자 func는 함수 doubleAdder의 콜백 함수입니다.
    * 함수 double은 함수 doubleAdder의 콜백으로 전달되었습니다.
    */
   
   // doubleAdder(5, double)는 함수이므로 함수 호출 기호 '()'를 사용할 수 있습니다.
   doubleAdder(5, double)(3); // -> 13
   
   // doubleAdder가 리턴하는 함수를 변수에 저장할 수 있습니다. (일급 객체)
   const addTwice3 = doubleAdder(3, double);
   addTwice3(2); // --> 8

---

내장 고차함수(filter, map, reduce)

메소드(filter, map, reduce)는 this(원본 배열)를 변경하지 않는다🔒

1. Array.prototype.filter(callback: (element, index: number, array) => thisArg?: any) ;

• filter 메소드를 사용하면 if 문을 대체할 수 있다.
• 배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백함수의 실행 결과가 true인 배열 요소의 값만을 추출한 새로운 배열을 반환한다.
• 배열에서 특정 케이스만 필터링 조건으로 추출하여 새로운 배열을 만들고 싶을 때 사용한다. 이때 원본 배열은 변경되지 않는다.
• 콜백 함수의 매개변수를 통해 배열 요소의 값, 요소 인덱스, filter 메소드를 호출한 배열, 즉 this를 전달 받을 수 있다.
• IE 9 이상에서 정상 동작한다.

const result = [1, 2, 3, 4, 5].filter(function (item, index, self) {
  console.log(`[${index}] = ${item}`);
  return item % 2; // 홀수만을 필터링한다 (1은 true로 평가된다)
});

// [0] = 1
// [1] = 2
// [2] = 3
// [3] = 4
// [4] = 5
console.log(result); // [ 1, 3, 5 ]

2. Array.prototype.map(callback: (element, index: number, array) => thisArg?: any);

• 배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백 함수의 반환값(결과값)으로 새로운 배열을 생성하여 반환한다. 이때 원본 배열은 변경되지 않는다.
• forEach 메소드는 배열을 순회하며 요소 값을 참조하여 무언가를 하기 위한 함수이며 map 메소드는 배열을 순회하며 요소 값을 다른 값으로 맵핑하기 위한 함수이다.

Array.prototype.map

• 콜백 함수의 매개변수를 통해 배열 요소의 값, 요소 인덱스, map 메소드를 호출한 배열, 즉 this를 전달 받을 수 있다.
• IE 9 이상에서 정상 동작한다.

const numbers = [1, 4, 9];

// 배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백함수를 실행
const roots = numbers.map(function (item) {
  // 반환값이 새로운 배열의 요소가 된다. 반환값이 없으면 새로운 배열은 비어 있다.
  return Math.sqrt(item);
});

// 위 코드의 축약표현은 아래와 같다.
// const roots = numbers.map(Math.sqrt);

// map 메소드는 새로운 배열을 반환한다
console.log(roots);   // [ 1, 2, 3 ]
// map 메소드는 원본 배열은 변경하지 않는다
console.log(numbers); // [ 1, 4, 9 ]

3. Array.prototype.reduce(callback: (accumulator, currentValue, index: number, array) => accumulator + currentValue);

배열을 순회하며 각 요소에 대하여 이전의 콜백함수 실행 반환값을 전달하여 콜백함수를 실행하고 그 결과를 반환한다. IE 9 이상에서 정상 동작한다.

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

/*
previousValue: 이전 콜백의 반환값
currentValue : 배열 요소의 값
currentIndex : 인덱스
array        : 메소드를 호출한 배열, 즉 this
*/
// 합산
const sum = arr.reduce(function (previousValue, currentValue, currentIndex, self) {
  console.log(previousValue + '+' + currentValue + '=' + (previousValue + currentValue));
  return previousValue + currentValue; // 결과는 다음 콜백의 첫번째 인자로 전달된다
});

console.log(sum); // 15: 1~5까지의 합
/*
1: 1+2=3
2: 3+3=6
3: 6+4=10
4: 10+5=15
15
*/

// 최대값 취득
const max = arr.reduce(function (pre, cur) {
  return pre > cur ? pre : cur;
});

console.log(max); // 5: 최대값

🌈 Tomorrow

• 고차함수 복습
• 알고리즘 문제풀이