[JavaScript] map, filter & reduce로 결과를 만드는 함수 생성

2023. 5. 7. 23:51· Node.js/JS
목차
  1. map, filter, reduce로 함수 생성하기

reduce나 take는 하나의 결과를 만드는 함수이다.

 

이에 반해 map, filter는 배열이나 이터러블한 모나딕한 값에 원소들에게 함수들을 합성해 놓는 역할을 하고, reduce나 take는 원소들을 꺼내서 연산을 진행하기에, 최종적으로 결과를 만드는 함수다.

 

map이나 filter 같은 함수는 지연성을 가질 수 있는 함수라고 볼 수 있고, reduce 같은 함수는 연산을 시작하는 시작점을 알리는 함수라고 볼 수 있다.

 

map, filter를 반복하다가 reduce 같은 함수로 연산을 시켜서 함수를 종료하는 등으로 중간에 연산을 시작한다. 함수형으로 작업할 때, map이나 filter로 정제하다가 reduce로 값을 뽑아내도록 사고하는 것이 중요하다.

 

map, filter, reduce로 함수 생성하기

예를 들어, 객체를 넣어 URI의 querystring을 만들어 내는 함수를 map, filter, reduce를 합성하여 생성할 수 있다.

const queryStr = obj => obj;
console.log(queryStr({ limit: 10, offset: 10, type: 'notice' }));

limit, offset, type 프로퍼티의 값을 받아서 querystring으로 변환해주는 함수를 만들고자 한다.

 

키와 값을 추출해보는 함수를 먼저 작성한다.

const queryStr = obj => go(
  obj,
  Object.entries
);
console.log(queryStr({ limit: 10, offset: 10, type: 'notice' }));

// (3) [Array(2), Array(2), Array(2)]
// 0: (2) ["limit", 10]
// 1: (2) ["offset", 10]
// 2: (2) ["type", "notice"]
// length: 3
// __proto__: Array(0)

이렇게 각각 키와 값 배열을 원소로 가지는 배열을 받아낼 수 있다.

 

이제 이 값들을 하나의 문자열로 변환한다.

const queryStr = obj => go(
  obj,
  Object.entries,
  map(([k, v]) => `${k}=${v}`),
);
console.log(queryStr({ limit: 10, offset: 10, type: 'notice' }));

// (3) ["limit=10", "offset=10", "type=notice"]

마지막으로 각각을 모두 더해 하나의 querystring을 만들어준다.

const queryStr = obj => go(
  obj,
  Object.entries,
  map(([k, v] => `${k}=${v}`),
  reduce((a, b) => `${a}&${b}`)
);
console.log(queryStr({ limit: 10, offset: 10, type: 'notice' }));

// limit=10&offset=10&type=notice

인자로 받은 객체를 Object.entries를 거치고, map을 거친 다음, 마지막에 원하는 값을 reduce로 연산하여 추출했다.

 

마지막으로, obj를 인자로 받아 go 함수를 실행하기에 이를 pipe로 바꿀 수 있다.

const queryStr = pipe(
  Object.entries,
  map(([k, v]) => `${k}=${v}`),
  reduce((a, b) => `${a}&${b}`)
);

 

이번에는 함수를 어떻게 합성하여 사용할지에 대해서 배웠다. 앞서 지연 평가 함수에서 함수들을 합성하여 사용해봤는데 본격적으로 함수 합성에 대해서 배워볼 수 있어 좋았다. 약간 사고의 방향을 잡는 단계인 것 같다. 내가 원하는 대로 map과 filter를 사용하다가 특정 인사이트가 될 값을 뽑아내기 위해서는 reduce나 take 함수를 사용하는 방향을 고려하면서 코드를 작성하는 것이 함수형 프로그래밍에 있어서 좋은 접근이 될 것이다.

 

출처: 인프런 함수형 프로그래밍과 JavaScript ES6+

저작자표시 비영리 (새창열림)

'Node.js > JS' 카테고리의 다른 글

[JavaScript] 함수 합성을 통해 find 함수 만들기  (0) 2023.05.08
[JavaScript] Array.prototype.join 보다 다형성 높은 join 함수  (0) 2023.05.08
[JavaScript] map, filter 계열 함수들이 가지는 결합 법칙, 지연평가의 장점  (0) 2023.05.05
[JavaScript] L.range, L.map, L.filter, take의 평가 순서 및 효율성  (0) 2023.05.03
[JavaScript] reduce, map, filter, take 중첩 사용  (0) 2023.05.03
  1. map, filter, reduce로 함수 생성하기
'Node.js/JS' 카테고리의 다른 글
  • [JavaScript] 함수 합성을 통해 find 함수 만들기
  • [JavaScript] Array.prototype.join 보다 다형성 높은 join 함수
  • [JavaScript] map, filter 계열 함수들이 가지는 결합 법칙, 지연평가의 장점
  • [JavaScript] L.range, L.map, L.filter, take의 평가 순서 및 효율성
턴태
턴태
import { Dream } from "future";
턴태의 밑바닥부터 시작하는 de-vlogimport { Dream } from "future";
턴태
턴태의 밑바닥부터 시작하는 de-vlog
턴태
전체
오늘
어제
  • ROOT (187)
    • Node.js (37)
      • ES6 (1)
      • TypeScript (3)
      • Express.js (16)
      • NestJS (16)
      • JS (24)
    • 프론트엔드 (29)
      • CS (5)
    • 백엔드 (1)
      • 검색 (2)
      • Database (1)
    • 기타 툴 (1)
      • git (1)
    • 데브옵스 & 인프라 (19)
      • Kubernetes (15)
      • Docker (2)
      • Monitoring (1)
      • IaC (1)
    • Algorithm (90)
      • Implementation & simulation (5)
      • Math (4)
      • Brute Force (1)
      • String (0)
      • Graph (5)
      • Recursion & Backtracking (19)
      • Divide & Conquer (2)
      • Dynamic Programming (18)
      • Greedy (13)
      • Priority Queue (2)
      • Binary Search (6)
      • Data Structure (7)
      • Shortest Path (5)
      • Minimum Spanning Tree (1)
      • Sorting (1)
      • Prefix Sum (1)
    • Linux (1)
      • Ubuntu (1)
    • Diary (5)
      • Algorithm (1)
      • Conference (1)
      • Retrospective (3)
    • Book (0)
      • Self-Development (0)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • Express
  • baekjoon
  • 타입스크립트
  • dynamic programming
  • 자바스크립트
  • node.js
  • 백준
  • 토이프로젝트
  • backtracking
  • TypeScript
  • 노드
  • N과 M
  • 인프런X디프만
  • 쿠버네티스
  • 함수형 프로그래밍
  • 네스트
  • GREEDY
  • 인프런
  • Omuk
  • Kubernetes
  • Toy Project
  • 오먹
  • k8s
  • 백트래킹
  • 파이썬
  • 다이나믹 프로그래밍
  • python
  • 익스프레스
  • nestjs
  • 디프만

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.1
턴태
[JavaScript] map, filter & reduce로 결과를 만드는 함수 생성
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.