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 함수는 인자로 넘긴 함수에서 항목을 반환했지만 filterboolean을 반환하여 해당 항목을 반환할지 결정합니다.

예제: 고객의 이메일 주소

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

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: 배열을 순회하며 값을 누적합니다.