7/21 Section 2 첫 시작으로 고차함수를 공부했다

고차함수

일급객체

자바스크립트에서는 함수가 특별취급된다

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

const square = function (num) {
  return num * num;
}

// 변수 square에 함수를 할당하는 함수 표현식
// 자바스크립트에서 함수는 일급 객체이기 떄문에 변수에 할당할 수 있다
output = square(7);
console.log(output); // 49

고차함수란?

고차함수 (higher order function)
함수를 전달인자로 받을 수 있고, 함수를 리턴할 수 있는 함수

다른 함수의 전달인자로 전달되는 함수를 콜백 함수라고 한다. (callback function)

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

function double(num) {
  return num * 2;
}

function doubleNum(func, num) {
  return func(num);
}
// 함수 doubleNum은 다른 함수를 인자로 받는 고차함수
// 함수 func는 함수 doubleNum의 콜백 함수

let output = doubleNum(double, 4)
console.log(output) // 8

2. 함수를 리턴하는 경우

function adder(added) {
  return function (num) {
    return num + added;
  };
}

// 함수 adder는 다른 함수를 리턴하는 고차 함수
// 인자 한개를 입력 받아서 함수(익명함수)를 리턴
// 리턴되는 익명함수는 인자 한개를 받아서 added와 더한값을 리턴한다.

let output = adder(5)(3); // 8

const add3 = adder(3); // adder가 리턴하는 함수를 변수에 저장할 수 있다 
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의 콜백함수

doubleAdder(5, double)(3); // 13

const addTwice3 = doubleAdder(3, double);
addTwice3(2); // 8

내장 고차함수

내장 고차함수 세가지를 배웠다 filter와 map 그리고 reduce였다
가장 이해하기 힘들었던 함수는 reduce였지만 코플릿을 페어분과 해결하면서 점점 익숙해졌다.

filter

filter() 는 배열 각 요소에 대하여 주어진 함수의 결괏값이 true인 요소를 모아 새로운 배열을 반환하는 메서드 이다. 오직 boolean타입만 반환한다는 것이 특징이다.
리턴값이 true인 경우에만 배열에 추가하기 때문에 조건에 맞는 데이터만 분류할 때 사용한다.

// 단행본 모음
const cartoons = [
  {
    id: 1,
    bookType: 'cartoon',
    title: '식객',
    subtitle: '어머니의 쌀',
    createdAt: '2003-09-09',
    genre: '요리',
    artist: '허영만',
    averageScore: 9.66,
  },
  {
    id: 2,
    // .. 이하 생략
  },
  // ... 이하 생략
]; 

// 단행본 한 권의 출판 연도가 2003인지 확인하는 함수
const isCreatedAt2003 = function (cartoon) {
  const fullYear = new Date(cartoon.createdAt).getFullYear()
  return fullYear === 2003;
}; 

// 출판 연도가 2003년인 책의 모음
const filteredCartoons = cartoons.filter(isCreatedAt2003); 

map

map()은 배열 각 요소에 대하여 주어진 함수를 수행한 결과를 모아 새로운 배열을 반환하는 메서드이다. 하나의 데이터를 다른데이터로 매핑(mapping)할 때 사용한다.

// 만화책 모음
const cartoons = [
  {
    id: 1,
    bookType: 'cartoon',
    title: '식객',
    subtitle: '어머니의 쌀',
    createdAt: '2003-09-09',
    genre: '요리',
    artist: '허영만',
    averageScore: 9.66,
  },
  {
    id: 2,
    // .. 이하 생략
  },
  // ... 이하 생략
]; 

// 만화책 한 권의 부제를 리턴하는 로직(함수)
const findSubtitle = function (cartoon) {
  return cartoon.subtitle;
}; 

// 각 책의 부제 모음 
const subtitles = cartoons.map(findSubtitle); // ['어머니의 쌀', ...]

reduce

reduce() 는 배열 각 요소에 대하여 reducer 함수를 실행하고, filter 와 map과 달리 배열이 아닌 하나의 결괏값을 반환 한다는 것에 차이점이 있다. 함수가 수행하면서 값을 임시로 보관하는 형태로 동작한다. 하나의 데이터로 응축(reduce)할때 사용한다.

// 단행본 모음
const cartoons = [
  {
    id: 1,
    bookType: 'cartoon',
    title: '식객',
    subtitle: '어머니의 쌀',
    createdAt: '2003-09-09',
    genre: '요리',
    artist: '허영만',
    averageScore: 9.66,
  },
  {
    id: 2,
    // .. 이하 생략
  },
  // ... 이하 생략
];

// 단행본 한 권의 평점을 누적값에 더한다.
const scoreReducer = function (sum, cartoon) {
  return sum + cartoon.averageScore;
}; 

// 초기값에 0을 주고, 숫자의 형태로 평점을 누적한다.
let initialValue = 0 
// 모든 책의 평점을 누적한 평균을 구한다.
const cartoonsAvgScore = cartoons.reduce(scoreReducer, initialValue) / cartoons.length;