[JS] chapter14. 내장고차함수

 

 

 

 

 

 

 

 

 

 

 

 

 

📌 내장 고차 함수

 

 

JS에서는 기본적으로 내장된 고차 함수가 있다

배열 메서드들 중 일부가 대표적인 고차 함수

 

 

1. filter

 

배열 메서드이며, 모든 배열의 요소 중에서 특정 조건을 만족하는 요소를 걸러내는 메서드

 

filter 과정

• 배열의 각 요소가
• 특정 논리(함수)에 따르면, 사실(true)일 때
• 따로 분류(filter).

 

 

// 아래 코드에서 '짝수'와 '길이 5 이하'는 문법 오류(syntax error)에 해당합니다.
// 의미만 이해해도 충분합니다.
let arr = [1, 2, 3, 4];
let output = arr.filter(짝수);
console.log(output); // ->> [2, 4]

arr = ['hello', 'code', 'states', 'happy', 'hacking'];
output = arr.filter(길이 5 이하)
console.log(output); // ->> ['hello', 'code', 'happy']

 

여기서 걸러내는 기준이 되는 특정 조건은 filter 메서드의 전달인자로 전달, 이때 전달되는 조건은 함수의 형태

filter 메서드는, 걸러내기 위한 조건을 명시한 함수를 전달인자로 받기 때문에 고차 함수이다

 

 

// 아래 코드는 정확한 표현 방식은 아닙니다.
// 의미만 이해해도 충분합니다.

let arr = [1, 2, 3];
// 배열의 filter 메서드는 함수를 전달인자로 받는 고차 함수입니다.
// arr.filter를 실행하면 내부적으로 arr에 접근할 수 있다고 생각해도 됩니다.
arr.filter = function (arr, func) {
  const newArr = [];
  for (let i = 0; i < arr.length; i++) {
    // filter에 전달인자로 전달된 콜백 함수는 arr의 각 요소를 전달받아 호출됩니다.
    // 콜백 함수가 true를 리턴하는 경우에만 새로운 배열에 추가됩니다.
    if (func(arr[i]) === true) {
      newArr.push(this[i]);
    }
  }
  // 콜백 함수의 결과가 true인 요소들만 저장된 배열을 리턴합니다.
  return newArr;
};

/*
 * filter 메서드의 보다 정확한 정의는 아래와 같습니다. 아래 코드를 이해하기 위해서는 다음 유닛에서 프로토타입과 this에 대한 학습이 필요합니다.
 * Array.prototype.filter = function(func) {
 *   const arr = this;
 *   const newArr = []
 *   for(let i = 0; i < arr.length; i++) {
 *     if (func(arr[i]) === true) {
 *       newArr.push(this[i])
 *     }
 *   }
 *   return newArr;
 * }
 */

 

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']

 

 

2. map

 

• 배열의 각 요소가
• 특정 논리(함수)에 의해
• 다른 요소로 지정(map) 

 

const double = function (num) {
  return num * 2;
};

let arr = [1, 2, 3, 4, 5, 6, 7];
let output = arr.map(double);
console.log(output); // [2, 4, 6, 8, 10, 12, 14]

 

 

3. reduce

 

• 배열의 각 요소를
• 특정 방법(함수)에 따라
• 원하는 하나의 형태로
• 응축 (reduction)

 

const addAccCur = function (acc, cur) {
  return acc + cur;
};

let arr = [1, 2, 3, 4, 5, 6, 7];
let output = arr.reduce(addAccCur);
console.log(output); // 28

 

초기값을 선언 했을 때

 

const addAccCur = function (acc, cur) {
  return acc + cur;
};
const initialValue = 1;

let arr = [1, 2, 3, 4, 5, 6, 7];
let output = arr.reduce(addAccCur, initialValue);
console.log(output); // 29

 

 

 

 

 

🔦 고차함수의 중요성

 

추상화(abstraction)

 

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

추상화 = 생산성의 향상

함수 = 값을 전달받아 값을 리턴 = 값에 대한 복잡한 로직은 감추어져 있음 = 추상화

 

getAverage 함수는 배열을 인자로 받아, 평균값을 리턴

function getAverage(data) {
  let sum = 0;
  for (let i = 0; i < data.length; i++) {
    sum = sum + data[i];
  }
  return sum / data.length;
}

let output = getAverage([1, 2, 3]);
console.log(output); // --> 2

output = getAverage([4, 2, 3, 6, 5, 4]);
console.log(output); // --> 4

 

 

사고 수준의 추상화

 

const data = [
  {
    gender: 'male',
    age: 24,
  },
  {
    gender: 'male',
    age: 25,
  },
  {
    gender: 'female',
    age: 27,
  },
  {
    gender: 'female',
    age: 22,
  },
  {
    gender: 'male',
    age: 29,
  },
];

 

-> 남성들의 평균 나이는?

 

 

function getAverageAgeOfMaleAtOnce(data) {
  const onlyMales = data.filter(function (d) {
    // data.filter는 배열의 각 요소에 인자로 전달받은 함수를 적용하고,
    // 그 결과가 true인 요소만을 갖는 배열을 리턴합니다.
    return d.gender === 'male';
  });

  const numOfMales = onlyMales.length;

  const onlyMaleAges = onlyMales.map(function (d) {
    // onlyMales.map는 배열의 각 요소에 인자로 전달받은 함수를 적용하고,
    // 각 결과를 요소로 갖는 배열을 리턴합니다.
    return d.age;
  });

  const sumOfAges = onlyMaleAges.reduce(function (acc, cur) {
    // onlyMaleAges.reduce는 배열의 각 요소에 인자로 전달받은 함수를 적용하고,
    // 각 결과를 두 번째 인자로 전달받은 초기값(0)에 누적한 결과를 리턴합니다.
    return acc + cur;
  }, 0);

  return sumOfAges / numOfMales;
}

 

-> 남성의 최연소 나이/최연장 나이? 등등등

 

이때 추상화-> 고차 함수 각각의 작업(filter, map, reduce) 함수 분리 후 compose의 인자로 전달되는 콜백함수

 

 

function getOnlyMales(data) {
  return data.filter(function (d) {
    return d.gender === 'male';
  });
}

function getOnlyAges(data) {
  return data.map(function (d) {
    return d.age;
  });
}

function getAverage(data) {
  const sum = data.reduce(function (acc, cur) {
    return acc + cur;
  }, 0);
  return sum / data.length;
}

function compose(...funcArgs) {
  // compose는 여러 개의 함수를 인자로 전달받아 함수를 리턴하는 고차 함수입니다.
  // compose가 리턴하는 함수(익명 함수)는 임의의 타입의 data를 입력받아,
  return function (data) {
    // funcArgs의 요소인 함수들을 차례대로 적용(apply)시킨 결과를 리턴합니다.
    let result = data;
    for (let i = 0; i < funcArgs.length; i++) {
      result = funcArgs[i](result);
    }
    return result;
  };
}

// compose를 통해 함수들이 순서대로 적용된다는 것이 직관적으로 드러납니다.
// 각각의 함수는 다른 목적을 위해 재사용(reuse) 될 수 있습니다.
const getAverageAgeOfMale = compose(
  getOnlyMales, // 배열을 입력받아 배열을 리턴하는 함수
  getOnlyAges, // 배열을 입력받아 배열을 리턴하는 함수
  getAverage // 배열을 입력받아 `number` 타입을 리턴하는 함수
);

const result = getAverageAgeOfMale(data);
console.log(result); // --> 26