Skip to content

chp12. 함수형 도구 ​

이 장에서는 함수형 프로그래밍 언어에서 많이 쓰는 map(), filter(), reduce() 함수에 대해 알아봅니다.

함수형 도구: map() ​

X 값이 있는 배열을 Y 값이 있는 배열로 변환합니다.

예제: 고객의 이메일 주소 ​

  • 가진 것: 고객 배열
  • 필요하 것: 고객 이메일 주소 배열
  • 함수: 고객을 받아 이메일 주소를 반환하는 함수
jsx
const customers = [
  { id: "1", email: "b@b.com" },
  { id: "2", email: "a@a.com" },
];

const result = map(customers, function (customer) {
  return customer.email;
});

result = ["b@b.com", "a@a.com"];

주의사항 ​

map함수는 유용합니다. 하지만, 리턴값인 배열 항목을 확인하지 않습니다.

jsx
const customers = [
  { id: "1", email: undefined }, // 이메일이 없음
  { id: "2", email: "a@a.com" },
];

const result = map(customers, function (customer) {
  return customer.email;
});

result = [undefined, "a@a.com"];

이런 경우에는 filter 함수를 사용합니다.

함수를 전달하는 세 가지 방법 ​

map 고차 함수는 함수를 인자로 전달받습니다.

이때 전달할 함수를 정의하는 방법은 3가지가 있습니다.

1. 전역으로 정의 ​

함수를 전역에서 정의합니다.

어디서든 사용 가능합니다.

2. 지역적으로 정의 ​

함수를 지역 범위 안에서 정의합니다.

범위 밖에서는 쓸 수 없어 지역적으로 쓰고 싶은 경우에 사용합니다.

3. 인라인으로 정의 ​

함수를 사용하는 곳에서 바로 정의합니다. 이름이 없기 때문에 익명 함수라고 부릅니다.

특정 문맥에서 한 번만 쓰는 간단한 함수를 정의할 때 사용됩니다.

함수형 도구: filter() ​

배열의 일부 항목을 선택하여 반환합니다.

map 함수는 인자로 넘긴 함수에서 항목을 반환했지만 filter는 boolean을 반환하여 해당 항목을 반환할지 결정합니다.

예제: 고객의 이메일 주소 ​

동일한 예제이지만, 이번에는 이메일이 있는 고객만 반환합니다.

jsx
const cutomers = [
	{ id: '1', email: undefined}, // 이메일이 없음
	{ id: '2', email: 'a@a.com'}
];

const result = filter(customers, function(customer) {
  return Boolean(customer.email); // true or faluse를 반환
});

result = [{id: '2', 'a@a.com'}];

함수형 도구: reduce() ​

배열을 순회하며 값을 누적합니다.

배열과 함수만 인자로 받은 map, filter와는 다르게 누적 초기값을 받습니다.

예제: 문자열 합치기 ​

문자열 배열을 하나의 문자열로 합치는 예시입니다.

jsx
const strings = ["1", "2", "3"];

const result = strings.reduce(strings, "", function (accum, string) {
  return accum + string;
});

result = "123";

정리하며 ​

  • map: 배열의 각 항목을 변환합니다.
  • filter: 배열의 일부 항목을 선택합니다.
  • reduce: 배열을 순회하며 값을 누적합니다.