[🐱 자바스크립트] 고차함수와 배열 메서드(map, reduce, filter)

자바스크립트 고차함수란?

---

🍎 고차함수란?

함수는 일급 객체이다.
따라서 함수를 변수에 할당할 수 있고, 함수를 전달인자로 받을 수 있고, 함수를 리턴할 수 있다.

이때 <함수를 리턴하는 함수>, <함수를 전달인자로 받는 함수>를 모두 고차함수라고 부른다.

예제

function returnFunction() {
  return function printHello (){ 
    return 'Hello!';
  }
}

returnFunction은 함수를 리턴하므로 고차함수의 한 예이다.

---

🍎 콜백함수 -> 비동기 처리, 배열 고차함수에 사용

고차함수 사용시 <다른 함수의 전달 인자>가 되는 함수를 콜백함수라고 한다.

함수를 전달인자로 받는 함수는 커링 함수 라고 부르기도한다. (용어는 중요하지 않다.)

예제

function compose(func1, func2) {
  return function(num){
    return func1(func2(num));
  }
}

func1과 func2는 compose 함수에 의해 호출되므로 콜백함수에 해당한다.

---

🍎 내장 고차 함수

자바스크립트에는 내장된 고차함수가 존재하는데, 대부분 배열 메서드가 이에 해당한다.
배열 메서드에는 filter , map , reduce 등이 있다.

filter 메서드

-> "true에 해당하는 값만 추출"하는 것을 기억하자

• 기능 : 특정 조건을 만족( true )하는 요소를 추출.
• 기본 형태 : arr.filter(callback)
  이때 걸러내기 위한 조건 함수가 filter 메서드의 전달 인자에 해당하므로 고차함수이다.

---

filter 메서드 사용 예시

function removeElement(arr, discarder) {
   return arr.filter(function (el) {
     if (el !== discarder) {
       return true; //true인 요소만을 반환한다.
     }
     return false;
   });
  // 위 if문은 
  // return el !== discarder 와 동일
 }

콜백함수에서 배열 값이 조건을 만족한 경우 true를 반환한다.

map 메서드

• 기능 : 하나의 데이터를 다른 데이터로 매핑 할 때 사용
• 기본 형태 : arr.map(callback)

---

map 메서드 사용 예시

const nums = [1,2,3,4,5]
function addPlusOne(nums){
  return nums.map(function(element){
    return element + 1;
  })
}
console.log(nums) // [2, 3, 4, 5, 6]

reduce 메서드

• 기능 : 배열의 각 요소에 대해 하나의 결과값 을 반환한다.
  ( ex. 배열의 덧셈/뺄셈 ,최대/최소, 배열을 문자열로 출력 등 )
• 기본 형태 :
 arr.reduce(callback[, initialValue])
• 특징
  - reduce 메서드의 매개변수로 초기값 설정이 가능하다.
  • 콜백함수의 매개변수로 accumulator, currentValue, currentIndex, array를 받을 수 있다.

---

reduce 메서드 사용 예시

const nums = [1,2,3,4,5]
function sum(num){
  return nums.reduce(function(acc,cur){
    return acc + cur
  },0) //함수의 인자로 초기값을 설정할 수 있다.
}
console.log(nums) // 15

---