S2) Unit 1. [JS] 고차함수

📣 일급 객체

✔️ JS에서 특별하게 취급되는 객체 <함수>

➰ 변수에 할당 할 수 있다.
➰ 다른 함수의 전달인자로 전달될 수 있다.
➰ 다른 함수의 결과로서 리턴될 수 있다.

 

📣 고차 함수

✔️ 함수를 전달인자로 받을 수 있고, 함수를 리턴할 수 있는 함수

➰  다른 함수의 전달인자로 전달되는 함수 <콜백 함수>
➰ 콜백 함수를 전달 받은 고차 함수는 내부에서 콜백 함수를 호출 할 수 있고, 조건에 따라 실행 여부를 결정할 수도 있다.
➰ 함수를 리턴하는 함수 <커링 함수> (따로 커링함수 라는 용어를 쓸 필요는 없다)
➰ 커링함수 ⊂ 고차 함수 

 

📣 내장 고차 함수

1️⃣ 배열 메서드 filter(걸러내는 기준)

모든 배열의 요소 중에서 특정 조건을 만족하는 요소를 걸러내는 메서드
걸러내기 위한 조건을 명시한 함수를 전달인자로 받는다.
배열의 각 요소에 인자로 전달받은 함수를 적용한다.
조건을 만족하면 true, 아니면 false를 반환한다.
true를 반환하는 요소를 기준으로 신규 배열을 만들어 반환한다.

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;
};

// 함수 표현식
const isEven = function (num) {
  return num % 2 === 0;
};

let arr = [1, 2, 3, 4];
// let output = arr.filter(짝수);
// '짝수'를 판별하는 함수가 조건으로서 filter 메서드의 전달인자로 전달됩니다.
let output = arr.filter(isEven);	// 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']

 

📌 문제

만화책 식객 27권의 정보가 배열에 담겨있습니다. 출판 연도가 2003년인 단행본만 담은 배열을 만드세요.

 

✏️ 풀이

// 단행본 모음
const cartoons = [
  {
    id: 1,
    bookType: 'cartoon',
    title: '식객',
    subtitle: '어머니의 쌀',
    createdAt: '2003-09-09',
    genre: '요리',
    artist: '허영만',
    averageScore: 9.66,
  },
  {
    id: 2,
    // .. 이하 생략
  },
  // ... 이하 생략
]; 

// 단행본 한 권의 출판 연도가 2003인지 확인하는 함수
const isCreatedAt2003 = function (cartoon) {
  const fullYear = new Date(cartoon.createdAt).getFullYear()
  return fullYear === 2003;
}; 

// 출판 연도가 2003년인 책의 모음
const filteredCartoons = cartoons.filter(isCreatedAt2003);

 

2️⃣ map

모든 배열의 값에 함수를 실행하는 메서드이다.
콜백함수를 실행한 결과를 가지고 새로운 배열을 만든다.
콜백함수에 두 번째 전달인자를 줄 경우 인덱스를 가져온다.

 

📌 문제

만화책 식객 27권의 정보가 배열에 담겨있습니다. 각 책의 부제(subtitle)만 담은 배열을 만드세요.

 

✏️ 풀이

// 만화책 모음
const cartoons = [
  {
    id: 1,
    bookType: 'cartoon',
    title: '식객',
    subtitle: '어머니의 쌀',
    createdAt: '2003-09-09',
    genre: '요리',
    artist: '허영만',
    averageScore: 9.66,
  },
  {
    id: 2,
    // .. 이하 생략
  },
  // ... 이하 생략
]; 

// 만화책 한 권의 부제를 리턴하는 로직(함수)
const findSubtitle = function (cartoon) {
  return cartoon.subtitle;
}; 

// 각 책의 부제 모음 
const subtitles = cartoons.map(findSubtitle); // ['어머니의 쌀', ...]

 

 

3️⃣ reduce

배열의 각 요소를 순회하며 콜백함수의 실행 값을 누적하여 하나의 결과 값을 반환한다.
배열이 들어가서 하나의 값이 나온다.
첫 번째 매개변수는 '초기값' 또는 '누적값'
두 번째 매개변수는 '현재값'

 

📌 문제

만화책 식객 27권의 정보가 배열에 담겨있습니다. 각 단행본의 평점의 평균을 리턴하세요.

 

✏️ 풀이

// 단행본 모음
const cartoons = [
  {
    id: 1,
    bookType: 'cartoon',
    title: '식객',
    subtitle: '어머니의 쌀',
    createdAt: '2003-09-09',
    genre: '요리',
    artist: '허영만',
    averageScore: 9.66,
  },
  {
    id: 2,
    // .. 이하 생략
  },
  // ... 이하 생략
];

// 단행본 한 권의 평점을 누적값에 더한다.
const scoreReducer = function (sum, cartoon) {
  return sum + cartoon.averageScore;
}; 

// 초기값에 0을 주고, 숫자의 형태로 평점을 누적한다.
let initialValue = 0 
// 모든 책의 평점을 누적한 평균을 구한다.
const cartoonsAvgScore = cartoons.reduce(scoreReducer, initialValue) / cartoons.length;

 

➰ 배열 -> 문자열, 배열 -> 객체 에 많이 사용된다.

 

📌 문제

배열을 문자열로 바꿔라.

 

✏️ 풀이

// 콜백 함수 joinName은 users 배열 안에 있는 요소의 이름을 하나로 응축한다.
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, '

 

 

📌 문제

배열을 객체로 바꿔라.

 

✏️ 풀이

// 콜백 함수 makeAddressBook은 users 배열 안에 있는 요소로 주소록을 만듭니다.
function makeAddressBook(addressBook, user) {
  let firstLetter = user.name[0];

  if(firstLetter in addressBook) {
    addressBook[firstLetter].push(user);	// 맨 앞글자가 이미 객체에 있는 경우
  } else {
    addressBook[firstLetter] = [];
    addressBook[firstLetter].push(user);
  }

  return addressBook;
}

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

users.reduce(makeAddressBook, {});
// {
//  T: [
//    { name: 'Tim', age: 40 }
//  ],
//  S: [
//    { name: 'Satya', age: 30 },
//    { name: 'Sundar', age: 50 }
//  ]
//}

 

 

📣 고차 함수를 쓰는 이유

✔️ 추상화 

복잡한 어떤 것을 압축해서 핵심만 추출한 상태로 만드는 것
추상화를 이용하면 효율적이고 편하게 생각할 수 있다.
생산성의 향상 

 

✔️ 추상화의 좋은 사례인 함수 -> 함수는 사고 또는 논리의 묶음

함수 = 값을 전달받아 값을 리턴한다 = 값에 대한 복잡한 로직은 감추어져 있다 = 값 수준에서의 추상화
고차 함수 = 함수를 전달받거나 함수를 리턴한다 = 사고(함수)에 대한 복잡한 로직은 감추어져 있다 = 사고 수준에서의 추상화

 

📌 문제

주어진 데이터의 남성들의 평균 나이를 구해라.

// 예시 데이터
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;
}

 

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는 여러 개의 함수를 인자로 전달받아 함수를 리턴하는 고차 함수입니다.
  // 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

 

🚨 고차 함수가 아닌 것

함수를 전달인자로 받지 않고, 함수를 리턴하고 있지 않다.

function calcuate(x, y, z){
	const plus = function (num1, num2){
		return num1 + num2;
	}
	return plus(x, y) * z
}