고차 함수와 메서드

자바스크립트에서 함수는 특별히 취급하는 일급객체라고 분류된다. 대표적인 일급객체의 특징은

 

1.변수에 할당(assignment)할 수 있다.

2.다른 함수의 전달인자(argument)로 전달될 수 있다.

3.다른 함수의 결과로서 리턴될 수 있다.

가 있다. 이러한 함수에서 함수를 인자로 받거나 반환값으로 사용할 수 있는 함수를 고차함수라 한다. 오늘은 이 고차 함수에 대해 공부할 것이다.

 

고차함수란? 

---

• 함수를 반환하거나 함수를 인자로 받는 함수를 의미한다.
• 다른 함수의 전달 인자로 전달되는 함수를 콜백 함수하며, 주로 순차적인 함수 실행을 위해 사용된다.
• 함수를 반환하는 함수를 커링 함수라고 하지만, 고차 함수가 커링함수를 포함하기에 고차함수라 해도 상관없다.
• 이런 고차 함수를 사용하는 이유는 추상화를 위해서이다.
• 추상화란 복잡한 어떤 것을 압축해서 핵심만 추출한 상태로 만드는 것이다. 즉, 함수 내부의 로직은 몰라도 결과만 알고 사용하는 것을 의미한다.
• 이런 추상화는 생산성을 높일 수 있고, 고차 함수는 추상화의 수준이 높기에 사용한다.
• 이런 고차함수들 중 함수에 기본적으로 내장된 함수가 존재한다. 배열 메서드가 대표적인 예이며, filter,map,reduce가 많이 사용된다.

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

---

• 모든 배열의 요소 중에서 특정 조건을 만족하는 요소를 걸러내는 메서드.
• 조건식을 리턴하는 함수를 인자로 넣으면, 모든 요소를 자동적으로 확인해 true인 요소만 모인 새로운 배열을 반환한다.

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

const newArr = arr.filter((el) => {return el % 2 ===0});

console.log(newArr);  // [2, 4]

 

 

map

---

• 배열의 모든 요소들을 인자로 받은 함수에 넣고 실행하여, 그 실행결과로 이루진 배열을 반환하는 메서드.
• 하나의 데이터를 다른 데이터로 매핑할 때 사용

const cartoons = [
  {
    id: 1,
    bookType: 'cartoon',
    title: '식객',
    subtitle: '어머니의 쌀',
  },
  {
    id: 2,
    // .. 이하 생략
  },
  // ... 이하 생략
]; 

// 만화책 한 권의 부제를 리턴하는 로직(함수)
const findSubtitle = function (cartoon) {
  return cartoon.subtitle;
}; 
// 각 책의 부제 모음 
const subtitles = cartoons.map(findSubtitle); // ['어머니의 쌀', ...]

const arr = [1, 2, 3];

const newArr = arr.map((el) => {return el*el});//모든 요소를 제곱함

console.log(newArr);  // [1, 4, 9]

 

 

 

reduce

---

• 여러 데이터를, 하나의 데이터로 응축할 때 사용
• 배열의 각 요소를 순회하며 콜백 함수의 실행 값을 누적하여 하나의 결과값을 반환 합니다.
• 초기값은 기본적으로 배열의 첫번째 메서드를 의미하고, 따로 설정할 수 있다.

const arr = [1, 2, 3];
const result = arr.reduce((acc, cur, idx) => {
  let newAcc = acc + cur;
  return newAcc;
}, 10) //초기값 10


//result =16

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, ''); //Tim,Satya,Sundar,