[JavaScript] 고차 함수

Chapter1. 고차 함수

Chapter2. 내장 고차 함수

2-1 filter
2-2 map
2-3 reduce

Chapter3. 고차 함수의 중요성

---

Chapter1. 고차 함수

고차 함수(higher order function)

함수를 전달인자(argument)로 받을 수 있고, 함수를 리턴할 수 있는 함수

콜백 함수(callback function) :

다른 함수(caller)의 전달인자(argument)로 전달되는 함수

• 작업이 완료되었을 때 호출하는 경우가 많아서 붙여진 이름
• 콜백 함수를 전달받은 고차함수(caller)는 함수 내부에서 이 콜백 함수를 호출(invoke)할 수 있고, 조건에 따라 콜백 함수 실행여부도 결정할 수 있음.
• 함수를 리턴하는 함수

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

---

Chapter2. 내장 고차 함수

학습목표

• 배열 내장 고차 함수 filter에 대해서 이해할 수 있다.
• filter에 대한 이해를 기반으로, 나머지 내장 고차 함수를 학습할 수 있다.
• filter, map, reduce, forEach, find, sort, some, every
• 고차 함수를 쓰는 이유를 설명할 수 있다.
  -고차 함수를 활용하여 프로그램을 작성할 수 있다.

---

배열 메서드

filter

모든 배열 요소 중에서 특정 조건을 만족하는 요소를 걸러냄
ex) 짝수만 걸러내기, 10보다 작은 수만 걸러내기, 특정 문자열만 걸러내기

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

filter 메서드 : 배열의 요소를 콜백 함수에 다시 전달 -> 콜백 함수는 전달받은 배열의 요소를 받아 함수를 실행 -> 콜백 함수 내부의 조건에 따라 참(true) 또는 거짓(false)을 리턴

// 함수 표현식
const isEven = function (num) {
  return num % 2 === 0;
};

let arr = [1, 2, 3, 4];
// let output = arr.filter(짝수);
// '짝수'를 판별하는 함수가 조건으로서 filter 메서드의 전달인자로 전달됩니다.
let output = arr.filter(isEven);
console.log(output); // ->> [2, 4]

const isLteFive = function (str) {
  // Lte = less then equal
  return str.length <= 5;
};

arr = ['hello', 'code', 'states', 'happy', 'hacking'];
// output = arr.filter(길이 5 이하)
// '길이 5 이하'를 판별하는 함수가 조건으로서 filter 메서드의 전달인자로 전달됩니다.
let output = arr.filter(isLteFive);
console.log(output); // ->> ['hello', 'code', 'happy']

• filter는 기존 배열을 수정하지 않음
• filter 과정
  1) 배열의 각 요소가
  2) 특정 논리(함수)에 따르면, 사실(true)일 때
  3) 따로 분류한다(filter).

map

모든 요소에게 동일한 행동을 준 값에 대하여 모두 반환한다.
하나의 데이터를 다른 데이터로 매핑(mapping) 할 때 사용.
행동은 함수로 작성. 기존배열을 수정하지 않음.

let arr = [1, 2, 3];

let result = 
arr.map(function(ele) {
  return ele * 2
});

result;

• map 과정
  1) 배열의 각 요소가
  2) 특정 논리(함수)에 의해
  3) 다른 요소로 지정(map)된다.

reduce

배열을 하나의 값으로 만들어 줌.

• 초기값을 정할 수 있으며, 정하지 않으면 배열의 첫번째 요소가 초기값이 된다.
• 이는 누적값(acc)의 기반이 되며 그 다음요소부터 현재값(cur)이 된다.
• 배열을 끝까지 반복한다.
• 결국 누적값의 값을 반환한다.

let arr = [1, 2, 3];

let result = arr.reduce(
function(acc, cur, idx) {
  acc + cur;
  return acc;
});

• reduce 과정
  1) 배열의 각 요소를
  2) 특정 방법(함수)에 따라
  3) 원하는 하나의 형태로
  4) 응축한다. (reduction)

reduce 색다른 이용법

1. 배열을 문자열로

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, '');
[코드] 콜백 함수 joinName은 users 배열 안에 있는 요소의 이름을 하나로 응축합니다.

2. 배열을 객체로

---

Chapter3. 고차 함수의 중요성

추상화(abstraction)

복잡한 어떤 것을 압축해서 핵심만 추출한 상태로 만드는 것.

• 추상화의 관점에서 함수를 바라보면, 함수는 사고(thought) 또는 논리(logic)의 묶음
• 함수를 통해 얻은 추상화를, 한 단계 더 높인 것이 고차 함수
• 함수 = 값을 전달받아 값을 리턴한다 = 값에 대한 복잡한 로직은 감추어져 있다 = 값 수준에서의 추상화

고차 함수는 이 추상화의 수준을 사고의 추상화 수준으로 끌어올림.

• 값 수준의 추상화: 단순히 값(value)을 전달받아 처리하는 수준
• 사고의 추상화: 함수(사고의 묶음)를 전달받아 처리하는 수준
  --> 고차함수를 통해 보다 높은 수준(higher order)에서 생각할 수 있음.