고차 함수_2 (feat. 내장 고차 함수 filter, map)

✅고차 함수란?

고차 함수(higher order function)는 함수를 인자(argument)로 받거나 함수를 리턴하는 함수를 말한다. 이 때 다른 함수(caller)의 인자(argument)로 전달되는 함수를 콜백 함수(callback function)라고 한다.

 

---

앞서 말했듯이 함수는 일급 객체라서 다음과 같은 특성을 갖는다.

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

콜백 함수를 전달받은 함수는 이 콜백 함수를 호출(invoke)할 수 있다. caller는 조건에 따라 콜백 함수의 실행 여부를 결정할 수도 있고, 심지어 여러 번 실행할 수도 있다. 특히 콜백 함수는 어떤 작업이 완료되었을 때 호출되는 경우가 많아서 답신 전화를 뜻하는 콜백이라는 이름이 붙여졌다고 한다.

---

자바스크립트에는 기본적으로 내장되어 있는 고차 함수들이 존재한다. 바로 배열 메소드들 중 일부가 고차 함수에 해당한다.

대표적인 고차 함수에 대해 알아보자!

filter()
map()

이 외에도 reduce, forEach, find, sort, some, every 등이 있다..!

---

filter

배열의 filter 메소드는 배열의 요소 중 특정 조건을 만족하는 요소들만을 걸러내고(filter), 새로운 배열로 반환해준다.

arr.filter(callback 함수)

이때 사용되는 callback 함수는 배열의 각 요소를 시험하는 함수이다. true를 반환하면 요소를 유지하고, false를 반환하면 버린다! 

 

예시

let arr = ['hello', 'jewon', 'study', 'is', 'very', 'hard'];

funtion isLength5 (element) {
	return element.length >= 5;
}

let filteredArr = arr.filter(isLength5); // => ['hello', 'jewon', 'study'] 

코드스테이츠에서 이해하기 쉽게 만들어준 map

---

map

배열의 map 메소드는 배열의 모든 요소에 callback함수를 적용하고, 이 값들을 모아 새로운 배열을 반환한다.

arr.map(callback 함수)

 

const cartoons = [
  {
    id: 1,
    bookType: 'cartoon',
    subtitle: '공부하자',
    createdAt: '2003-09-09',
    averageScore: 9.66,
  },
  {
    id: 2,
    // .. 이하 생략
  },
  // ... 이하 생략
]; // 만화책의 모음

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

const subtitles = cartoons.map(findSubtitle);
// >> ['공부하자', ... ] 각 요소(객체)의 key의 값(subtitles)들만 반환해준다.

코드스테이츠에서 이해하기 쉽게 만들어준 filter