✏️Achievement Goals

✅ 일급 객체(first-class citizen)의 세 가지 특징을 설명할 수 있다.
✅ 고차 함수(higher-order function)에 대해 설명할 수 있다.
✅ 고차 함수를 자바스크립트로 작성할 수 있다.

📝summary

고차함수

함수를 변수에 저장하는 방법을 함수표현식이라고 한다

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

output = square(7);
console.log(output); // --> 49

함수 표현식은 선언식과 다르게 호이스팅이 적용되지 않는다
(호이스팅 - 선언된 위치에 상관없이 함수 사용 가능)
호이스팅을 제외하면 선언식과 표현식은 큰 차이가 없지만
함수 표현식은 함수가 변수에 저장될 수 있다는 사실을 명확히 보여준다

그리고 함수는 변수에 저장된 데이터를 인자로 받거나 리턴값으로 사용할 수 있다
함수도 변수에 저장될 수 있기 때문에 함수를 인자로 받거나 리턴 값으로
사용 할 수 있게 된다

위와 같이 함수를 인자로 받을 수 있고, 함수의 형태로 리턴할 수 있는 함수를 고차함수 라고 한다
이때 다른 함수의 인자로 전달되는 함수를 콜백 함수라고 한다

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

고차함수 (map , filter, reduce)

자바스크립트에는 기본적으로 내장된 고차함수가 몇개 있다
고차함수 중 많이 쓰이는 것들을 정리해보자!

filter : 모든 배열의 요소 중에서 조건에 맞는 데이터만 분류하고 싶을 때

let array = [1,2,3,4,5];
let newArray = array.filter(function(a){
  return a < 4 
  // 조건에 맞는 데이터만 골라준다 
  // 4 보다 작은 데이터만 남는다
})
//화살표 문법을 사용하면 더 간결하게 사용가능하다
let newArray = array.filer((a) => a < 4)

// 기존 array 자료를 변형시키지 않기 때문에
// 새로운 변수에 담아서 사용하면 된다

map : array 안의 데이터에 똑같은 작업을 해줘서 새로운 array를 만들고 싶을때 사용

let array = [1,2,3,4,5];
let newArray = array.map(function(a){
  return a*2
  // array 각각에 *2를 한 새로운 array 반환
})

//화살표 문법을 사용하면 더 간결하게 사용가능하다
const newArry2 = array.map((a) => a * 2);
console.log(newArry2);

reduce : 여러 데이터를, 하나의 데이터로 응축(reduce)할 때 사용

배열을 하나의 값으로 만들어준다

리듀스는 초기값을 정해줄 수 있는데 정해주지 않는다면
배열의 첫번째 요소가 초기값이 되고 초기값은 누적값에 반환이 된다
그 다음 요소부터 현재 값이 되고 원하는 조건에 따라서
누적값에 현재값이 저장이 되고 배열의 끝까지 반복이 되고 누적값을 반환한다

let arr = [1,2,3];

let result = arr.reduce(
  function(acc, cur, idx){
    acc + cur;
    return acc
  });
// acc 누적값 , cur 현재값 , idx 초기값

console.log(result)

참고하면 좋을 자료
고차함수