[javascript] 고참함수

고차 함수란?

고차 함수는 함수를 인자(argumnent)로 전달받거나 함수를 결과로 반환(return)하는 함수를 말한다.

또한, 고차 함수의 인자로 들어간 함수를 콜백함수(callback function)이라고 한다.

function greetMessage() {
  return 'Hi, ';
}

function sayHi(func, name){
  return func() + name;
}

console.log(sayHi(greetMessage, 'nittre'));  // Hi, younghan

sayHi() 함수는 인자로 func라는 함수와 name이라는 변수를 받고 있다. 그래서 sayHi() 함수를 호출할 때 첫번째 인자로 함수 greetMessage()를 넘겨주었다. 여기서 sayHi()는 함수를 인자로 받고 있으므로 고차함수이며, greetMessage는 콜백 함수가 된다.

내장 고차함수

• forEach
• find
• filter
• map
• reduce
• sort
• some
• every

일단 내가 찾은 내장 고차함수는 이렇다.

여기서 대체적으로 많이 쓰는
filter, map, reduce
이 3가지를 중점적으로 살펴보자.

1) filter

filter()메서드는 콜백함수에서 true를 리턴하는 모든 요소들을 모아 새로운 배열로 반환한다. 콜백함수를 만족하는 요소가 없는 경우, 빈 배열을 리턴한다.

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

const oddNum = arr.filter(el => {
  if (el%2===1){
    return true;
  } else {
    return false
  }
};

console.log(oddNum);  // [1, 3, 5]

2) map

map() 메서드는 배열 내의 요소들을 순회한 결과를 모아 새로운 배열을 반환하다.

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

const squaredArr = arr.map(el => {
  return el*el
});

3) reduce

누산기(accumulator)가 추가된 map()메서드 정도로 이해할 수 있다.

arr.reduce(callback(acc, cur, idx, arr), initialValue);

• 첫번째 인자: 콜백함수

1. 누산기(acc)
   2.현재 값(cur)
   3.현재 인덱스 (옵션)
   4.원본 배열 (옵션)

• 두번째 인자: 초기값 (옵션)
  초기값이 지정되면, 누산기(acc)에는 초기값이 들어가며, 현재 값(cur)은 배열의 첫번째 요소부터 순회한다
  - 초기값이 지정되지 않으면, 누산기(acc)에는 배열의 첫번째 요소가 들어가며, 현재 값(cur)은 배열의 두번째 요소부터 순회한다.
  
• 콜백함수의 리턴값은 다음 배열 요소의 누산기(acc)에 들어간다.

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

const sumOfArr = arr.reduce((acc, cur) => {
  return acc+cur;
});

console.log(sumOfArr); // 15

• 배열을 문자열로
  수도코드
  // 배열의 각 요소 : 유져 정보
  // 응축하는 방법 (함수) : 하나의 유져의 이름과 쉼표를 이어붙인다(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, ''); // "Tim, Satya, Sundar, "

위 코드를 보면 reduce의 콜백 함수로 joinName()이 들어가고, 초기값을 빈문자열('')로 넣어줬다.
joinName()에 처음 resultStr의 인자로 ''과, users 배열이 들어가 실행되어진다. 언제까지? users 배열의 길이만큼

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

function makeAddressBook(addressBook, user) {  //addressBook 초기 인자값 : {}  > 배열의 요소들
  let firstLetter = user.name[0];	//이름의 첫 문자만 변수에 할당

  if(firstLetter in addressBook) { //객체에 firstLetter 키가 존재하면 
    addressBook[firstLetter].push(user);  //키값이 배열이니깐 배열에 push
  } else {
    addressBook[firstLetter] = []; // 키값은 빈배열
    addressBook[firstLetter].push(user); //키값에 push
  }

  return addressBook;
}

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

users.reduce(makeAddressBook, {});
// {T: Array(1), S: Array(2)}
// S: Array(2)
// 0: {name: "Satya", age: 30}
// 1: {name: "Sundar", age: 50}
// T: Array(1)
// 0: {name: "Tim", age: 40}```