[S2U1] JavaScript 고차 함수

 

고차 함수

---

고차 함수란?

고차 함수는

1. 함수를 arguments로 받을 수 있거나
2. 함수를 return할 수 있거나
3. 또는 위 두 가지 사항에 모두 해당하는

함수를 의미한다.

 

// 다른 함수를 arguments로 받는 경우

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

function doubleNum(func, num) {
  return func(num);
}

let output = doubleNum(double, 4);

// return값이 함수인 경우

function adder(added) {
  return function (num) {
    return num + added;
  };
}

let output = adder(5)(3);

// 또는 위 두 가지에 모두 해당하는 경우

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

function doubleAdder(added, func) {
  const doubled = func(added);
  return function (num) {
    return num + doubled;
  };
}

doubleAdder(5, double)(3);

 

이 때, 함수에 전달되어 arguments가 되는 함수를 callback function이라고 부른다.

함수를 arguments로 받는 고차 함수와 헷갈리지 않기

 

✏️ 고차 함수의 중요성

복잡한 어떤 것을 압축해서 핵심만 추출한 상태로 만드는 것을 추상화라고 부른다. 추상화는 곧 생산성의 향상으로 이어지진다.

자바스크립트에서는 함수를 통해 추상화를 얻을 수 있고, 고차 함수를 이용할 경우 추상화의 수준을 더 높일 수 있기 때문에 생산성이 비약적으로 향상된다.

 

function getAverageAgeOfMaleAtOnce(data) {
  const onlyMales = data.filter(function (d) {
    return d.gender === 'male';
  });

  const numOfMales = onlyMales.length;

  const onlyMaleAges = onlyMales.map(function (d) {
    return d.age;
  });

  const sumOfAges = onlyMaleAges.reduce(function (acc, cur) {
    return acc + cur;
  }, 0);

  return sumOfAges / numOfMales;
}

위 함수는 data로 입력된 정보의 남성의 평균 나이를 구하는데만 사용할 수 있는 함수이다. 만약 위 과정을 별도로 분리하여 함수 적용 순서를 다르게 만들 수 있다면...?

 

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) {
  return function (data) {
    let result = data;
    for (let i = 0; i < funcArgs.length; i++) {
      result = funcArgs[i](result);
    }
    return result;
  };
}

const getAverageAgeOfMale = compose(getOnlyMales, getOnlyAges, getAverage);

const result = getAverageAgeOfMale(data);

기존 getAverageAgeOfMale 함수에 있던 과정들을 분리해 getOnlyMales, getOnlyAges, getAverage 라는 각각의 함수로 만들어주었다. 각각 남성만 분리, 나이만 분리, 평균을 구하는 함수이다.

compose 함수는 전달 받은 함수 인자들을 순서대로 적용시키는 고차 함수이다. 이 함수를 이용해 원본 data에서 남성을 분리하고, 남성 중 나이 정보만 가져와서 평균을 내는 getAverageAgeOfMale라는 함수를 새로 만들어 낼 수 있다.

각각의 함수들은 다른 목적을 위해 재사용될 수 있다. 이것이 기존 getAverageAgeOfMale 함수와의 차이점이면서 고차 함수를 활용하는 것의 중요성이라고 볼 수 있다.

 

 

내장 고차 함수

---

✏️ filter

원하는 정보만 필터링 할 수 있다.

1. 배열의 각 요소가
2. 특정 논리에 따라 참이라면
3. 따로 분류한다.

 

const numArr = [1, 2, 3, 4, 5, 6, 7, 8];

1부터 8까지의 값을 갖고 있는 배열이 있다고 했을 때,

const isEven(num) {
    return num % 2 === 0;
}

각 요소의 값을 2로 나누어 나머지가 0이라면 (true) === 짝수라면!

numArr.filter(isEven);

이 isEven을 이용해 필터링을 했을 때 위의 결과는 [2, 4, 6, 8]이 된다!

 

참고로 filter 메소드는 immutable한 메소드이기 때문에 원본 배열을 건드리지 않는다!!

 

✏️ map

하나의 데이터를 다른 데이터로 매핑한다.

1. 배열의 각 요소가
2. 특정 논리에 의해
3. 다른 요소로 지정된다.

 

const numArr = [1, 2, 3, 4];

1부터 4까지의 값을 가진 배열이 있고,

const changeNum = function(num) {
    if (num % 2 === 0) {
    	return '짝수';
    } else return '홀수';
}

전달 인자의 값이 짝수라면 '짝수'를, 그렇지 않으면 '홀수'를 반환하는 함수가 있다면

numArr.map(changeNum);

changeNum 함수로 배열을 매핑했을 때 결과는 ['홀수', '짝수', '홀수', '짝수']가 된다!

 

map 메소드 또한 immutable하기 때문에 원본 배열을 건드리지 않는다!!

 

✏️ reduce

데이터를 원하는 형태로 응축한다.

1. 배열의 각 요소를
2. 특정 논리에 따라
3. 원하는 하나의 형태로 응축한다.

 

const numArr = [1, 2, 3, 4];

1부터 4까지의 값을 가진 배열이 있고

const sumAll = function(sum, num) {
    return sum + num;
}

요소를 더하는 함수가 있다고 할 때,

numArr.reduce(sumAll, 0);

초기값을 0으로 설정하고 sumAll 함수로 배열을 응축했을 때 결과는 1 + 2 + 3 + 4인 10이 된다!

 

reduce 메소드는 초기값 설정이 중요하다. 초기값이 설정되지 않았다면 누적값은 배열의 첫 번째 값이고 현재값은 배열의 두 번째 값이 된다. 초기값이 설정되었다면 누적값은 초기값이고 현재값은 배열의 첫 번째 값이다.

 

위 예제에서 초기값이 없을 경우, reduce는 1 + 2 + 3 + 4를 그대로 수행하고

초기값이 1일 경우 reduce는 1 + 1 + 2 + 3 + 4를 수행하게 된다.