고차함수 !

Achievement Goals

- 일급 객체의 세가지 특징

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

- 고차 함수란

함수를 인자로 받을 수 있고, 함수의 형태로 리턴할 수 있는 함수를 고차함수라고 한다
여기서 함수의 인자로 전달되는 함수를 콜백한수라고 한다.

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

내장된 Javascript 고차함수

filter

모든 요소 중 내가 원하는 값만 필터링해서 반환

let arr = [1, 2, 3, 4];
let output = arr.filter(짝수);
console.log(output); // ->> [2, 4]

arr = ['hello', 'code', 'states', 'happy', 'hacking'];
output = arr.filter(길이 5 이하)
console.log(output); // ->> ['hello', 'code', 'happy']

전달되는 조건은 함수의 형태 !!
filter 메소드에 들어가는 콜백 함수는 truthy 또는 falsy를 리턴

필터함수 예시

let arr = [1, 2, 3];
// 배열의 filter 메소드는 함수를 인자로 받는 고차함수입니다.
// arr.filter를 실행하면 내부적으로 arr에 접근할 수 있다고 생각해도 됩니다.
arr.filter = function (arr, func) {
  const newArr = [];
  for (let i = 0; i < arr.length; i++) {
    // filter에 인자로 전달된 콜백 함수는 arr의 각 요소를 전달받아 호출됩니다.
    // 콜백 함수가 true를 리턴하는 경우에만 새로운 배열에 추가됩니다.
    if (func(arr[i]) === true) {
      newArr.push(this[i]);
    }
  }
  // 콜백 함수의 결과가 true인 요소들만 저장된 배열을 리턴합니다.
  return newArr;
};

/*
 * 보다 정확한 정의는 프로토 타입과 this를 학습한 후, 아래 코드를 통해 이해할 수 있습니다.
 * Array.prototype.filter = function(func) {
 *   const arr = this;
 *   const newArr = []
 *   for(let i = 0; i < arr.length; i++) {
 *     if (func(arr[i]) === true) {
 *       newArr.push(this[i])
 *     }
 *   }
 *   return newArr;
 * }
 */

foreach

map

어떤 배열을 다른형태의 배열로 만들고 싶을 때 사용

reduce

정해진 조건에 따라 누적값을 구하는 함
초기값을 정해 줄 수 있음

초기값 지정

초기값을 정하면 초기값이 설정이 되고 시작값이 바로 누적이 됨

문자열 숫자열 다 가능

제일 큰 것 작은 것을 구할 수 있음

배열말고 다른 형태로 만들 수 도있음

===> reduce는 이렇게 여러 데이터를, 하나의 데이터로 응축(reduce)할 때 사용

reduce의 여러가지 사용

reduce: 배열을 문자열로 만들기

• 배열의 각 요소 : 유저 정보
• 응축하는 방법 (함수) : 하나의 유저의 이름과 쉼표를 이어 붙입니다(concat)
• 원하는 형태 : 문자열로 누적합니다.
• 응축된 결과 : 쉼표로 구분되는 모든 유저의 이름

function joinName(resultStr, user) {
  resultStr = resultStr + user.name + ', ';
  return resultStr;
}

let users = [
  { name: 'Tim', age: 40 },
  { name: 'Satya', age: 30 },
  { name: 'Sundar', age: 50 }
];

users.reduce(joinName, '');

reduse : 배열을 객체로

• 배열의 각 요소 : 유저 정보
• 응축하는 방법 (함수) : 유저 한 명의 이름 중 첫 글자를 주소록 객체 속성의 키(key)로, 유저의 정보를 주소록 객체 속성의 값(value)으로 추가합니다.
• 원하는 형태 : 주소록 객체에 누적합니다.
• 응축된 결과 : 모든 유저의 정보가 알파벳으로 구분된 주소록

function makeAddressBook(addressBook, user) {
  let firstLetter = user.name[0];

  if(firstLetter in addressBook) {
    addressBook[firstLetter].push(user);
  } else {
    addressBook[firstLetter] = [];
    addressBook[firstLetter].push(user);
  }

  return addressBook;
}

let users = [
  { name: 'Tim', age: 40 },
  { name: 'Satya', age: 30 },
  { name: 'Sundar', age: 50 }
];

users.reduce(makeAddressBook, {});

{
  T: [
    { name: 'Tim', age: 40 }
  ],
  S: [
    { name: 'Satya', age: 30 },
    { name: 'Sundar', age: 50 }
  ]
}